Rang kalit so‘zlari
CSS rang kalit so‘zlari
CSS’da color, background-color va border-color kabi xossalar bilan ishlatilishi mumkin bo‘lgan ba’zi maxsus oldindan belgilangan rang kalit so‘zlari mavjud.
Maxsus kalit so‘zlar quyidagilar:
-
transparent currentcolorinherit
transparent kalit so‘zi
transparent kalit so‘zi rangni shaffof qilish uchun ishlatiladi. Bu ko‘pincha element uchun shaffof fon rangi yaratishda ishlatiladi.
Misol
Bu yerda <div> elementining fon rangi to‘liq shaffof bo‘ladi va fon rasmi orqali ko‘rinadi:
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
}
O‘zingiz sinab ko‘ring »
Eslatma: transparent kalit so‘zi rgba(0,0,0,0) ga teng. RGBA rang qiymatlari rang shaffofligini belgilovchi alfa kanalli RGB rang qiymatlarining kengaytmasidir. Bu haqda CSS RGB va CSS ranglari boblarimizda ko‘proq o‘qing.
currentcolor kalit so‘zi
currentcolor kalit so‘zi elementning color xossasi joriy qiymatini saqlab turuvchi o‘zgaruvchiga o‘xshaydi.
Bu kalit so‘z ma’lum rang element yoki sahifada bir xil bo‘lishini xohlasangiz foydali bo‘lishi mumkin.
Misol
Bu misolda <div> elementining chegara rangi ko‘k bo‘ladi, chunki <div> elementining matn rangi ko‘k:
div {
color: blue;
border: 10px solid currentcolor;
}
O‘zingiz sinab ko‘ring »
Misol
Bu misolda <div> elementining fon rangi body elementining joriy rang qiymatiga o‘rnatilgan:
body {
color: purple;
}
div {
background-color:
currentcolor;
}
O‘zingiz sinab ko‘ring »
Misol
Bu misolda <div> elementining chegara rangi va soya rangi body elementining joriy rang qiymatiga o‘rnatilgan:
body {
color: green;
}
div {
box-shadow: 0px 0px
15px currentcolor;
border: 5px solid currentcolor;
}
O‘zingiz sinab ko‘ring »
inherit kalit so‘zi
inherit kalit so‘zi xossaning qiymatini ota elementdan meros olishi kerakligini belgilaydi.
inherit kalit so‘zi istalgan CSS xossasi uchun va istalgan HTML elementida ishlatilishi mumkin.
Misol
Bu misolda <span> elementining chegara sozlamalari ota elementdan meros qilib olinadi:
div {
border: 2px solid red;
}
span {
border:
inherit;
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!