CSS Inheritance

Summary

  • Inheritance trong CSS tương tự các ngôn ngữ khác. Nếu parent elements không set properties, nó sẽ lấy initial value (được set trong CSS trình duyệt)
  • Inheritable properties: color, font-size, font-familty, ..... Non-inheritable properties: padding, margin, border, width, height, animation, ...
  • Main related keywords: inherit, initial, unset

Inheritance

  • Browser thường có sẵn init value cho phần lớn các thẻ HTML. Nếu author/users không định nghĩa CSS cho các tag đó thì nó sẽ tự động lấy giá trị có sẵn để hiển thị.
  • Kế thừa trong CSS tương tự như các ngôn ngữ khác. Nó cũng sẽ ưu tiên kế thừa từ parent gần nhất (do đã được override).
  • Ta có thể define eg: font-weight: inherit để chỉ định element đó phải thừa kế font-weight từ phần tử cha liền nó (Chứ không phải lấy value font-size được định nghĩa ở chỗ khác)
  • initial keywords giúp reset lại value của 1 properties về trạng thái ban đầu
  • Trong CSS, 1 số property default sẽ được kế thừa, 1 số thì không.
    • Inheritable properties: color, font-size, font-family, line-height, text-align, ..
    • Non-inheritable properties: padding, margin, border, width, height, display, position, animation, ...
    • Lý do là vì: Các properties, như text-related properties thì có tính đồng nhất, nên mặc định có thể kế thừa từ parent elements. Nhưng với các properties liên quan tới box-model, nếu để kế thừa mặc định thì sẽ rất khó để control box.
  • unset - Reset value của properties. Nó tương đương inherit đối với các inheritable properties, và tương đương initial với các non-inheritable properties.
    • Ta có thể unset all với properties: all: unset