1) Color Properties | ||
Thuộc tính | Mô tả chức năng | Ví dụ |
color | Chỉnh màu chữ cho văn bản | color: #ff0000; |
2) Background Properties | ||
Thuộc tính | Mô tả chức năng | Ví dụ |
background | ||
background-color | Thiết lập “màu nền” của phần tử HTML | background-color: #ff0000; |
background-image | Thiết lập “hình nền” cho phần tử HTML | background-image: url(ico_arrow.gif); |
background-position | 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. |
background-position: left top; |
background-repeat | Thiết lập “sự lặp lại của hình nền” trong phần tử HTML | background-repeat: repeat-x; |
background-size | Thiết lập kích thước của hình nền | background-size: 100px; |
3) Border Properties | ||
Thuộc tính | Mô tả chức năng | Ví dụ |
border | Thiết lập một đường viền cho phần tử HTML, bao gồm: kiểu đường viền, độ dày đường viền, màu đường viền. | border:1px solid black |
border-left | Thiết lập đường viền cạnh bên trái của phần tử HTML, bao gồm: kiểu đường viền, độ dày đường viền, màu đường viền | border-left:1px solid black |
border-right | Thiết lập đường viền cạnh bên phải của phần tử HTML, bao gồm: kiểu đường viền, độ dày đường viền, màu đường viền | border-right:1px solid black |
border-top | Thiết lập đường viền cạnh phía trên của phần tử HTML, bao gồm: kiểu đường viền, độ dày đường viền, màu đường viền | border-top:1px solid black |
border-bottom | Thiết lập đường viền cạnh phía dưới của phần tử HTML, bao gồm: kiểu đường viền, độ dày đường viền, màu đường viền | border-bottom:1px solid black |
4) Basic Box Properties | ||
Thuộc tính | Mô tả chức năng | Ví dụ |
display | Thuộc tính display xác định loại hiển thị của thành phần. | display:block |
float | Thuộc tính float xác định có hay không một thành phần được float (trôi nổi). | float:left |
height | Thuộc tính height thiết lập chiều cao cho thành phần. Chiều cao này không bao gồm: border, padding, margin |
height:100px; |
width | Thuộc tính width thiết lập chiều rộng cho thành phần. Chiều rộng này không bao gồm: border, padding, margin |
width:100px; |
margin | Thuộc tính margin canh lề cho thành phần.đơn vị có thể là px, em, %, … | margin:50px |
margin-bottom | Canh lề bên dưới cho thành phần, đơn vị có thể là px, em, %, … | margin-bottom:50px |
margin-left | Canh lề bên trái cho thành phần, đơn vị có thể là px, em, %, … | margin-left:50px |
margin-right | Canh lề bên phải cho thành phần, đơn vị có thể là px, em, %, … | margin-right:50px |
margin-top | Canh lề bên trên cho thành phần, đơn vị có thể là px, em, %, … | margin-top:50px |
padding | Thuộc tính padding thêm vào khoảng không cho thành phần. | padding:50px |
padding-bottom | Thêm vào khoảng không bên dưới cho thành phần, đơn vị có thể là px, em, %, … | padding-bottom:50px |
padding-left | Thêm vào khoảng không bên trái cho thành phần, đơn vị có thể là px, em, %, … | padding-left:50px |
padding-right | Thêm vào khoảng không bên phải cho thành phần, đơn vị có thể là px, em, %, … | padding-right:50px |
padding-top | Thêm vào khoảng không bên trên cho thành phần, đơn vị có thể là px, em, %, … | padding-top:50px |
6) Text Properties | ||
Thuộc tính | Mô tả chức năng | Ví dụ |
letter-spacing | Thuộc tính letter-spacing tăng hoặc giảm khoảng cách giữa các ký tự trong đoạn text. | letter-spacing:20px |
line-height | Thuộc tính line-height thiết lập chiều cao giữa các dòng. | line-height:50px; |
text-align | Thuộc tính text-align sắp xếp các nội dung theo chiều ngang. | text-align:center |
word-spacing | Thuộc tính word-spacing tăng hoặc giảm không gian giữa các từ trong đoạn văn bản.Có thể sử dụng giá trị âm. | word-spacing: 2px; |
7) Text Decoration Properties | ||
Thuộc tính | Mô tả chức năng | Ví dụ |
text-decoration-line | Thiết lập một đường trang trí cho văn bản | |
text-decoration-color | Xác định “màu” của đường trang trí cho văn bản | |
text-decoration-style | Xác định “kiểu” của đường trang trí cho văn bản | |
text-decoration | Thiết lập một đường trang trí cho văn bản, bao gồm: | |
text-shadow | Tạo một cái bóng cho văn bản | |
8) Font Properties | ||
Thuộc tính | Mô tả chức năng | Ví dụ |
@font-face | ||
font-family | Thiết lập “phông chữ” của văn bản | |
font-size | Thiết lập “kích cỡ chữ” của văn bản | |
font-style | Thiết lập việc văn bản có được “in nghiêng” hay không | |
font-variant | Thiết lập việc có chuyển các ký tự in thường trong văn bản sang dạng ký tự in hoa hay không | |
font-weight | Thiết lập việc văn bản có được “in đậm” hay không |