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 thuộc tính kiểu, bạn sẽ thấy một phần có tiêu đề "Kế thừa. " 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
Kế thừa CSS là gì?
Mỗi phần tử trong tài liệu HTML là một phần của cây và mọi phần tử ngoại trừ phần tử ban đầu
Ví dụ: mã HTML dưới đây có một
thẻ kèm theo một thẻ. Xin chào LifewirePhần tử là con của
phần tử và bất kỳ kiểu nào trên phần tử được kế thừa cũng sẽ được chuyển vào văn bản. Ví dụ.Vì thuộc tính kích thước phông chữ được kế thừa, văn bản có nội dung "Lifewire" [là nội dung được đính kèm bên trong các thẻ] sẽ có cùng kích thước với phần còn lại của thuộc tính
Điều này là do nó kế thừa giá trị được đặt trong thuộc tính CSSCách sử dụng tính kế thừa CSS
Cách dễ nhất để sử dụng nó là làm quen với các thuộc tính CSS được 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ẽ 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ử cấp cao, chẳng hạn như
Nếu bạn đặt họ phông chữ của mình_______1_______Sử dụng giá trị kiểu kế thừa
Mỗi thuộc tính CSS bao gồm giá trị "kế thừa" như một 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, thì thuộc tính đó phải có cùng giá trị với thuộc tính gốc. Nếu bạn đặt một kiểu chẳng hạn như 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 một lề như gốc. Ví dụ
Kế thừa sử dụng các giá trị được tính toán
Điều này quan trọng đối với các giá trị 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 cỡ chữ là 1em trên
phần tử, 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 đề [ - ] 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 cỡ chữ khác, trình duyệt web sẽ luôn đặt tiêu đề là văn bản lớn nhất trên trang, tiếp theo là văn bản lớn nhất trên trang, v.v. Khi bạn thiết lậpXin chào Lifewire
Hãy xem ví dụ. Kích thước cơ sở được đặt ở 1em. Đây là khoảng 16px trên hầu hết các trình duyệt. Sau đó,
được đặt thành 2. 25em. Vì cơ sở là 1em, thường là giá trị mặc định, nên giá trị được tính là 2. 25 lần giá trị đó, khoảng 16px. Điều đó làm choBây giờ, bạn có thể mong đợi rằng phần tử sẽ trở nên nhỏ hơn. Nó chỉ được xác định tại 1. 25em. Đó không phải là trường hợp, mặc dù. Vì là con của
Lưu ý về tính kế thừa và thuộc tính nền
Có một số kiểu được liệt kê là không được kế thừa trong CSS 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
Tiêu đề lớn
Từ "Lớn" vẫn sẽ có nền màu vàng, mặc dù thuộc tính màu nền không được kế thừa. Điều này là do giá trị ban đầu của thuộc tính nền là "trong suốt". Vì vậy, bạn không nhìn thấy màu nền trên mà đúng hơn là màu đó đang chiếu xuyên qua từ
cha mẹTrích dẫn bài viết này
Sự sắp xếp
trích dẫn của bạn
Kyrnin, Jennifer. "Tổng quan về Kế thừa CSS. "ThinkCo. https. //www. suy nghĩ. com/css-inheritance-overview-3466210 [truy cập ngày 19 tháng 1 năm 2023]
Vùng “nội dung” được định nghĩa là phần đệm và đường viền ngoài chiều cao/chiều rộng hoặc kích thước mà nội dung tự chiếm
Các giá trị âm như height: -100px
không được chấp nhận. Thuộc tính height
không áp dụng cho các phần tử không được thay thế bao gồm cột bảng và nhóm cột
.wrap {
height: auto; /* auto keyword */
height: 120px; /* length values */
height: 10em;
height: 0; /* unit-less length is OK for zero */
height: 75%; /* percentage value */
height: inherit; /* inherited value from parent element */
}
Check out this Pen!
Nếu chiều cao của khối chứa không được chỉ định rõ ràng và phần tử không được định vị tuyệt đối, thì giá trị chiều cao của nó sẽ tính thành tự động [nó sẽ cao bằng nội dung bên trong nó hoặc bằng 0 nếu không có nội dung]. Nếu phần nội dung của phần tử yêu cầu nhiều không gian theo chiều dọc hơn so với giá trị được chỉ định, hành vi của phần tử được xác định bởi thuộc tính overflow
Khi sử dụng từ khóa auto
, height
được tính dựa trên khu vực nội dung của phần tử trừ khi được chỉ định rõ ràng. Điều này có nghĩa là giá trị dựa trên tỷ lệ phần trăm vẫn là giá trị của khu vực nội dung thành phần. Tương tự, nếu chiều cao của vùng chứa được đặt thành giá trị phần trăm, chiều cao phần trăm phần tử con vẫn dựa trên khu vực nội dung của phần tử con đó