Đề bài
Đoạn mã dưới đây khai báo định dạng CSS cho một trang web. Phương án nào cho bên dưới nêu đúng kết quả hiển thị văn bản ở dòng 8 khi chạy đoạn mã này?
Chữ màu đỏ, có kích thước 14 px .
Chữ màu đỏ, có kích thước 13 px .
Chữ màu vàng, có kích thước 14 px .
Chữ màu vàng, có kích thước 13px.
Đáp án đúng: D
Xem lời giải
Lời giải chi tiết
Trong đoạn mã HTML trên, có hai đoạn style CSS dành cho thẻ <p>:
- Dòng 2:
p { color: red; font-size: 14px; } - Dòng 3:
p { color: yellow; font-size: 13px; }
Kết quả hiển thị sẽ phụ thuộc vào qui tắc của CSS, trong đó style được khai báo sau cùng sẽ được ưu tiên.
Ở đây, style thứ hai (màu vàng, kích thước 13px) ghi đè lên style thứ nhất (màu đỏ, kích thước 14px). Do đó:
- Văn bản
<p>Hôm nay trời rất nóng</p>sẽ xuất hiện với: - Chữ màu vàng (do style thứ hai định nghĩa).
- Kích thước 13px (do style thứ hai định nghĩa).
Vì vậy, phương án đúng là:
D. Chữ màu vàng, có kích thước 13px.
Chú ý khi giải
- Khi có nhiều kiểu CSS cùng áp dụng cho một thẻ, kiểu được định nghĩa sau cùng sẽ lấn áp các kiểu đã khai báo trước đó.
- Đảm bảo thứ tự khai báo CSS để đạt được kết quả mong muốn.
- Kiểm tra kỹ cả màu sắc (
color) và kích thước chữ (font-size) theo thứ tự ưu tiên.