all

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Thuộc tính CSS viết tắt all đặt lại tất cả các thuộc tính của một phần tử, ngoại trừ unicode-bidi, direction, và Thuộc tính tùy chỉnh CSS. Nó có thể đặt các thuộc tính về giá trị ban đầu hoặc giá trị kế thừa, hoặc về các giá trị được chỉ định trong một tầng cascade khác hoặc nguồn gốc stylesheet.

Try it

/* no all property */

all: initial;

all: inherit;

all: unset;

all: revert;

<section id="default-example">
  <div class="example-container-bg">
    <div class="example-container">
      <p id="example-element">
        This paragraph has a font size of 1.5rem and a color of gold. It also
        has 1rem of vertical margin set by the user-agent. The parent of the
        paragraph is a &lt;div&gt; with a dashed blue border.
      </p>
    </div>
  </div>
</section>

#example-element {
  color: gold;
  padding: 10px;
  font-size: 1.5rem;
  text-align: left;
  width: 100%;
}

.example-container {
  border: 2px dashed #2d5ae1;
}

.example-container-bg {
  background-color: #77767b;
  padding: 20px;
}

Các thuộc tính cấu thành

Thuộc tính này là viết tắt cho tất cả các thuộc tính CSS ngoại trừ unicode-bidi, direction, và thuộc tính tùy chỉnh.

Cú pháp

css

/* Giá trị toàn cục */
all: initial;
all: inherit;
all: unset;
all: revert;
all: revert-layer;

Thuộc tính all được xác định như một trong các giá trị từ khóa toàn cục của CSS. Lưu ý rằng không có giá trị nào trong số này ảnh hưởng đến các thuộc tính unicode-bidi và direction.

Giá trị

initial

Xác định rằng tất cả các thuộc tính của phần tử phải được thay đổi về giá trị ban đầu của chúng.

inherit

Xác định rằng tất cả các thuộc tính của phần tử phải được thay đổi về giá trị kế thừa của chúng.

unset

Xác định rằng tất cả các thuộc tính của phần tử phải được thay đổi về giá trị kế thừa của chúng nếu chúng kế thừa theo mặc định, hoặc về giá trị ban đầu của chúng nếu không.

revert

Xác định hành vi phụ thuộc vào nguồn gốc stylesheet mà khai báo thuộc về:

Nếu quy tắc thuộc về nguồn gốc tác giả, giá trị revert khôi phục lại cascade về cấp người dùng, sao cho các giá trị được chỉ định được tính toán như thể không có quy tắc cấp tác giả nào được chỉ định cho phần tử. Đối với revert, nguồn gốc tác giả bao gồm nguồn gốc Override và Animation.
Nếu quy tắc thuộc về nguồn gốc người dùng, giá trị revert khôi phục lại cascade về cấp tác nhân người dùng, sao cho các giá trị được chỉ định được tính toán như thể không có quy tắc cấp tác giả hoặc cấp người dùng nào được chỉ định cho phần tử.
Nếu quy tắc thuộc về nguồn gốc tác nhân người dùng, giá trị revert hoạt động như unset.

revert-layer

Xác định rằng tất cả các thuộc tính của phần tử phải khôi phục cascade về một tầng cascade trước đó, nếu có. Nếu không có tầng cascade nào khác tồn tại, các thuộc tính của phần tử sẽ khôi phục về quy tắc khớp, nếu có, trong tầng hiện tại hoặc về nguồn gốc style trước đó.

Định nghĩa hình thức

Initial value	There is no practical initial value for it.
Applies to	all elements
Inherited	no
Computed value	as the specified value applies to each property this is a shorthand for.
Animation type	as each of the properties of the shorthand (all properties but `unicode-bidi` and `direction`)

Cú pháp hình thức

all = 
  initial       |
  inherit       |
  unset         |
  revert        |
  revert-layer  |
  revert-rule

Ví dụ

Trong ví dụ này, tệp CSS chứa kiểu dáng cho phần tử <blockquote> ngoài một số kiểu dáng cho phần tử <body> cha. Các đầu ra khác nhau trong phần Kết quả minh họa cách kiểu dáng của phần tử <blockquote> bị ảnh hưởng khi các giá trị khác nhau được áp dụng cho thuộc tính all bên trong quy tắc blockquote.

HTML

html

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

CSS

css

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
  margin: 0;
  padding: 0;
}

blockquote {
  background-color: skyblue;
  color: red;
}

Kết quả

A. Không có thuộc tính `all`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}

Đây là tình huống không có thuộc tính all nào được đặt bên trong quy tắc blockquote. Phần tử <blockquote> sử dụng kiểu dáng mặc định của trình duyệt cùng với màu nền và màu văn bản cụ thể được chỉ định trong stylesheet. Nó cũng hoạt động như một phần tử block: văn bản theo sau nó nằm bên dưới nó.

B. `all: initial`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: initial;
}

Với thuộc tính all được đặt thành initial trong quy tắc blockquote, phần tử <blockquote> không còn sử dụng kiểu dáng mặc định của trình duyệt nữa: nó là phần tử nội tuyến bây giờ (giá trị ban đầu), background-color của nó là transparent (giá trị ban đầu), font-size của nó là medium, và color của nó là black (giá trị ban đầu).

C. `all: inherit`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: inherit;
}

Trong trường hợp này, phần tử <blockquote> không sử dụng kiểu dáng mặc định của trình duyệt. Thay vào đó, nó kế thừa các giá trị style từ phần tử <body> cha: nó là phần tử block bây giờ (giá trị kế thừa), background-color của nó là #F0F0F0 (giá trị kế thừa), font-size của nó là small (giá trị kế thừa), và color của nó là blue (giá trị kế thừa).

D. `all: unset`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: unset;
}

Khi giá trị unset được áp dụng cho thuộc tính all trong quy tắc blockquote, phần tử <blockquote> không sử dụng kiểu dáng mặc định của trình duyệt. Vì background-color là thuộc tính không kế thừa và font-size và color là các thuộc tính kế thừa, phần tử <blockquote> là phần tử nội tuyến bây giờ (giá trị ban đầu), background-color của nó là transparent (giá trị ban đầu), nhưng font-size của nó vẫn là small (giá trị kế thừa), và color của nó là blue (giá trị kế thừa).

E. `all: revert`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: revert;
}

Khi thuộc tính all được đặt thành revert trong quy tắc blockquote, quy tắc blockquote được coi là không tồn tại và các giá trị thuộc tính styling được kế thừa từ những giá trị áp dụng cho phần tử cha <body>. Vì vậy phần tử <blockquote> được tạo kiểu như một phần tử block, với background-color #F0F0F0, font-size small, và color blue - tất cả các giá trị được kế thừa từ quy tắc body.

F. `all: revert-layer`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: revert-layer;
}

Không có tầng cascade nào được định nghĩa trong tệp CSS, vì vậy phần tử <blockquote> kế thừa kiểu dáng từ quy tắc body khớp. Phần tử <blockquote> ở đây được tạo kiểu như một phần tử block, với background-color #F0F0F0, font-size small, và color blue - tất cả các giá trị được kế thừa từ quy tắc body. Tình huống này là ví dụ về trường hợp khi all được đặt thành revert-layer hoạt động giống như khi all được đặt thành revert.