2.4.4 Đường viền
Đường viền là đường bao quanh phần tử (gồm vùng nội dung và vùng đệm trong). Có tám kiểu đường viền, Ngoài ra, có thể định dạng độ dày và màu sắc tùy ý. Có thể thiết lập đường viền xung quanh phần tử, hoặc chỉ thiết lập cho một số cạnh cụ thể. CSS3 cung cấp các thuộc tính giúp tạo các góc bo tròn (rounding of the corners) và tạo đường viền bằng hình ảnh.
Các kiểu đường viền
Thuộc tính xác định kiểu đường viền là thuộc tính quan trọng nhất, vì theo đặc tả của CSS, nếu không có thuộc tính này, các thuộc tính còn lại liên quan đến đường viền sẽ bị bỏ qua.
Có thể thiết lập kiểu đường viền cho từng cạnh bằng các thuộc tính: border-top-style, border-right-style, border-bottom-style, border-left-style. Với các đặc tính,
– Giá trị: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
– Mặc định: none
– Áp dụng: mọi phần tử
– Kế thừa: không
Ví dụ sau sẽ thiết lập bốn kiểu đường viền khác nhau cho bốn cạnh,
p {
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: double;
border-left-style: dotted;
width: 300px;
height: 100px;
}
Hình sau minh họa các kiểu của đường viền,
Cũng có thể thiết lập kiểu đường viền cho cả bốn cạnh một lần bằng thuộc tính: border-style. Với các đặc tính,
– Giá trị: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
– Mặc định: none
– Áp dụng: mọi phần tử
– Kế thừa: không
Thuộc tính border-style thiết lập kiểu đường viền cho bốn cạnh theo chiều kim đồng hồ (clockwise). Giống như thuộc tính padding đã tìm hiểu, thứ tự các cạnh sẽ được áp dụng sẽ là trên, phải, dưới, trái (để dễ nhớ, sử dụng từ TRouBLe rồi phiên ra thứ tự). Cần cung cấp bốn giá trị cho bốn cạnh này, tuy nhiên, nếu cạnh trên/dưới và phải/trái có kiểu giống nhau thì chỉ cần cung cấp hai giá trị.
Ví dụ,
p {
border-style: solid dashed double dotted;
width: 300px;
height: 100px;
}
Lưu ý: nếu không thiết lập giá trị cho độ dày của đường viền, thì giá trị mặc định là medium (trung bình) sẽ được sử dụng. Nếu không thiết lập màu cho đường viền, thì màu mặc định sẽ là màu mặt trước (foreground color) của phần tử (cùng màu với văn bản).
Độ dày của đường viền
Có thể thiết lập độ dày cho từng cạnh đường viền bằng các thuộc tính: border-top-width, border-right-width, border-bottom-width, border-left-width. Với các đặc tính,
– Giá trị: đơn vị đo độ dày | thin | medium | thick | inherit
– Mặc định: medium
– Áp dụng: mọi phần tử
– Kế thừa: không
Ví dụ sau sẽ thiết lập độ dày cho từng cạnh,
p {
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 12px;
border-style: solid;
width: 300px;
height: 100px;
}
Đơn vị đo độ dày thường là px hoặc em. Tuy nhiên, cũng có thể sử dụng các từ khóa: thin (mỏng), medium (vừa, trung bình) hoặc thick (dày).
Cũng có thể thiết lập độ dày cho cả bốn cạnh một lần bằng thuộc tính: border-width. Với các đặc tính,
– Giá trị: đơn vị đo độ dày | thin | medium | thick | inherit
– Mặc định: medium
– Áp dụng: mọi phần tử
– Kế thừa: không
Thuộc tính border-width thiết lập độ dày cho bốn cạnh theo chiều kim đồng hồ (clockwise). Giống như thuộc tính border-style, thứ tự các cạnh sẽ được áp dụng sẽ là trên, phải, dưới, trái (để dễ nhớ, sử dụng từ TRouBLe rồi phiên ra thứ tự). Cần cung cấp bốn giá trị cho bốn cạnh này, tuy nhiên, nếu cạnh trên/dưới và phải/trái có độ dày bằng nhau thì chỉ cần cung cấp hai giá trị, nếu cả bốn cạnh có độ dày bằng nhau thì chỉ cần cung cấp một giá trị.
Ví dụ,
p {
border-width: thin medium thick 12px;
border-style: solid;
width: 300px;
height: 100px;
}
Màu của đường viền
Để thiết lập màu cho đường viền, cũng có thể thiết lập cho từng cạnh, hoặc cho tất cả các cạnh một lần. Khi thiết lập màu cho đường viền, nó sẽ đè lên màu đường viền trước đó (được thiết lập bằng thuộc tính color).
Có thể thiết lập màu cho từng cạnh bằng các thuộc tính: border-top-color, border-right-color, border-bottom-color, border-left-color. Với các đặc tính,
– Giá trị: tên màu hoặc giá trị RGB | transparent | inherit
– Mặc định: màu do thuộc tính color thiết lập
– Áp dụng: mọi phần tử
– Kế thừa: không
Ví dụ sau sẽ thiết lập màu cho từng cạnh,
p {
border-top-color: green;
border-right-color: red;
border-bottom-color: violet;
border-left-color: yellow;
border-width: 6px;
border-style: solid;
width: 300px;
height: 100px;
}
Cũng có thể thiết lập màu cho cả bốn cạnh một lần bằng thuộc tính border-color. Với các đặc tính,
– Giá trị: tên màu hoặc giá trị RGB | transparent | inherit
– Mặc định: màu do thuộc tính color thiết lập
– Áp dụng: mọi phần tử
– Kế thừa: không
Thuộc tính border-color thiết lập màu cho bốn cạnh theo chiều kim đồng hồ (clockwise). Giống như thuộc tính border-width, thứ tự các cạnh sẽ được áp dụng sẽ là trên, phải, dưới, trái (để dễ nhớ, sử dụng từ TRouBLe rồi phiên ra thứ tự). Cần cung cấp bốn giá trị cho bốn cạnh này, tuy nhiên, nếu cạnh trên/dưới và phải/trái có màu giống nhau thì chỉ cần cung cấp hai giá trị, nếu cả bốn cạnh có màu giống nhau thì chỉ cần cung cấp một giá trị.
Ví dụ, cạnh trên/dưới có màu xanh, cạnh phải/trái có màu đỏ,
p {
border-color: green red;
border-width: 6px;
border-style: solid;
width: 300px;
height: 100px;
}
Kết hợp kiểu, độ dày và màu
Để viết mã nhanh hơn, CSS cho phép định dạng cả ba giá trị gồm: kiểu, độ dày và màu một lần cho từng cạnh, hoặc một lần cho cả bốn cạnh.
Để định dạng cho từng cạnh, sử dụng các thuộc tính: border-top, border-right, border-bottom và border-left.
– Giá trị: border-style border-width border-color | inherit
– Mặc định: giá trị mặc định của mỗi thuộc tính
– Áp dụng: mọi phần tử
– Kế thừa: không
Ví dụ,
p {
border-top: solid 6px green;
border-right: solid 6px red;
border-bottom: solid 6px violet;
border-left: solid 6px yellow;
width: 300px;
height: 100px;
}
Để định dạng một lần cho cả bốn cạnh, sử dụng thuộc tính border, các giá trị của thuộc tính border sẽ luôn luôn áp dụng trên cả bốn cạnh,
– Giá trị: border-style border-width border-color | inherit
– Mặc định: giá trị mặc định của mỗi thuộc tính
– Áp dụng: mọi phần tử
– Kế thừa: không
Ví dụ,
p {
border: solid 6px green;
width: 300px;
height: 100px;
}
Thứ tự các giá trị thuộc tính border là không quan trọng, ngoài giá trị border-style bắt buộc phải có, hai thuộc tính còn lại là tùy chọn.
Tạo góc bo tròn
Để tạo bo tròn cho từng góc, sử dụng các thuộc tính border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius,
– Giá trị: đơn vị đo chiều dài | %
– Mặc định: 0
– Áp dụng: mọi phần tử
– Kế thừa: không
Để tạo bo tròn cho cả bốn góc, sử dụng thuộc tính border-radius, bốn giá trị được thiết lập lần lượt cho các góc: top-left, top-right, bottom-right, bottom-left. Nếu chỉ cung cấp hai giá trị, thì giá trị đầu là của góc top-left và bottom right, giá trị thứ hai cho hai góc còn lại.
– Giá trị: 1, 2, 3, hoặc 4 đơn vị đo chiều dài | %
– Mặc định: 0
– Áp dụng: mọi phần tử
– Kế thừa: không
Lưu ý: để có thể nhìn thấy góc bo tròn, bắt buộc phần tử phải được thiết lập đường viền (border), hoặc màu nền của phần tử phải khác màu nền của trang web. Đơn vị đo của bo tròn có thể là em hoặc pixel. Nếu dùng đơn vị là %, độ lớn bo tròn sẽ luôn được giữ cân đối, khi kích thước của phần tử thay đổi.
Tạo góc bo elipse
Để tạo góc bo elipse, cần cung cấp hai giá trị là bo theo chiều ngang (horizontal) và bo theo chiều dọc (vertical).
Ví dụ,
p {
border: solid 6px green;
width: 300px;
height: 100px;
border-top-right-radius: 15px 30px;
}
Nếu sử dụng thuộc tính border-radius thì giá trị của chiều ngang và chiều dọc sẽ ngăn cách nhau bằng dấu xuyệt (/).
Ví dụ,
p {
border: solid 6px green;
width: 300px;
height: 100px;
border-radius: 15px / 40px;
}
Tuy nhiên, để xác định chiều ngang và chiều dọc cho từng góc, các giá trị chiều ngang sẽ viết liền nhau, các giá trị chiều dọc sẽ viết liền nhau, ngăn cách nhau bằng dấu xuyệt.
Ví dụ,
p {
border: solid 6px green;
width: 300px;
height: 100px;
border-radius: 36px 40px 60px 20px / 12px 10px 30px 36px;
}
Tạo đường viền bằng hình ảnh
Để tạo đường viền và bo góc bằng hình ảnh, sử dụng thuộc tính border-image.
– Giá trị: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
– Mặc định: giá trị mặc định của mỗi thuộc tính
– Áp dụng: mọi phần tử ngoại trừ phần tử table có border-collapse là collapse
– Kế thừa: không
Để dễ hiểu, quan sát hình minh họa dưới đây.
Hình (a), (c) là hình gốc, được sử dụng để làm đường viền cho hình (b) và (d) tương ứng.
Hình gốc sẽ được cắt thành chín phần, các nét đứt chính là đường cắt, bốn góc của hình gốc sẽ được dùng làm bốn góc bo của đường viền, bốn cạnh của hình gốc sẽ dùng để tạo ra bốn đường viền tương ứng, còn lại một phần ở giữa hình gốc không sử dụng.
Vị trí của các đường cắt được chỉ ra bằng bộ-bốn-giá-trị theo thứ tự: top, right, bottom, left. Mỗi giá trị chính là khoảng lùi, tính từ mỗi cạnh vào phía trong của hình gốc, đơn vị tính là px.
Đường viền của phần tử sẽ được phủ kín bằng cạnh tương ứng của hình gốc, việc phủ kín được thực hiện bằng cách lặp lại cạnh gốc (tile) hoặc kéo dãn cạnh gốc (stretch).
Cú pháp của thuộc tính border-image,
border-image: url(anhgoc.png) top right bottom left stretch
Ví dụ, đường viền của hình (b) được tạo bằng đoạn mã CSS sau,
border-image: url(a.png) 55 55 55 55 stretch
Nếu bốn đường cắt có giá trị giống nhau thì có thể viết rút gọn thành một giá trị, ví dụ đoạn mã trên có thể viết lại gọn hơn là,
border-image: url(a.png) 55 stretch
Ví dụ, đường viền của hình (d) được tạo bằng đoạn mã CSS sau,
border-image: url(c.png) 20 10 20 10 round
Để lặp lại cạnh gốc có thể sử dụng từ khóa round (vừa lặp lại vừa kéo căng cạnh gốc cho vừa với đường viền) hoặc repeat (chỉ lặp lại cạnh gốc).
Ví dụ, tạo đường viền bằng hình ảnh, có thêm tiếp đầu ngữ -webkit và -o để đoạn mã làm việc tốt trên cả hai trình duyệt Safari và Opera tương ứng,
p {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}
Thuộc tính border-image còn hai giá trị nữa, border-image-width để xác định độ rộng của đường-viền-ảnh, và border-image-outset để xác định kích thước phần đường-viền-ảnh tràn ra phía ngoài phần tử.
Lab2.4.b (exercise 14-2, p.326 [3])
2.4.5 Vùng đệm ngoài
Thành phần cuối cùng của mô hình cái hộp là “vùng đệm ngoài” (margin), đây là vùng tùy chọn, là khoảng không được thêm vào phía ngoài của đường viền (border).
Vùng đệm ngoài giúp phần tử không bị dính (nằm quá sát) vào phần tử khác hoặc nằm quá sát so với cạnh của cửa sổ trình duyệt.
Thuộc tính margin làm việc khá giống với thuộc tính padding, để thêm vùng đệm ngoài cho từng cạnh, sử dụng các thuộc tính: margin-top, margin-right, margin-bottom, margin-left:
– Giá trị: đơn vị đo chiều dài | % | auto | inherit
– Mặc định: auto
– Áp dụng: mọi phần tử
– Kế thừa: không
Ví dụ,
p {
margin-top: 2em;
margin-right: 250px;
margin-bottom: 1em;
margin-left: 4em;
border: 1px solid red;
background: #fcf2be;
}
Đơn vị để thiết lập margin có thể là em, px hoặc % (phần trăm chiều rộng của phần tử cha).
Lưu ý, khi thiết lập margin là %, nếu chiều rộng của phần tử cha thay đổi, sẽ dẫn tới margin bị thay đổi theo, điều này làm cho việc kiểm soát bố cục phức tạp.
Từ khóa auto là chế độ thiết lập vùng đệm ngoài mặc định của trình duyệt. Với chế độ này, nhiều khi làm cho người thiết kế web không thể kiểm soát chính xác được bố cục, giải pháp là đặt lại (reset) giá trị margin và padding của mọi phần tử về 0. Ví dụ,
* {
margin: 0;
padding: 0;
}
Lưu ý: khi giá trị là 0 thì không cần cung cấp đơn vị đo.
Để thiết lập vùng đệm ngoài cho bốn cạnh một lần, sử dụng thuộc tính margin.
Dưới đây là các đặc tính của margin,
– Giá trị: đơn vị đo chiều dài | % | auto | inherit
– Mặc định: auto
– Áp dụng: mọi phần tử, ngoại trừ các phần tử tr, th, td
– Kế thừa: không
Thuộc tính margin có thể chấp nhận bốn, ba, hai, hoặc một giá trị.
Khi margin có bốn giá trị, các giá trị này sẽ được áp dụng lần lượt cho các cạnh tương ứng, theo chiều kim đồng hồ, bắt đầu là cạnh trên (top), sau đó đến cạnh phải (right), cạnh dưới (bottom), cuối cùng là cạnh trái (left). Để dễ nhớ, tiếng Anh có từ TRouBLe, mỗi chữ viết hoa sẽ ứng với một cạnh.
Cú pháp,
margin: top right bottom left;
Ví dụ,
p {
margin: 1em 3em 1em 3em;
background-color: #d098d4;
}
Nếu giá trị margin của cạnh trái và phải bằng nhau, thì có thể rút gọn thuộc tính margin còn lại ba giá trị. Khi đó, giá trị của cạnh phải (giá trị thứ hai trong chuỗi giá trị) cũng được sử dụng làm giá trị cho cạnh trái. Thực tế là, khi biên dịch mã CSS, trình duyệt thấy thiếu giá trị của cạnh trái nên nó mặc định lấy giá trị của cạnh phải để thay vào.
Cú pháp,
margin: top right/left bottom;
Ví dụ, luật CSS ở phía trên có thể viết gọn lại như sau,
p {
margin: 1em 3em 1em;
background-color: #d098d4;
}
Tiếp tục, nếu chỉ cung cấp hai giá trị cho thuộc tính margin, thì giá trị đầu tiên sẽ là của cạnh trên và dưới, giá trị thứ hai sẽ là của cạnh trái và phải.
Cú pháp,
margin: top/bottom right/left;
Ví dụ, luật CSS ở phía trên có thể viết gọn lại như sau,
p {
margin: 1em 3em;
background-color: #d098d4;
}
Cuối cùng, nếu chỉ cung cấp một giá trị cho thuộc tính margin, thì giá trị này sẽ là của cả bốn cạnh.
Ví dụ, luật CSS sau sẽ thiết lập margin cho cả bốn cạnh là 15px,
p {
margin: 15px;
background-color: #d098d4;
}
Mặc dù cách làm việc của thuộc tính margin khá đơn giản, tuy nhiên, cũng cần lưu ý một số trường hợp đặc biệt sau đây: hiện tượng thu gọn margin (collapse), margin cho các phần tử kiểu inline và margin có giá trị âm.
Hiện tượng thu gọn margin
Hiện tượng này xảy ra với margin top và bottom. Cụ thể, với hai margin (top hoặc bottom) của hai phần tử cạnh nhau, thay vì cộng dồn giá trị (của top và bottom) lại thì sẽ lấy giá trị lớn hơn.
Ví dụ, phần tử A có margin bottom là 4px, phần tử B nằm ngay phía dưới phần tử A, và có margin top là 2px; khi đó, giá trị margin giữa A và B sẽ là 4px, chứ không phải 6px.
Hiện tượng thu gọn margin không xảy ra nếu thuộc tính position của phần tử được thiết lập là absolute hoặc float.
Margin cho phần tử kiểu inline
Với các phần tử inline-văn-bản, chỉ có thể thiết lập margin left và margin right, và giá trị của margin này đã bao gồm luôn cả khoảng trắng ở phía trước và phía sau phần tử.
Tuy nhiên, với phần tử inline còn lại (ví dụ, phần tử img) thì có thể thiết lập margin cho cả bốn cạnh.
Xem hình ví dụ,
Margin có giá trị âm
Với margin có giá trị dương, toàn bộ nội dung, vùng đệm trong và đường viền của phần tử lân cận sẽ được dịch chuyển ra xa. Tuy nhiên, nếu margin có giá trị âm, các thành phần trên của phần tử lân cận sẽ dịch chuyển theo chiều ngược lại.
Quan sát ví dụ trong hình dưới đây, gồm hai phần tử p nằm cạnh nhau. Hình bên trái, thiết lập margin-bottom 4em cho đoạn đầu tiên, kết quả làm cho đoạn phía dưới bị đẩy xuống một khoảng. Hình bên phải, thiết lập margin-bottom -4em cho đoạn đầu tiên, kết quả làm cho đoạn thứ hai dịch chuyển lên, và phủ lấp vào đoạn đầu tiên.
Sử dụng margin với giá trị dương và âm cho phép di chuyển một phần tử tới mọi vị trí trong một trang. Đây là một trong những kĩ thuật cơ bản trong việc tạo bố cụ trang web.
.jpg)
.jpg)
){kind=link}
0 Nhận xét