CSS kế thừa kích thước

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 Lifewire

Phầ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 CSS

Cá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ập

Xin 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 cho

Bâ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

, cỡ chữ được tính ở 1. 25 lần giá trị. Vì vậy, văn bản bên trong thẻ sẽ xuất hiện ở khoảng 45px

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 đó

Làm cách nào để kế thừa kiểu trong CSS?

Chiều rộng kế thừa có nghĩa là gì trong CSS?

Các thuộc tính CSS chiều rộng và chiều cao có được kế thừa theo mặc định không?

Khi nào nên sử dụng CSS kế thừa?