Ba đặc tính đáp ứng ba nhu cầu
| Khai báo | Cách hiểu |
|---|---|
| `color:blue` |Màu chữ là xanh blue|
| `color:rgb(32,90,148)` |Màu chữ có ba thành phần đỏ32, lục90, lam148|
| `font-family:Arial,sans-serif` |Ưu tiên Arial; có họ phông không chân làm phương án dự phòng|
| `font-size:18px` |Đặt cỡ chữ 18 pixel CSS|
Trong cách ghi RGB số nguyên của bài, mỗi thành phần từ 0 đến 255; giữ đúng thứ tự đỏ, lục, lam. Không nhầm `color` của chữ với màu nền.
Phông cụ thể còn phụ thuộc máy có phông đó và có đủ kí tự cần dùng hay không. Viết tên Arial không đồng nghĩa mọi máy sẽ hiển thị bằng đúng Arial.
Ghép các khai báo trong một style
```html
<p style="color:rgb(32,90,148);font-family:Arial,sans-serif;font-size:18px">Một dòng ghi chú.</p>
```
Phần tử p có một thuộc tính style. Ba khai báo bên trong đặt màu chữ, họ phông và cỡ chữ; dấu chấm phẩy phân cách chúng.
Nếu đổi riêng `font-size:18px` thành `font-size:22px`, cỡ chữ đổi trong khi yêu cầu màu và họ phông vẫn được giữ. Không viết `font-size:22` thay cho `22px` trong ví dụ này.
So sánh đúng từng đặc tính
```html
<p style="color:red;font-size:20px;text-decoration:underline">Nội dung A</p>
<p style="color:rgb(255,0,0);font-size:16px">Nội dung B</p>
```
Hai đoạn đều yêu cầu màu đỏ. Đoạn A có cỡ 20px và thêm gạch chân, đoạn B có cỡ 16px. Muốn so sánh, đọc từng khai báo; đừng kết luận khác màu chỉ vì hai cách viết màu khác nhau.
Bài luyện
Cần đổi cỡ chữ từ 18px thành 22px, giữ nguyên hai khai báo còn lại trong ví dụ. Phần nào cần sửa?
color đặt màu, không đặt cỡ chữ.
Đúng. Sửa đúng khai báo font-size.
Xóa style cũng bỏ các khai báo đang cần giữ.
22px không phải tên thẻ cho đoạn văn.
Lời giải
Cỡ chữ do font-size quyết định trong ví dụ. Thay giá trị 18px bằng 22px ở khai báo đó, giữ nguyên color và font-family, đáp ứng đúng phạm vi yêu cầu.
Bài luyện
So sánh hai đoạn A và B, nhận xét nào đúng?
red và rgb(255,0,0) biểu diễn cùng màu đỏ.
20 lớn hơn 16, không nhỏ hơn.
Không suy khai báo riêng của A được áp dụng cho B.
Đúng. Cần đối chiếu màu, cỡ và gạch chân riêng từng phần.
Lời giải
red tương ứng rgb(255,0,0), nên hai đoạn cùng yêu cầu màu đỏ. Cỡ 20px của A lớn hơn 16px của B; chỉ A có text-decoration:underline trong mã đã cho.
Bài luyện
Vì sao mẫu font-family có thêm sans-serif sau Arial?
Đúng. Phông dự phòng giúp trình duyệt chọn cách hiển thị phù hợp.
Khai báo không chứng minh phông đã được cài.
font-family vẫn định dạng văn bản.
Họ phông và màu chữ là hai đặc tính khác nhau.
Lời giải
Khả năng dùng Arial phụ thuộc phông và kí tự có sẵn. sans-serif bổ sung một họ phông dự phòng; nó không cài Arial, không biến chữ thành ảnh và không đặt màu chữ.
Đang học