Một số thuộc tính nhận giá trị từ cha
```css
body {
color: blue;
font-family: sans-serif;
border: 2px solid teal;
}
h1 { color: maroon; }
```
Giả sử body chứa h1, h2 và p; em nằm trong p. color và font-family có tính kế thừa. Trong mẫu, h2, p và em nhận màu blue theo cha; h1 có color riêng là maroon.
border không tự kế thừa như color. Viền teal trên body không tự tạo thêm viền quanh từng h1, h2, p hoặc em. Phải xét thuộc tính cụ thể, thay vì coi toàn bộ định dạng của cha đều truyền xuống.
Giá trị riêng trên con khác việc nhận từ cha
Khi p có khai báo color riêng hợp lệ, không lấy bộ chọn của cha để “đấu” với bộ chọn p nhằm truyền màu xuống. Giá trị trên p được xác định trực tiếp, còn kế thừa giúp nhận giá trị của cha khi thuộc tính dẫn đến kế thừa.
Ví dụ body màu blue nhưng p đặt color:green thì p có màu green trong tình huống không có khai báo khác ảnh hưởng. Các phần tử con của p chưa có color riêng lại có thể nhận màu green theo p.
Bộ chọn * khớp các phần tử, kể cả phần tử đã có định dạng khác
```css
body { font-family: sans-serif; }
* { font-family: serif; }
```
Trong tài liệu đơn giản chỉ có các quy tắc này, body nhận sans-serif từ quy tắc body. Nhưng p cũng được * đặt trực tiếp font-family:serif, nên p dùng serif thay vì chỉ nhận sans-serif từ body.
* không chỉ tìm những phần tử “chưa được định dạng”. Cần phân biệt một khai báo trực tiếp trên p với giá trị p có thể kế thừa; các quy tắc ưu tiên chi tiết hơn sẽ được xét tiếp trong lộ trình.
Bài luyện
Trong mã đầu bài, h1 có màu riêng maroon; p không có color riêng. Màu p trong ví dụ là gì?
h1 không phải cha của p trong dữ kiện.
Đúng. p nhận color từ body.
Màu viền không đổi thành màu chữ của p.
Thuộc tính color có giá trị được xác định.
Lời giải
p là con của body và không có color riêng trong mẫu. color có tính kế thừa, nên p nhận blue từ body; maroon chỉ được đặt riêng cho h1.
Bài luyện
body có border:2px solid teal; trong mẫu. Vì sao p không tự có viền riêng như body?
Đúng. Cần xem tính kế thừa của từng thuộc tính.
p có thể được đặt border trực tiếp.
teal không bị giới hạn như vậy.
Phần tử em không làm mất mọi CSS.
Lời giải
border là ví dụ thuộc tính không tự kế thừa. Viền của body vẫn được vẽ quanh body, nhưng không tự tạo một viền tương tự quanh p; có thể đặt border riêng nếu cần.
Bài luyện
Chỉ có body {font-family:sans-serif;} và * {font-family:serif;}. p trong body dùng họ nào theo ví dụ?
Cần phân biệt giá trị trực tiếp trên p với kế thừa từ body.
Không có khai báo monospace trong ví dụ.
Đúng. p nhận khai báo trực tiếp của *.
Dấu * không mang nghĩa họ cursive.
Lời giải
* khớp p và đặt font-family:serif ngay trên p. p vì thế có giá trị trực tiếp, không chỉ dựa vào font-family kế thừa từ body; việc body dùng sans-serif không làm p tự bỏ khai báo riêng này.
Đang học