Hàm CSS var()
Ví dụ
Đầu tiên, khai báo một biến toàn cục có tên "--main-bg-color", sau đó sử dụng hàm var() để chèn giá trị của biến sau vào biểu định kiểu:
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
Hãy tự mình thử »Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Hàm var() được sử dụng để chèn giá trị của biến CSS.
Phiên bản: | CSS3 |
---|
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ chức năng.
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Cú pháp CSS
var(-- name, value )
Value | Description |
---|---|
name | Required. The variable name (must start with two dashes) |
value | Optional. The fallback value (used if the variable is not found) |
Thêm ví dụ
Ví dụ
Một ví dụ khác sử dụng hàm var() để chèn một số 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);
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Biến CSS