var()
CSS var() funksiyasi CSS o‘zgaruvchisining qiymatini qo‘yish uchun ishlatiladi.
Misol
Avval "--main-bg-color" nomli global o‘zgaruvchini e’lon qiling, so‘ngra uslublar jadvalining keyingi qismida o‘zgaruvchi qiymatini qo‘yish uchun var() funksiyasidan foydalaning:
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar funksiyani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Funksiya | |||||
|---|---|---|---|---|---|
| var() | 49 | 15 | 31 | 9.1 | 36 |
CSS sintaksisi
var(--name, value)
| Qiymat | Tavsif |
|---|---|
| --name | Majburiy. O‘zgaruvchi nomi (ikkita chiziqcha bilan boshlanishi kerak) |
| value | Ixtiyoriy. Zaxira qiymat (o‘zgaruvchi topilmasa ishlatiladi) |
| Versiya: | CSS3 |
|---|
Ko‘proq misollar
Misol
Bir nechta CSS o‘zgaruvchisi qiymatini qo‘yish uchun var() funksiyasidan foydalanadigan yana bir misol:
: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);
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS o‘zgaruvchilari
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!