Tính thừa kế css

Trong quá trình học và làm việc với CSS, có ba khái niệm quan trọng mà bất kỳ lập trình viên web nào cũng cần hiểu rõ: CSS mặc định của trình duyệt, tính thừa kế và reset CSS.

Nếu không nắm chắc các khái niệm này, bạn có thể gặp nhiều lỗi khó hiểu như màu chữ bị sai, khoảng cách thừa, hay giao diện hiển thị khác nhau giữa các trình duyệt.

CSS mặc định

Mỗi trình duyệt đều có một tập CSS mặc định (còn gọi là user agent stylesheet) để định dạng cơ bản cho các thẻ HTML.

Ví dụ: tiêu đề <h1> mặc định có chữ to và đậm, danh sách <ul> mặc định có dấu chấm ở đầu dòng.

Bạn có thể kiểm tra điều này thông qua DevTools.

<h1>Default CSS</h1>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ghi đè CSS mặc định

Các thuộc tính mặc định luôn có độ ưu tiên thấp nhất. Bất kỳ đoạn CSS nào bạn viết (dù là External, Internal hay Inline) đều có thể ghi đè.

<h1>Default CSS</h1>

<style>
  h1 {
    font-size: 1.5em;
    color: red;
  }
</style>

Trong DevTools, thuộc tính nào bị gạch bỏ tức là đã bị một CSS khác ghi đè.

Mỗi trình duyệt (Chrome, Firefox, Safari...) có thể áp dụng các CSS mặc định khác nhau. Bạn có thể tra cứu tại: CSS Default Values.

Thừa kế trong CSS

Thừa kế (inheritance) nghĩa là các thẻ con tự động nhận lại một số thuộc tính CSS từ thẻ cha.

Ví dụ, nếu cha có màu chữ xanh, con cũng sẽ được áp dụng màu xanh (trừ khi có CSS riêng).

<style>
  p {
    color: green;
  }
</style>

<p>Học <strong>HTML CSS</strong> cho người mới bắt đầu</p>

Kết quả: cả <p> và <strong> đều có màu xanh.

Ghi đè thuộc tính được thừa kế

Nếu không muốn thừa kế, bạn có thể viết CSS riêng cho thẻ con:

<style>
  p {
    color: green;
  }

  /* Ghi đè CSS */
  strong {
    color: red;
  }
</style>

<p>Học <strong>HTML CSS</strong> cho người mới bắt đầu</p>

Kết quả: <p> màu xanh, nhưng <strong> lại có màu đỏ.

Bạn có thể kiểm tra chuỗi thừa kế và ghi đè trong tab Computed của DevTools:

Để kiểm tra một thuộc tính có tính thừa kế hay không, tìm kiếm Google với từ khóa "CSS <tên thuộc tính> property" và tham khảo tại W3C hoặc Mozilla Developer.

Reset CSS

Reset sẽ loại bỏ toàn bộ CSS mặc định để bạn tự định nghĩa lại từ đầu.

Ví dụ: Meyerweb

<!-- Reset CSS -->
<link href="./reset.min.css" rel="stylesheet" />

<!-- CSS của bạn -->
<link href="./style.css" rel="stylesheet" />

Luôn đặt file reset.css trước file CSS chính để tránh bị ghi đè ngược.

Kết luận