Đường biên – border
Đường biên – border có thể sử dụng cho nhiều mục đích. Ví dụ như để trang trí hoặc làm đường kẻ phân biệt giữa hai phần tử, CSS có thể cho bạn nhiều khả năng để sử dụng tùy theo mục đích.
- border-width – độ dày của đường biên
- border-color – màu sắc đường biên
- border-style – kiểu dáng đường biên
- border – cách viết rút gọn
Độ dày của đường biên [border-width]
Độ dày của đường biên được xác định bởi thuộc tính border-width, bạn có thể gán các trị theo tên như thin (mỏng), medium (vừa), hoặc thick (dày), các đơn vị khác cũng được sử dụng như px. Ảnh bên dưới minh họa các thông số thường được sử dụng
Màu sắc đường biên [border-color]
Đặc tính border-color được áp dụng để định màu sắc cho border, các đơn vị giá trị bao gồm màu hệ hệ thập lục phân như FF0000, hệ màu RGB như rgb(123,123,123) hoặc mô tả tên chuẩn yellow .
Các kiểu dáng đường biên [border-style]
Có nhiều kiểu dáng khác nhau dành cho border. Dưới đây là 8 kiểu khác nhau của border kể từ phiên bản trình duyệt Internet Explorer 5.5 chấp nhận. Ở hình minh họa border-color được gán là màu gold và border-width được gán là thick, dĩ nhiên bạn có thể định bất cứ màu sắc và độ dày khác theo mong muốn.
Giá trị được gán là none hay hidden nếu bạn không muốn có đường biên.
Các ví dụ về border
3 ví dụ dưới đây cho thấy nhiều các sử dụng đặc tính của border khác nhau được áp dụng lên các phần tử <h1>, <h2>, <ul> và <p>. Kết quả cho thấy không những các phần tử được trang trí đẹp mắt mà còn mở ra cho chúng ta những khả năng vô cùng phong phú khi áp dụng các đặc tính này:
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}
ul {
border-width: thin;
border-style: solid;
border-color: orange;
}
Xem ví dụ
Nó có thể thiết lập kiểu dáng cho từng cạnh riêng biệt, ví dụ :
h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}
Xem ví dụ
Viết rút gọn [border]
Bạn có thể kết hợp nhiều đặc tính của border bằng cách viết rút gọn, ví dụ đoạn code dưới đây
p {
border-width: 1px;
border-style: solid;
border-color: blue;
}
Có thể rút gọn thành:
p { border: 1px solid blue; }
Tổng kết
Trong bài học này bạn đã được học các khả năng vô hạn các đặc tính của border, bài tiếp theo chúng ta sẽ học cách thiết lập chiều cao và rộng của mô hình hộp.
