Inherit là một từ khóa(keyword) trong CSS, như nghĩa của nó "kế thừa", nó được sử dụng để một đối tượng cụ thể nào đó được kế thừa một thuộc tích(property) từ cha mẹ của nó. Từ khóa inherit có thể được sử dụng cho bất kỳ thuộc tính(property) của CSS trên bất kỳ thẻ(tag) HTML nào.
Như ta thấy ở ví dụ dưới đây, tất cả <span> trong trang đã sử dụng css để thiết lập màu sắc là "Blue", vì vậy khi ta dùng thẻ <span> trong div dòng thứ nhất và dòng thứ 3 ta sẽ thấy dòng chữ "a span element" là màu "Blue" mà không phải là màu đen hay màu đỏ như trong thẻ <div> chúng định nghĩa.
Tuy nhiên trong thẻ <div> thứ 2 có định nghĩa màu chữ là "Green" thì màu chữ trong thẻ <Span> cũng là màu "Green" bởi vì nó được sử dụng từ khóa "inherit" để kế thừa thuộc tính màu (color property) từ <div>(parent: cha) của nó vì vậy nó cùng màu với lớp cha là màu "Green".
Như ta thấy ở ví dụ dưới đây, tất cả <span> trong trang đã sử dụng css để thiết lập màu sắc là "Blue", vì vậy khi ta dùng thẻ <span> trong div dòng thứ nhất và dòng thứ 3 ta sẽ thấy dòng chữ "a span element" là màu "Blue" mà không phải là màu đen hay màu đỏ như trong thẻ <div> chúng định nghĩa.
Tuy nhiên trong thẻ <div> thứ 2 có định nghĩa màu chữ là "Green" thì màu chữ trong thẻ <Span> cũng là màu "Green" bởi vì nó được sử dụng từ khóa "inherit" để kế thừa thuộc tính màu (color property) từ <div>(parent: cha) của nó vì vậy nó cùng màu với lớp cha là màu "Green".
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: blue;
border: 1px solid black;
}
.extra span {
color: inherit;
}
</style>
</head>
<body>
<div>
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>
<div class="extra" style="color:green">
Here is <span>a span element</span> which is green, because it inherits from its parent.
</div>
<div style="color:red">
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>
</body>
</html>
<html>
<head>
<style>
span {
color: blue;
border: 1px solid black;
}
.extra span {
color: inherit;
}
</style>
</head>
<body>
<div>
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>
<div class="extra" style="color:green">
Here is <span>a span element</span> which is green, because it inherits from its parent.
</div>
<div style="color:red">
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>
</body>
</html>
No comments:
Post a Comment