Tôi có thể sử dụng css kế thừa không?

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 Playground

Hỗ 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

Sự khác biệt giữa kế thừa và khởi tạo trong CSS là gì?

kế thừa. Lấy thuộc tính từ phần tử cha. ban đầu. Giá trị mặc định cho thuộc tính [mặc định của trình duyệt] . bỏ đặt. Hoạt động như một trong hai kế thừa hoặc ban đầu. Nó sẽ hoạt động như kế thừa nếu cha mẹ có giá trị phù hợp, nếu không, nó sẽ hoạt động như ban đầu.

Màu nền có được kế thừa trong CSS không?

Các thuộc tính nền không kế thừa , nhưng nền của phần tử gốc sẽ tỏa sáng theo mặc định do giá trị 'trong suốt' ban đầu trên 'màu nền'. Về mô hình hộp, "nền" đề cập đến nền của nội dung và vùng đệm.

Chủ Đề