Hàm CSS var()

Định nghĩa và cách sử dụng

CSS của var() Hàm được sử dụng để chèn giá trị biến CSS.

Mô hình

Ví dụ 1

Trước hết, khai báo biến toàn cục có tên là --main-bg-color, sau đó sử dụng trong bảng phong cách. var() Chèn giá trị biến này vào hàm:

:root {
  --main-bg-color: coral;
}
#div1 {
  background-color: var(--main-bg-color);
}
#div2 {
  background-color: var(--main-bg-color);
}

Thử ngay

Ví dụ 2

Một ví dụ khác sử dụng var() Ví dụ về việc chèn nhiều giá trị biến CSS:

:root {
  --main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}
#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

Thử ngay

Ngữ pháp CSS

var(--name, value)

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ hàm này hoàn toàn.

Trang liên quan

Giáo trình:Biến CSS