Từ khóa CSS inherit được sử dụng để có thuộc tính có cùng giá trị được chỉ định như thuộc tính của cha mẹ của phần tử. Việc chỉ định giá trị inherit cho bất kỳ thuộc tính CSS nào được áp dụng cho một phần tử sẽ khiến phần tử đó nhận giá trị tính toán của cấp độ gốc cho thuộc tính đó
Tất cả các thuộc tính CSS được phép kế thừa các giá trị của chúng từ cha hoặc tổ tiên của phần tử, vì vậy giá trị inherit có thể được sử dụng trên bất kỳ thuộc tính CSS nào
Một số thuộc tính CSS tự động kế thừa các giá trị của chúng từ cha của phần tử, do tính chất xếp tầng của CSS. Ví dụ: nếu bạn đặt màu văn bản cho một phần tử, thì tất cả phần tử con của phần tử đó sẽ kế thừa cùng một màu văn bản. Mặc dù các giá trị thuộc tính nhất định được kế thừa tự động, nhưng có thể có những trường hợp bạn muốn tăng trọng lượng của thuộc tính được kế thừa. Trong trường hợp như vậy, việc sử dụng giá trị inherit trên một thuộc tính sẽ kế thừa giá trị của cấp độ gốc theo mặc định sẽ thực thi việc kế thừa giá trị của cấp độ gốc
Một trong những tình huống mà bạn muốn sử dụng inherit để thực thi một giá trị được kế thừa tự động là khi giá trị được kế thừa bị biểu định kiểu của tác nhân người dùng ghi đè [kiểu mặc định được trình duyệt áp dụng cho một số phần tử]
Ví dụ: mặc dù giá trị văn bản color được tự động truyền cho tất cả phần tử con của một phần tử, nhưng trong trường hợp phần tử neo [liên kết], thuộc tính color thường được đặt thành màu xanh lam trong biểu định kiểu tác nhân người dùng. Trong hầu hết các trường hợp, bạn sẽ áp dụng một màu khác cho các liên kết hoặc bạn có thể muốn chúng kế thừa cùng màu với phần còn lại của văn bản và có thể áp dụng một hiệu ứng hình ảnh khác cho biết chúng là các liên kết [ví dụ: áp dụng gạch dưới . Giả sử rằng bạn muốn các liên kết có cùng màu văn bản với phần còn lại của văn bản, thì bạn có thể sử dụng giá trị inherit để thực thi giá trị của màu thường được kế thừa
Một số thuộc tính CSS không kế thừa giá trị được tính toán của phần tử gốc, nhưng bạn có thể muốn đặt giá trị của thuộc tính trên một phần tử giống với giá trị của phần tử gốc. Trong trường hợp này, từ khóa inherit được sử dụng để làm việc đó. cho phép các thuộc tính không tự động kế thừa giá trị kế thừa giá trị đó
Ví dụ: giả sử bạn đã áp dụng đường viền màu đen cho một phần tử và bạn muốn tất cả các phần tử inherit0 con của nó có cùng một đường viền, thì bạn có thể sử dụng từ khóa inherit trên inherit3 của phần tử con inherit0 để cho phép chúng kế thừa cùng một màu đường viền
Điều đáng chú ý ở đây là nếu bạn sử dụng thuộc tính tốc ký inherit4 để áp dụng đường viền, thì bạn không thể sử dụng giá trị inherit và mong muốn nó hoạt động. Ví dụ: inherit6 sẽ không kế thừa màu đường viền từ cha của phần tử. inherit phải là giá trị duy nhất trong khai báo, vì đơn giản là không có cách nào xác định thuộc tính phụ mà giá trị inherit đề cập đến—xét cho cùng, nó không phải là duy nhất trong chuỗi. Không có cách nào để nói rằng từ khóa inherit được cho là kế thừa giá trị của thuộc tính inherit3 chứ không phải thuộc tính inherit0.
Cách duy nhất để từ khóa inherit hoạt động trong thuộc tính tốc ký là nếu đó là giá trị duy nhất được cung cấp cho thuộc tính đó; . Kiểm tra bản demo trực tiếp trong phần tiếp theo để xem nó hoạt động như thế nào.
ví dụ
Ví dụ sau sẽ đặt màu của tất cả các liên kết bên trong phần tử inherit3 thành cùng màu với màu văn bản được đặt trên phần tử
.element {
color: #333;
}
.element a {
color: inherit; /* inherit whatever color is specified in the parent's color property */
}
Bản thử trực tiếp
Xem bản demo này trên Codrops PlaygroundHỗ trợ trình duyệt
Giá trị inherit được hỗ trợ trong tất cả các trình duyệt chính. Chrome, Firefox, Safari, Opera, IE bắt đầu từ phiên bản 8 và trên Android và iOS
ghi chú
Phiên bản 6 và 7 của Internet Explorer không hỗ trợ từ khóa inherit trên tất cả các thuộc tính CSS. Họ hỗ trợ sử dụng nó trên các thuộc tính inherit6 và inherit7. Tuy nhiên, vì các giá trị của hai thuộc tính này được kế thừa theo mặc định, điều đó thực sự có thể vô ích
Kế thừa là một khái niệm mà chúng ta thấy trong cuộc sống hàng ngày của mình. Trẻ thừa hưởng các đặc điểm như chiều cao, mắt, mũi, v.v. từ cha mẹ của họ. Kế thừa là một trong những khái niệm cốt lõi của ngôn ngữ oops [Ngôn ngữ lập trình hướng đối tượng]. Trong đó chúng tôi lấy các thuộc tính của một lớp trong một lớp khác cho một hệ thống phân cấp. Lớp kế thừa trở thành lớp con và từ đó nó được lấy trở thành lớp cha hoặc lớp cha
Kế thừa CSS. Trong kế thừa CSS, phần tử con đương nhiên sẽ kế thừa các thuộc tính từ phần tử cha của nó
cú pháp
#parentclass {
color: red;
}
Parent Div
Child Div 1
Child Div 2
Ở đây lớp cha truyền một kiểu dáng CSS được thực hiện dưới dạng màu thành màu đỏ. Trong khi các lớp con div1Child và div2Child không có bộ quy tắc về màu sắc. màu đỏ được đặt cho chúng nhưng chúng được hiển thị bằng màu đỏ.
Đó là do div con 1 và 2 được thừa hưởng các thuộc tính từ cha mẹ i. e. lớp cha mẹ.
HTML
inherit9
inherit0____31inherit2
inherit3
inherit0____35inherit2
inherit7____30inherit91____32
inherit93____294
inherit95inherit96
inherit93____298
inherit3
inherit93____301
inherit95inherit03
inherit93____298
inherit3
inherit93inherit08
inherit95inherit10
inherit93____298
inherit7____314inherit91inherit2
inherit14inherit5inherit2
inherit3
inherit0inherit22inherit2
inherit7______30inherit26 inherit27inherit28inherit29inherit2
inherit93____332
inherit93______30inherit26 inherit27inherit28inherit38inherit2
inherit95inherit01
inherit95inherit0inherit26 inherit27inherit28inherit07inherit2
inherit09inherit50
inherit09inherit0inherit26 inherit27inherit28inherit56inherit2
inherit58inherit59
inherit09inherit14inherit26inherit2
inherit95inherit14inherit26inherit2
inherit95inherit0inherit26 inherit27inherit28inherit73____32
inherit09inherit76
inherit95inherit14inherit26inherit2
inherit93____314inherit26inherit2
inherit93______30inherit26 inherit27inherit28inherit910inherit2
inherit95inherit913
inherit93____314inherit26inherit2
inherit7____314inherit26inherit2
inherit14inherit22inherit2
inherit3
inherit14inherit1inherit2
đầu ra
đầu ra
Ở đây #parentclass có màu. đen, #child1 có màu. xanh lá cây và #childchild1 có màu. màu đỏ. Trong đoạn mã trên #child1 và #child2 nằm trong #parentclass, vì vậy cả hai sẽ có màu đen được kế thừa nhưng chỉ có con 2 có màu vì chúng tôi đã cho màu #child1. màu xanh lá cây, đây được gọi là tính đặc hiệu.
Các thuộc tính CSS có thể kế thừa.
Chúng ta không thể kế thừa tất cả các thuộc tính/quy tắc của CSS. Tất cả các thuộc tính font-* được kế thừa tự nhiên như
• font-size
• font-family
• font-weight
• font-style, etc.
Thuộc tính màu cũng được kế thừa.
Các thuộc tính CSS như chiều cao, đường viền, phần đệm, lề, chiều rộng, v.v. không di truyền tự nhiên. Chúng ta có thể thực hiện kế thừa trên các thuộc tính CSS không thể kế thừa. Chúng tôi sử dụng inherit để làm như vậy.
Kế thừa CSS
Chúng tôi sử dụng inherit trên thuộc tính CSS để chiếm thuộc tính phần tử gốc của nó. Giả sử chúng ta có một mã
HTML
inherit9
inherit0____31inherit2
inherit933inherit0____35inherit2
inherit7____30inherit91____32
inherit941inherit94
inherit93____2944
inherit93____310
inherit941inherit98
inherit941____2950
inherit93____2952
inherit941inherit98
inherit7____314inherit91inherit2
inherit933inherit0____322inherit2
inherit7__inherit0inherit26 inherit27inherit28inherit968inherit2
inherit941inherit971
inherit941inherit0inherit26 inherit27inherit28inherit977______2978inherit26inherit2
inherit7____314inherit26inherit2
inherit985inherit14inherit22inherit2
inherit14inherit1inherit2
đầu ra
đầu ra
Theo cách này, chúng ta kế thừa các thuộc tính CSS không kế thừa bằng cách sử dụng inherit. Chỉ phần tử con trực tiếp của phần tử cha mới có thể kế thừa nó nhưng cháu thì không thể. Thay vào đó, nó sẽ dùng đến chiều cao tính toán ban đầu của trình duyệt