Fan: web dasturlashga kirish Bajardi: Bakiev Xursandbek Mamatsaloevich Tekshirdi

Bo'shliqlar bilan ajratilgan rang qiymatlari

Odatda vazifalar rgb()va hsl()chaqiruvlar, ularga vergul bilan ajratilgan qiymatlarni etkazish. Bunday xususiyatlarni chaqirishning yana bir usuli bor, bu juda yangi, ammo ajoyib brauzerni qo'llab-quvvatlaydi. Uni ishlatganda, funktsiyalarga uzatiladigan qiymatlar bo'shliqlar bilan taqsimlanadi.

/* gacha */

.element {
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 1);
}

/* so’ng */

div {
background-color: rgb(0 0 0);
background-color: rgb(0 0 0 / 0.5);
background-color: rgb(0 0 0 / 50%);
}

E'tibor bering, shaffoflik ma'lumotlarini oblik xususiyatidan foydalanib ajratish faqat qo'shimcha imkoniyatdir. U faqat rangning shaffofligini sozlash kerak bo'lganda ishlatilishi kerak.

Ranglarni tavsiflashning yangi usuli eskisidan yaxshiroqdir. Uni ishlatish tavsiya etiladi, chunki rangni (va) tavsiflash uchun ishlatiladigan yangi CSS funktsiyalarilab()lch()color()faqat bo'sh joylar bilan ajratilgan qiymatlar bilan ishlaydi. Shuning uchun, bu formatni qo'llab-quvvatlamaydigan brauzerlar uchun zaxira variantni taqdim etadigan ranglarni tavsiflash uchun ushbu formatga foydalanish foydali bo'ladi.

Global qiymatlar (inherit, boshlang'ich, unset)

Element ota-ona elementidan rangni meros qilib olish uchun biz global qiymatdan foydalanishimiz mumkin inherit. Rangni tiklash uchun biz qiymatlarga murojaat qilishimiz mumkin initial unset. Keling, ushbu qiymatlardan foydalanishning xususiyatlarini tushunishimizga yordam beradigan misolni ko'rib chiqaylik.

Inherit kalit so'z

Sarlavha, tavsif va havola mavjud bo'lgan sahifaning yuqori qismidagi HTML kodi:

Page title

Some description content

View all

Mana uslub:

.hero { color: #222; }

colorOta-ona elementining xususiyati qiymatga o'rnatilganligini hisobga olsak, #222bola elementlarining rangi ,elementlar