Thuộc tính background – Định dạng nền
Thuộc tính background được dùng để định dạng nền cho thành phần.
Cấu trúc
tag {
Thuộc tính: giá trị;
}Thuộc tính và giá trị như sau:
| STT | Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|---|
| 1 | background-attachment | – fixed – scroll | background-attachment :fixed; | – Xác định thành phần nền được cố định hoặc cuộn so với trang. – Được sử dụng kèm với giá trị background-image |
| 2 | background-color | – Mã màu – Tên màu – Giá trị rgb | background-color :#ff0010; background-color: red; background-color: rgb(255,0,0); | – Xác định màu nền cho thành phần. |
| 3 | background-image | – url(đường dẫn hình) | background-image: url(ico_arrow.gif); | – Xác định màu nền cho thành phần. |
| 4 | background-position | – left – right – top – bottom – px – % | background-position: left top; | – Xác định vị trí hình ảnh nền cho thành phần. – Được sử dụng kèm với giá trị background-image. |
| 5 | background-repeat | – repeat-x – repeat-y – repeat – no-repeat | background-repeat: repeat-x; | – Xác định hình ảnh nền được lặp như thế nào. |
| 6 | background | – Một hoặc nhiều giá trị của các thuộc tính trên | background: url(ico_arrow.gif) repeat-x left top; | – Có giá trị riêng lẻ hoặc tổng hợp các thuộc tính trên. |
Thuộc tính border: Định dạng đường viền
Thuộc tính border được dùng để định dạng đường viền cho thành phần.
Cấu trúc
tag {
Thuộc tính: giá trị;
}
Với thuộc tính và giá trị như sau:
| STT | Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|---|
| A | TT định dạng | |||
| 1 | border-color | Mã màu Tên màu Giá trị rgb | border-color: #ff0000; border-color: red; border-color: rgb(255,0,0); | Xác định màu sắc của đường viền. |
| 2 | border-style | Kiểu border | border-style: solid; | Xác định hình dạng của đường viền. |
| 3 | border-width | px thin medium thick | border-width: 5px; | Xác định bề dày của đường viền. |
| B | Thuộc tính vị trí | |||
| 1 | border-top | Một hoặc nhiều giá trị của các thuộc tính định dạng. | border-top: #ff0000 solid 2px; | Xác định đường viền bên trên. |
| 2 | border-right | Một hoặc nhiều giá trị của các thuộc tính định dạng. | border-right: #ff0000 solid 2px; | Xác định đường viền bên phải. |
| 3 | border-bottom | Một hoặc nhiều giá trị của các thuộc tính định dạng. | border-bottom: #ff0000 solid 2px; | Xác định đường viền bên dưới. |
| 4 | border-left | Một hoặc nhiều giá trị của các thuộc tính định dạng. | border-left: #ff0000 solid 2px; | Xác định đường viền bên trái. |
| 5 | border | Một hoặc nhiều giá trị của các thuộc tính định dạng. | border: #ff0000 solid 2px; | Xác định tất cả các đường viền xung quanh. |
| C | Kết hợp giữa thuộc tính vị trí & thuộc tính định dạng | |||
| 1 | border-top-color | mã màu tên màu Giá trị rgb | border-top-color: #ff0000; border-top-color: red; border-top-color: rgb(255,0,0); | Xác định màu sắc cho đường viền bên trên. |
| 2 | border-top-style | kiểu border | border-top-style: solid; | Xác định hình dạng cho đường viền bên trên. |
| 3 | border-top-width | px thin medium thick | border-top-width: 5px; | Xác định bề dày cho đường viền bên trên. |
| 4 | border-right-color | mã màu tên màu Giá trị rgb | border-right-color: #ff0000; border-right-color: red; border-right-color: rgb(255,0,0); | Xác định màu sắc cho đường viền bên phải. |
| 5 | border-right-style | kiểu border | border–right-style: solid; | Xác định hình dạng cho đường viền bên phải. |
| 6 | border-right-width | px thin medium thick | border-right-width: 5px; | Xác định bề dày cho đường viền bên phải. |
| 7 | border-bottom-color | mã màu tên màu Giá trị rgb | border-bottom-color: #ff0000; border-bottom-color: red; border-bottom-color: rgb(255,0,0); | Xác định màu sắc cho đường viền bên dưới. |
| 8 | border-bottom-style | kiểu border | border-bottom-style: solid; | Xác định hình dạng cho đường viền bên dưới. |
| 9 | border-bottom-width | px thin medium thick | border-bottom-width: 5px; | Xác định bề dày cho đường viền bên dưới. |
| 10 | border-left-color | mã màu tên màu Giá trị rgb | border-left-color: #ff0000; border-left-color: red; border-left-color: rgb(255,0,0); | Xác định màu sắc cho đường viền bên trái. |
| 11 | border-left-style | kiểu border | border-left-style: solid; | Xác định hình dạng cho đường viền bên trái. |
| 12 | border-left-width | px thin medium thick | border-left-width: 5px; | Xác định bề dày cho đường viền bên trái. |
| 13 | border-color | mã màu tên màu Giá trị rgb | border-color: #ff0000; border-color: red; border-color: rgb(255,0,0); | Xác định màu sắc cho tất cả các đường viền xung quanh. |
| 14 | border-style | kiểu border | border-style: solid; | Xác định hình dạng cho tất cả các đường viền xung quanh. |
| 15 | border-width | px thin medium thick | border-width: 5px; | Xác định chiều rộng cho tất cả các đường viền xung quanh. |
Kiểu cho border:
| giá trị | Ví dụ | Mô tả | Hiển thị |
|---|---|---|---|
| none | border: none; | Xác định thành phần sẽ không có đường viền. | Đường viền hiển thị |
| hidden | border: hidden; | Giống như giá trị none, nhưng được dùng cho table. | Đường viền hiển thị |
| dotted | border: dotted; | Xác định đường viền cho thành phần là dấu chấm (dotted). | Đường viền hiển thị |
| dashed | border: dashed; | Xác định đường viền cho thành phần là gạch ngang (dashed). | Đường viền hiển thị |
| solid | border: solid; | Xác định đường viền cho thành phần là đường thẳng nét (solid). | Đường viền hiển thị |
| double | border: double; | Xác định đường viền cho thành phần là 2 đường thẳng nét (double). | Đường viền hiển thị |
| groove | border: groove; | Xác định đường viền cho thành phần là đường rãnh (groove). | Đường viền hiển thị |
| ridge | border: ridge; | Xác định đường viền cho thành phần là đường chóp (ridge). | Đường viền hiển thị |
| inset | border: inset; | Xác định đường viền cho thành phần là đường bóng bên trong (inset). | Đường viền hiển thị |
| outset | border: outset; | Xác định đường viền cho thành phần là đường bóng bên ngoài (outset). | Đường viền hiển thị |
| inherit | border: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). | Đường viền hiển thị |
