Trong CSS, all property là thuộc tính rút gọn để đặt giá trị ban đầu hoặc kế thừa cho tất cả phần tử. Đôi khi nó được dùng để đặt giá trị từ nguồn khác. Thuộc tính này được dùng để đặt lại tất cả thuộc tính CSS trong một tài liệu.
Cú pháp:
all: initial|inherit|unset|revert|revert-layer;
Giá trị mặc định: Giá trị mặc định của nó là none.
Giá trị thuộc tính:
- initial: Thuộc tính này đặt tất cả các thuộc tính về giá trị mặc định ban đầu.
- Inherit: Thuộc tính này đặt tất cả các thuộc tính về giá trị được kế thừa của nó.
- unset: Chỉ ra rằng tất cả thuộc tính của phần tử nên được cập nhật về giá trị gốc của chúng. Giá trị gốc là giá trị kế thừa nếu có hoặc giá trị khởi tạo.
- revert: Hoàn tác hoặc khôi phục trạng thái hoặc giá trị trước đó của một thuộc tính.
- revert-layer: Đảo ngược các sửa đổi trên một layer cụ thể. Khôi phục nó về trạng thái trước đó trong phần mềm hoặc hệ thống.
Ví dụ: Trong ví dụ này, chúng ta sử dụng thuộc tính all: initial.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS all property
</title>
<!-- CSS all property -->
<style>
h1,
h3 {
background-color: yellow;
color: green;
all: initial;
}
body {
text-align: center;
all: initial;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>all property</h3>
</body>
</html>
Đầu ra:
GeeksforGeeks all property
Ví dụ: Trong ví dụ này, chúng ta sử dụng thuộc tính all: inherit.
html<!DOCTYPE html>
<html>
<head>
<title>All Property</title>
<style>
div {
text-align: center;
color: green;
all: initial
}
h1,
h3 {
all: inherit;
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
<h3>all property</h3>
</div>
</body>
</html>
Đầu ra:
GeeksforGeeks all property
Ví dụ: Trong ví dụ này, chúng ta sử dụng thuộc tính all: unset.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS all property
</title>
<style>
h1,
h3 {
background-color: green;
color: white;
all: unset;
}
body {
text-align: center;
all: unset;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>all property</h3>
</body>
</html>
Đầu ra:
GeeksforGeeks all property
Ví dụ: Trong ví dụ này, chúng ta sử dụng thuộc tính all: revert.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS all property
</title>
<style>
h1,
h3 {
background-color: yellow;
color: green;
all: revert;
}
body {
text-align: center;
all: revert;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>all Property</h3>
</body>
</html>
Đầu ra:
Các trình duyệt được hỗ trợ để chạy code CSS all property:
- Chrome 37.0
- Firefox 27.0
- Opera 24.0
- Safari 9.1
- Microsoft Edge 79.0