Khi bắt đầu, chúng tôi thấy rằng bằng cách đặt kiểu nội dung, chúng tôi có thể đặt kiểu mặc định cho tất cả các thành phần trên trang [tất cả các thành phần hiển thị được chứa trong. yếu tố]
Có thể làm điều này ở cấp độ cao hơn của phần tử. Thoạt nhìn, điều này có vẻ không hợp lý [vì như tôi vừa nói, tất cả các phần tử hiển thị được chứa trong. yếu tố]; . Trong tôi đã nói về vấn đề xếp tầng khi sử dụng tỷ lệ phần trăm và ems để đặt cỡ chữ. Tôi thực sự đã nói vấn đề với tỷ lệ phần trăm là chúng xếp tầng [và chúng xếp tầng như một tên khốn]
Điều này là do các công cụ sửa đổi này chỉ đơn giản là thay đổi các thuộc tính được kế thừa, vì vậy nếu chúng tôi xác định phông chữ cơ sở là 25 pixel, sau đó chúng tôi lấy kiểu thứ hai từ kiểu này và đặt cho nó kích thước phông chữ là 80%, thì phông chữ đó sẽ cao 20 pixel;
Đây có thể là một vấn đề [nó có thể dẫn đến văn bản rất nhỏ hoặc rất lớn khi mới bắt đầu]. Để giải quyết vấn đề này, một công cụ sửa đổi mới [rems] đã được giới thiệu. Bây giờ rems không xếp tầng, chúng luôn được áp dụng tương ứng với giá trị mặc định và giá trị mặc định đó là bất kỳ thuộc tính nào được đặt cho phần tử
Cuối cùng, có bộ chọn dấu hoa thị [*], đôi khi được gọi là bộ chọn chung;
Nó khác với bộ chọn and ở chỗ nó chọn mọi phần tử kể cả các phần tử con, bộ chọn and chọn các phần tử cơ sở [phần tử cha] rồi dựa vào tính kế thừa để truyền các thuộc tính xuống phần tử con, phần tử dấu hoa thị buộc các thuộc tính đã chỉ định vào
Do đó thiết lập
Sẽ buộc tất cả văn bản trên trang web có màu đỏ trừ khi có một kiểu cụ thể cho một phần tử cụ thể làm thay đổi giá trị màu cho phần tử đó
Nếu một phần tử lấy màu văn bản của nó thông qua thừa kế, [cha mẹ có màu xanh lá cây nên phần tử con cũng sẽ có màu xanh lá cây] thì bộ chọn dấu hoa thị sẽ ghi đè lên phần thừa kế này, nó sẽ giống như phần tử con có color: red
;
Kế thừa là một từ khóa trong CSS. Cái nào được sử dụng để có được cùng một thuộc tính của bộ chọn cha đó cho bộ chọn con? . Nó được phép kế thừa tất cả các giá trị cha của nó cho phần tử con của nó. Chúng ta phải biết rằng một số thuộc tính được tự động kế thừa từ cha sang con do tính chất xếp tầng của CSS. Giả sử nếu chúng ta đặt màu văn bản của một phần tử thì nó sẽ tự động kế thừa tất cả thuộc tính màu cha của nó thành thuộc tính con có cùng màu
Gói phát triển phần mềm tất cả trong một[hơn 600 khóa học, hơn 50 dự án]
Giá bán
Xem các khóa học
Hơn 600 khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập trọn đời
4. 6 [86.007 xếp hạng]
Chúng ta sử dụng Thuộc tính kế thừa trong CSS ở đâu?
Khi chúng tôi muốn kế thừa cài đặt mặc định của máy khách thành giá trị thuộc tính phần tử của riêng chúng tôi thì chúng tôi phải sử dụng thuộc tính inherit
Bắt đầu khóa học phát triển phần mềm miễn phí của bạn
Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác
cú pháp
element1
{
color: value;
}
element2 element1
{
color: inherit;
}
ví dụ
Sau đây là các ví dụ được đưa ra dưới đây
Ví dụ #1 – Kế thừa thuộc tính Span
Mã số
div
{
color: maroon;
font-size: 18px;
}
span {
color: orange;
border: 2px solid maroon;
font-size: 22px;
}
.d1 span {
color: inherit;/*span all property styles applied to d1 div tag child element*/
}
h1
{
color: green;
text-align: center;
}
Inherit Span element properties to its child elements
The inherit is keyword in CSS. Which is used to acquire the same property of that parent selector to child selector. Specified the value of inherit for whatever CSS property
that is applicable to an element which will cause the element to get the parent's already existing value for child property.
The inherit is keyword in CSS. Which is used to acquire the same property of that parent selector to child selector. Specified the value of inherit for whatever CSS property
that is applicable to an element which will cause the element to get the parent's already existing value for child property.
The inherit is keyword in CSS. Which is used to acquire the same property of that parent selector to child selector. Specified the value of inherit for whatever CSS property
that is applicable to an element which will cause the element to get the parent's already existing value for child property.
đầu ra
Ví dụ #2 – Kế thừa thẻ Div cho đoạn văn
Mã số
.div {
background-color: lightgray;
color: fuchsia;
font-weight: bold;
font-size: 22px;
}
.p {
background-color: inherit;/*background color, color inherited from div to p tag*/
color: inherit;
font-weight: normal;
}
h1
{
color: blue;
text-align: center;
}
Inherit div element properties to its paragraph child elements
Hi, I am Paramesh
The inherit is keyword in CSS. Which is used to acquire the same property of that parent selector to child selector. Specified the value of inherit for whatever CSS property
that is applicable to an element which will cause the element to get the parent's already existing value for child property.
đầu ra
Ví dụ #3 – Kế thừa Div và Đoạn văn
Mã số
body {
color: blue;
font-size: 18px;
background-color: lightgray;
}
.mainDiv {
max-width: 650px;
margin: 30px auto;
}
.div1 {
padding: 22px;
color: brown;
border: 3px solid red;
}
.c {
margin-top: 22px;
padding: 22px;
border: inherit;
}
.div2 {
padding: 22px;
border: 3px solid orange;
margin-top: 32px;
}
.c2 {
padding: 22px;
margin-top: 22px;
border: 3px solid inherit;
}
h1 {
color: blue;
text-align: center;
}
Inherit Demo
The inherit is keyword in CSS. Which is used to acquire
the same property of that parent sdiv1ector to c sdiv1ector.
Specified the value of inherit for whatever CSS property that is
applicable to an div1ement which will cause the div1ement to get the
parent's already existing value for c property.which is blue, as
span div1ements are set to be
The inherit is keyword in CSS. Which is used to
acquire the same property of that parent sdiv1ector to c
sdiv1ector. Specified the value of inherit for whatever CSS property
that is applicable to an div1ement which will cause the div1ement to
get the parent's already existing value for
c property
.which is blue, as span div1ements are set to be
The inherit is keyword in CSS. The inherit is keyword in CSS.
Hi, I am
Paramesh
Hi, I am
Amardeep
Krishna
I am staying in Hyderabad.
Hello, How are you?
Where are you paramesh?
Hyderabad
đầu ra
Bài viết được đề xuất
Đây là hướng dẫn về Kế thừa CSS. Ở đây chúng ta cũng thảo luận về phần Giới thiệu và chúng ta sử dụng thuộc tính inherit một thuộc tính trong css ở đâu? . Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –