Inheritance

Inherited properties

Khi không có giá trị nào cho inherited property được chỉ định trên một phần tử, phần tử đó nhận computed value của thuộc tính đó trên phần tử cha của nó. Chỉ có phần tử gốc của tài liệu mới nhận initial value được nêu trong phần tóm tắt của thuộc tính.

Một ví dụ điển hình về inherited property là thuộc tính color. Hãy xem xét các quy tắc style và markup sau:

p {
  color: green;
}

<p>This paragraph has <em>emphasized text</em> in it.</p>

Các từ "emphasized text" sẽ hiển thị màu xanh lá cây, vì phần tử em đã kế thừa giá trị của thuộc tính color từ phần tử p. Nó không nhận giá trị ban đầu của thuộc tính (là màu được dùng cho phần tử gốc khi trang không chỉ định màu nào).

Non-inherited properties

Khi không có giá trị nào cho non-inherited property được chỉ định trên một phần tử, phần tử đó nhận initial value của thuộc tính đó (như được chỉ định trong phần tóm tắt của thuộc tính).

Một ví dụ điển hình về non-inherited property là thuộc tính border. Hãy xem xét các quy tắc style và markup sau:

p {
  border: medium solid;
}

<p>This paragraph has <em>emphasized text</em> in it.</p>

Các từ "emphasized text" sẽ không có border khác (vì giá trị ban đầu của border-style là none).

Ghi chú

Từ khóa inherit cho phép tác giả chỉ định tường minh việc kế thừa. Nó hoạt động trên cả inherited properties lẫn non-inherited properties.

Bạn có thể kiểm soát inheritance cho tất cả các thuộc tính cùng một lúc bằng cách sử dụng thuộc tính shorthand all, áp dụng giá trị của nó cho tất cả các thuộc tính. Ví dụ:

p {
  all: revert;
  font-size: 200%;
  font-weight: bold;
}

Điều này revert style của thuộc tính font của các đoạn văn về mặc định của user agent, trừ khi tồn tại user stylesheet, trong trường hợp đó sẽ dùng stylesheet đó. Sau đó nó nhân đôi cỡ chữ và áp dụng font-weight là "bold".

Ghi đè inheritance, một ví dụ

Sử dụng ví dụ trước với border, nếu chúng ta đặt tường minh inheritance bằng inherit, chúng ta nhận được kết quả sau:

p {
  border: medium solid;
}

em {
  border: inherit;
}

<p>This paragraph has <em>emphasized text</em> in it.</p>

Chúng ta có thể thấy ở đây có thêm border xung quanh từ "emphasized text".

Đặc tả

Xem thêm

• Các giá trị CSS để kiểm soát inheritance: inherit, initial, revert, revert-layer, và unset
• Module CSS cascading and inheritance
• CSS error handling
• Giới thiệu về CSS cascade
• Học: Xử lý xung đột
• Học: Cascade layers
• Giới thiệu cú pháp CSS: declarations, rulesets và statements
• At-rules
• Giá trị: initial, computed, used, và actual
• Value definition syntax
• Module CSS nesting