Chữ dễ đọc cần nhiều hơn màu đẹp
Ta cần phông phù hợp, cỡ chữ đủ đọc và khoảng cách dòng hợp lí. CSS tách các yêu cầu ấy thành thuộc tính để điều chỉnh rõ ràng.
Những thuộc tính thường gặp
| Thuộc tính | Tác dụng |
|---|---|
| font-family | Danh sách phông chữ ưu tiên |
| font-size | Cỡ chữ |
| font-weight | Độ đậm |
| font-style | Kiểu như italic |
| line-height | Chiều cao dòng |
| text-align | Căn nội dung dòng trong hộp |
| text-indent | Thụt dòng đầu |
| color | Màu chữ |
| background-color | Màu nền |
Màu có thể viết theo tên, RGB, mã hex hoặc HSL. Với dạng RGB số nguyên cơ bản, mỗi kênh có giá trị 0–255. `#ff0000` và `rgb(255, 0, 0)` cùng chỉ màu đỏ. HSL gồm sắc độ, độ bão hòa, độ sáng; bão hòa 0% cho sắc xám ở độ sáng tương ứng.
Cỡ chữ khác 0 thường cần đơn vị như px, em, rem; trong phạm vi bài, không viết font-size: 18 mà bỏ đơn vị. em ở font-size tính theo cỡ chữ được kế thừa, rem theo cỡ chữ gốc.
Định dạng đoạn văn
```css
p {
font-family: Arial, sans-serif;
font-size: 18px;
line-height: 1.5;
color: #123456;
text-align: left;
}
```
Nếu Arial không có, trình duyệt dùng phông không chân phù hợp. Chiều cao dòng bằng 1,5 lần cỡ chữ, tức 27px trong trường hợp này. text-align căn nội dung dòng, không tự đưa cả hộp p vào giữa trang.
Thử vận dụng
Quy tắc nào đặt màu nền trắng cho p?
Đây là màu chữ.
Đúng: background-color đặt nền.
font-color không phải tên thuộc tính chuẩn.
white không phải giá trị căn dòng.
Lời giải
background-color đặt màu nền; color đặt màu chữ.
Đọc màu RGB
rgb(80, 80, 80) có ba kênh bằng nhau nên là sắc xám. rgb(200, 200, 200) cũng xám nhưng sáng hơn. Không nói hai màu bằng nhau chỉ vì đều xám.
Ví dụ xem cách làm
Cỡ chữ cha là 20px. Phần tử con đặt font-size: 1.2em. Cỡ chữ con là bao nhiêu trong trường hợp này?
Lời giải
24px, vì em dùng ở font-size nhân với cỡ chữ được kế thừa: 1,2 × 20 = 24.
Ví dụ xem cách làm
Sửa khai báo font-size: 16 và font-color: blue.
Lời giải
```css
font-size: 16px;
color: blue;
```
Cỡ chữ cần đơn vị trong ví dụ; thuộc tính màu chữ tên là color.
Những điều cần nhớ
Xác định muốn đổi chữ, nền hay căn dòng rồi chọn thuộc tính. Khi đọc giá trị, chú ý đơn vị và cơ sở của đơn vị tương đối.
Đang học