Áp dụng mẫu định dạng CSS: p {font-weight: bold; color: red;} p {font-weight: normal; color: blue;} cho đoạn mã HTML biểu diễn đoạn văn bản sau: <p> Kỷ cương - Sáng tạo - Đột phá - Phát triển </p> Phương án nào dưới đây mô tả đúng kết quả hiển thị của đoạn văn bản trên trình duyệt web?

😎 Cùng DOL xem qua cách giải câu này nhé!

📃 Thông tin đề bài cho:

• Có 2 quy tắc CSS cùng áp dụng cho thẻ p:

  • p \{font-weight: bold; \ color: red;\}

  • p \{font-weight: normal; \ color: blue;\}

• Đoạn văn bản được hiển thị trong thẻ đoạn văn p.

• Hỏi kết quả cuối cùng khi trình duyệt hiển thị văn bản là gì.

❓ Hiểu câu hỏi:

• Câu hỏi yêu cầu xác định kiểu chữ và màu chữ của đoạn văn sau khi áp dụng CSS.

• Kiến thức cần dùng:

  • Khi có nhiều quy tắc CSS cùng chọn một phần tử và có cùng độ ưu tiên, quy tắc viết sau sẽ được áp dụng.

  • Ý nghĩa các thuộc tính:

    • font-weight: bold: chữ đậm

    • font-weight: normal: chữ bình thường

    • color: red: màu đỏ

    • color: blue: màu xanh dương

🔎 Hướng dẫn cách làm:

• Xét quy tắc CSS thứ nhất:

  • p \{font-weight: bold; \ color: red;\}

  • Nếu chỉ có quy tắc này, đoạn văn sẽ chữ đậm, màu đỏ.

• Xét tiếp quy tắc CSS thứ hai:

  • p \{font-weight: normal; \ color: blue;\}

  • Quy tắc này cũng áp dụng cho chính thẻ p.

• Hai quy tắc đều:

  • Cùng chọn thẻ p

  • Cùng mức ưu tiên

• Theo nguyên tắc CSS:

  • Khi các quy tắc có cùng độ ưu tiên, quy tắc xuất hiện sau sẽ ghi đè quy tắc trước.

• Vì vậy:

  • font-weight: normal ghi đè font-weight: bold

  • color: blue ghi đè color: red

• Kết quả cuối cùng:

  • Đoạn văn hiển thị với kiểu chữ bình thường, màu xanh dương.

✅ Đáp án: C. kiểu chữ bình thường, màu xanh dương.