1
Câu 1
Cho đoạn mã HTML và CSS sau:
<html> <head> <style> .tieude{color: yellow; font-weight: bold;} .tieude{color: red; font-style: italic;} </style> </head> <body> <h2 id="tieude" class="tieude">Tin học</h2> </body> </html>
Khi thực hiện đoạn mã trên, dòng chữ “Tin học” sẽ được hiển thị trên trình duyệt theo định dạng nào dưới đây?
Cho đoạn mã HTML và CSS sau: <html> <head> <style> .tieude{color: yellow; font-weight: bold;} .tieude{color: red; font-style: italic;} </style> </head> <body> <h2 id="tieude" class="tieude">Tin học</h2> </body> </html> Khi thực hiện đoạn mã trên, dòng chữ “Tin học” sẽ được hiển thị trên trình duyệt theo định dạng nào dưới đây?
Màu vàng, in đậm và nghiêng.
Màu vàng, in đậm và không nghiêng.
Màu đỏ, in đậm và nghiêng.
Màu đỏ, in nghiêng và không đậm.
Giải thích câu 1
Giải thích chi tiết
😎 Cùng DOL xem qua cách giải câu này nhé!
✅ Đáp án: C. Màu đỏ, in đậm và nghiêng.
🔎 Lí do:
Có hai quy tắc CSS cùng áp dụng cho lớp .tieude.
Ở quy tắc thứ nhất, color: yellow và font-weight: bold nên chữ sẽ có màu vàng và in đậm.
Ở quy tắc thứ hai, color: red và font-style: italic nên chữ được thêm in nghiêng, đồng thời màu chữ bị ghi đè thành màu đỏ.
Vì hai bộ chọn giống hệt nhau là .tieude, quy tắc viết sau sẽ ưu tiên với thuộc tính trùng lặp. Do đó color: red thay cho color: yellow.
Thuộc tính font-weight: bold không bị quy tắc sau thay thế, nên vẫn giữ in đậm.
Kết quả cuối cùng, chữ “Tin học” sẽ hiển thị màu đỏ, in đậm và nghiêng.
🚨 Các đáp án khác:
A. Màu vàng, in đậm và nghiêng. → Sai vì thuộc tính màu vàng đã bị quy tắc CSS phía sau đổi thành màu đỏ.
B. Màu vàng, in đậm và không nghiêng. → Sai vì vừa sai màu vừa sai kiểu chữ, do quy tắc sau thêm in nghiêng và đổi sang màu đỏ.
D. Màu đỏ, in nghiêng và không đậm. → Sai vì thuộc tính in đậm từ quy tắc đầu vẫn còn hiệu lực, không bị mất đi.