CSS cung cấp nhiều thuộc tính để kiểm soát cách hiển thị văn bản, màu sắc và bố cục của các phần tử HTML. Việc sử dụng đúng các thuộc tính này giúp cải thiện trải nghiệm người dùng và tăng tính thẩm mỹ cho website.
1. Font chữ, kích thước, kiểu chữ
| Thuộc tính | Mô tả | Ví dụ |
|---|---|---|
font-family | Chọn kiểu font chữ | font-family: Arial, sans-serif; |
font-size | Cỡ chữ | font-size: 16px; |
font-weight | Độ đậm của chữ | font-weight: bold; |
font-style | Kiểu chữ (nghiêng, thường) | font-style: italic; |
text-transform | Chuyển đổi kiểu chữ | text-transform: uppercase; |
text-align | Căn lề văn bản | text-align: center; |
line-height | Khoảng cách giữa các dòng | line-height: 1.5; |
🔹 Ví dụ:
p {
font-family: 'Tahoma', sans-serif;
font-size: 14pt;
font-style: italic;
text-align: justify;
line-height: 1.6;
}
2. Màu nền, màu chữ, độ trong suốt
| Thuộc tính | Mô tả | Ví dụ |
|---|---|---|
color | Màu chữ | color: #333; |
background-color | Màu nền | background-color: #f0f0f0; |
opacity | Độ trong suốt (0–1) | opacity: 0.8; |
rgba() | Màu có độ trong suốt | background-color: rgba(255, 0, 0, 0.5); |
🔹 Ví dụ:
div {
color: white;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0.9;
}
3. Căn lề, khoảng cách dòng, khoảng cách giữa các phần tử
| Thuộc tính | Mô tả | Ví dụ |
|---|---|---|
margin | Khoảng cách bên ngoài phần tử | margin: 20px; |
padding | Khoảng cách bên trong phần tử | padding: 10px; |
line-height | Khoảng cách giữa các dòng văn bản | line-height: 1.5; |
text-indent | Thụt đầu dòng | text-indent: 30px; |
🔹 Ví dụ:
article {
margin: 30px;
padding: 20px;
line-height: 1.8;
text-indent: 40px;
}