Học HTML, CSS từ Zero Tới Hero
- Thừa kế trong CSS là gì?
- Khái niệm thừa kế
- Cách kiểm tra các thuộc tính được thừa kế
- Cách ghi đè thuộc tính được thừa kế
- Cách kiểm tra thuộc tính có tính thừa kế
- Giá trị được tính toán (computed value)
Thừa kế trong CSS là gì?
Khái niệm thừa kế
Thừa kế là khi các thẻ con được thừa hưởng lại các thuộc tính của thẻ cha.
Ở ví dụ dưới đây, mặc dù chỉ viết CSS cho thẻ <p> nhưng nội dung của thẻ <strong> cũng có màu xanh. Vì thẻ <strong> là thẻ con của thẻ <p> nên được thừa kế lại thuộc tính color từ thẻ <p>.
<style>
p {
color: green;
}
</style>
<p>Cách dễ nhất để học học <strong>HTML CSS</strong> cho người mới bắt đầu</p>
Cách dễ nhất để học học HTML CSS cho người mới bắt đầu
Cách kiểm tra các thuộc tính được thừa kế
Để kiểm tra một thuộc tính đang được thừa kế hay không, thực hiện các bước sau:
- Click chuột phải, chọn Inspect/Kiểm tra.
- Tại tab Element, đảm bảo con trỏ chuột đang trỏ đúng vào thẻ bạn muốn kiểm tra.
- Tại tab Styles, kéo xuống tới khi thấy Inherited from…, sau từ from sẽ là tên của thẻ cha.
- Quan sát các thuộc tính được thừa kế.
Xem thêm video minh họa:
Cách ghi đè thuộc tính được thừa kế
Nếu không muốn thẻ con thừa kế các thuộc tính CSS từ thẻ cha, có thể ghi đè thuộc tính được thừa kế bằng cách viết CSS trực tiếp cho thẻ con được thừa kế.
<style>
p {
color: green;
}
/* Ghi đè CSS */
strong {
color: red
}
</style>
<p>Cách dễ nhất để học học <strong>HTML CSS</strong> cho người mới bắt đầu</p>
Cách dễ nhất để học học HTML CSS cho người mới bắt đầu
color đã bị gạch bỏ (bị ghi đè).
Trong DevTools, khi thấy một thuộc tính bị gạch bỏ nghĩa là đã có thuộc tính khác ghi đè nó.
Cách kiểm tra thuộc tính có tính thừa kế
Có phải cả các thuộc tính CSS đều có tính thừa kế?
Trong CSS, không phải thuộc tính nào cũng có tính thừa kế. Để kiểm tra thuộc tính nào có tính thừa kế, tìm kiếm với từ khóa “CSS <tên thuộc tính> property”.
Ví dụ, để kiểm tra xem thuộc tính font-size có tính thừa kế không, mình sẽ tìm kiếm Google với từ khóa “CSS font-size property” và tham khảo tại W3C hay Mozilla Developer.
Nếu sử dụng W3C, cuộn xuống tới phần Definition & Usage sẽ có câu trả lời là Yes/No và được mô tả:
Tại Mozilla Developer, click vào Formal definition ở sidebar:
Nếu Inherited: No, thuộc tính CSS đó chỉ tác động trực tiếp lên thẻ được viết.
Tính thừa kế được ứng dụng khi nhiều thẻ khác nhau có chung một kiểu CSS. Lúc này có thể bọc các thẻ con vào một thẻ lớn hơn và viết CSS cho thẻ cha. Từ đó tiết kiệm được thời gian, code trông cũng gọn gàng hơn so với việc viết CSS cho từng thẻ riêng biệt.
Giá trị được tính toán (computed value)
Sau các chuỗi thừa kế hay ghi đè CSS, để biết được cuối cùng những thuộc tính nào được áp dụng, kiểm tra tại tab Computed:
Tóm tắt
- Thừa kế trong CSS là khi các thẻ con được thừa hưởng lại các thuộc tính CSS từ thẻ cha.
- Để ghi đè thuộc tính được thừa kế, viết CSS trực tiếp cho thẻ con được thừa kế.
- Trong DevTools, khi thấy một thuộc tính bị gạch bỏ nghĩa là đã có thuộc tính khác ghi đè nó.
- Để 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.
Nhận xét