Cách thức thừa kế CSS hoạt động trong tài liệu web

Một phần quan trọng trong việc tạo kiểu trang web với CSS là hiểu được khái niệm về thừa kế.

Kế thừa CSS được tự động xác định theo kiểu của thuộc tính đang được sử dụng. Khi bạn tra cứu màu nền của thuộc tính style, bạn sẽ thấy một phần có tiêu đề "Inheritance". Nếu bạn giống như hầu hết các nhà thiết kế web, bạn đã bỏ qua phần đó, nhưng nó phục vụ một mục đích.

Thừa kế CSS là gì?

Mỗi phần tử trong một tài liệu HTML là một phần của một cây và mọi phần tử ngoại trừ phần tử ban đầu có một phần tử cha kèm theo nó. Bất kỳ kiểu nào được áp dụng cho phần tử cha đó đều có thể được áp dụng cho các phần tử kèm theo trong đó nếu các thuộc tính là các phần tử có thể được kế thừa.

Ví dụ: mã HTML bên dưới có thẻ H1 kèm theo thẻ EM:

Đây là dòng tiêu đề Big

Phần tử EM là phần tử con của phần tử H1 và bất kỳ kiểu nào trên H1 được kế thừa cũng sẽ được chuyển sang văn bản EM. Ví dụ:

h1 {font-size: 2em; }

Vì thuộc tính kích thước phông chữ được thừa hưởng, văn bản có nội dung "Lớn" (được đặt bên trong các thẻ EM) sẽ có cùng kích thước với phần còn lại của H1. Điều này là do nó kế thừa giá trị được đặt trong thuộc tính CSS.

Cách sử dụng Quyền thừa kế CSS

Cách dễ nhất để sử dụng nó là làm quen với các thuộc tính CSS và không được kế thừa. Nếu thuộc tính được kế thừa, thì bạn biết rằng giá trị sẽ vẫn giữ nguyên cho mọi phần tử con trong tài liệu.

Cách tốt nhất để sử dụng điều này là đặt các kiểu cơ bản của bạn trên một phần tử rất cao, như BODY. Nếu bạn đặt phông chữ-gia đình của bạn trên tài sản cơ thể, sau đó, nhờ thừa kế, toàn bộ tài liệu sẽ giữ cho cùng một phông chữ-gia đình. Điều này thực sự sẽ làm cho các bảng định kiểu nhỏ hơn dễ quản lý hơn vì có ít kiểu tổng thể hơn. Ví dụ:

body {font-family: Arial, sans-serif; }

Sử dụng giá trị kiểu thừa kế

Mỗi thuộc tính CSS bao gồm giá trị "kế thừa" dưới dạng tùy chọn có thể. Điều này cho trình duyệt Web biết rằng ngay cả khi thuộc tính thường không được kế thừa, nó sẽ có cùng giá trị với cha mẹ. Nếu bạn thiết lập một kiểu như một lề không được kế thừa, bạn có thể sử dụng giá trị kế thừa trên các thuộc tính tiếp theo để cung cấp cho chúng cùng lề như cha mẹ. Ví dụ:

thân {margin: 1em; } p {margin: kế thừa; }

Thừa kế sử dụng giá trị tính toán

Điều này quan trọng đối với các giá trị được kế thừa như kích thước phông chữ sử dụng độ dài. Giá trị được tính toán là giá trị có liên quan đến một số giá trị khác trên trang Web.

Nếu bạn đặt kích thước phông chữ là 1em trên phần tử BODY, toàn bộ trang của bạn sẽ không chỉ có kích thước 1em. Điều này là do các phần tử như tiêu đề (H1-H6) và các phần tử khác (một số trình duyệt tính toán các thuộc tính bảng khác nhau) có kích thước tương đối trong trình duyệt Web. Trong trường hợp không có thông tin về kích thước phông chữ khác, trình duyệt Web sẽ luôn đặt tiêu đề H1 là văn bản lớn nhất trên trang, tiếp theo là H2 và vân vân. Khi bạn đặt phần tử BODY thành kích thước phông chữ cụ thể, sau đó được sử dụng làm kích thước phông chữ "trung bình" và các phần tử dòng tiêu đề được tính từ đó.

Lưu ý về thuộc tính thừa kế và thuộc tính nền

Có một số kiểu được liệt kê không được kế thừa trong CSS 2 trên W3C, nhưng các trình duyệt Web vẫn kế thừa các giá trị. Ví dụ: nếu bạn đã viết HTML và CSS sau: