CSS rang moduli mualliflarga html elementlarining rangi va ravshanligini, shuningdek rang qiymatlarini belgilash imkonini beruvchi qiymatlarni aniq tasvirlab beradi.
Quvvat rangi
1. Ustuvor ranglar: yorqinlik rangi
Vakolat turli xil rang uzatish tizimlaridan foydalangan holda shrift rangini o'rnatadi. Kuchlilik matn elementining rangiga ishora qiladi. Bundan tashqari, u rang uchun ma'no yaratadigan har qanday boshqa kuchlar uchun potentsial bilvosita ma'noni (currentColor) ta'minlash uchun ishlatiladi.
Quvvat pasayib bormoqda.
2. Rangning ahamiyati
2.1. Asosiy kalit so'zlar
Asosiy kalit so'zlar ro'yxati quyidagi qiymatlarni o'z ichiga oladi:
| Ism | HEX | RGB | Kolir |
|---|---|---|---|
| qora | #000000 | 0,0,0 | |
| kumush | #C0C0C0 | 192,192,192 | |
| kulrang | #808080 | 128,128,128 | |
| oq | #FFFFFF | 255,255,255 | |
| to'q qizil | #800000 | 128,0,0 | |
| qizil | #FF0000 | 255,0,0 | |
| siyohrang | #800080 | 128,0,128 | |
| fuşya | #FF00FF | 255,0,255 | |
| yashil | #008000 | 0,128,0 | |
| Laym | #00FF00 | 0,255,0 | |
| zaytun | #808000 | 128,128,0 | |
| sariq | #FFFF00 | 255,255,0 | |
| dengiz floti | #000080 | 0,0,128 | |
| ko'k | #0000FF | 0,0,255 | |
| ko'k | #008080 | 0,128,128 | |
| suv | #00FFFF | 0,255,255 |
Ranglarning nomlari katta-kichik harflarga sezgir emas.
Sintaksis
Rang: zangori;
2.2. Rangning raqamli qiymatlari
2.2.1. Rangli modellar RGB
O'n oltilik formatdagi RGB qiymat formati # belgisi, undan keyin uch yoki olti o'n oltilik belgilar. Uch xonali RGB belgisi #rgb olti xonali shaklga #rrggbb nol qo'shish orqali emas, raqamlarni nusxalash orqali o'zgartiriladi. Masalan, #fb0 #ffbb00 gacha kengayadi. Bu oq #ffffff qisqa #ffff yozuvida ko'rsatkich sifatida ishlatilishini kafolatlaydi va displey rangiga qarab har qanday farqlarni olib tashlaydi.
Funktsional belgining RGB qiymat formati rgb (keyin uchta raqamli qiymatlar (yoki uchta butun qiymat yoki uch yuzdan bir qiymat) ning ajratilgan ro'yxati, so'ngra belgi). Butun son qiymati 255 100% va F yoki FF ga oʻn oltilik tizimda mos keladi:
RGB(255,255,255) = RGB(100%, 100%, 100%) = #FFF
Raqamli qiymatlar yonida bo'sh belgilarga ruxsat beriladi.
Veb-dizayn rangni taqdim etishning bir qancha usullariga ega
HEX 16 ga asoslangan ranglarni taqdim etish uchun o'n oltilik tizimdir. Bu tizim uchun raqamli raqamni 16 ga oshirish uchun 0 dan 9 gacha arab o'nlik raqamlari va A dan F gacha lotin harflari ishlatiladi. Veb-dizayn uchun 16 asosiy (kalit) ranglar olinadi, shuning uchun o'n oltinchi daraja Rang kodi #RRGGBB bo'lib, bu erda har bir juft o'z qismi uchun rangni ifodalaydi: RR - qizil, GG - yashil va BB - ko'k. Teri rangi 00 dan FF gacha.
Veb-dizayndagi rangning yana ikkita ko'rinishi: RGB (*,*,*) ko'rinishida, bu erda rangning "*" qismi 0 dan 255 gacha bo'lgan o'nlab raqamlar bilan va rang nomlari bilan ifodalanadi. Ingliz.
Rangli tasvirni yaratishda asosiy muammo ranglarni turli turdagi kompyuterlar, monitorlar va brauzerlarga to'g'ri uzatishdir. Agar brauzer rangni to'g'ri ko'rsatolmasa, u shunga o'xshashni tanlaydi yoki bir nechta ranglarni aralashtiradi. Yoki uni butunlay boshqa rang bilan almashtirishingiz mumkin.
Jadval 16 asosiy rang, barcha brauzerlarda vikoristed
| Ism | Kolir | Hex | (RGB) |
| Aqua (morska hvilya) | #00FFFF | (000,255,255) | |
| Qora | #000000 | (000,000,000) | |
| Moviy | #0000FF | (000,000,255) | |
| Fuşya (magenta) | #FF00FF | (255,000,255) | |
| Kulrang (seriya) | #808080 | (128,128,128) | |
| Yashil | #008000 | (000,128,000) | |
| Ohak (yorqin yashil) | #00FF00 | (000,255,000) | |
| Maroon (quyuq bordo) | #800000 | (128,000,000) | |
| To'q rangli (to'q ko'k) | #000080 | (000,000,128) | |
| Zaytun | #808000 | (128,128,000) | |
| Siyohrang | #800080 | (128,000,128) | |
| Qizil (qizil) | #FF0000 | (255,000,000) | |
| Kumush | #C0C0C0 | (192,192,192) | |
| Teal (kulrang-yashil) | #008080 | (000,128,128) | |
| Oq | #FFFFFF | (255,255,255) | |
| Sariq (jovtiy) | #FFFF00 | (255,255,000) |
Jadval siyohrang ranglar va ranglar
| Ism | Kolir | Hex | (RGB) |
| Magenta (binafsha) | #FFCBDB | (255,203,219) | |
| Magenta (binafsha) | #FF0099 | (255,000,153) | |
| Magenta (magenta) | #F95A61 | (249,090,097) | |
| Fuşya (fuchsia) | #FF00FF | (255,000,255) | |
| Movein (anilin binafsha rang) | #EF0097 | (239,000,151) | |
| Qizil ikra (to'q sariq-zang) | #FF91A4 | (255,145,164) | |
| Cenise (binafsha rang soyasi) | #DE3163 | (153,149,140) | |
| Baqlajon (baqlajon) | #990066 | (153,000,132) | |
| Lavanda qizarishi (qizil-lavanta) | #FFF0F5 | (255,240,245) | |
| Lilak (boozkoviy) | #C8A2C8 | (200,162,200) | |
| Magenta (magenta) | #FF008F | (255,000,143) | |
| Orkide (orkide) | #DA70D6 | (218,112,214) | |
| Qizil-binafsha (binafsha-qizil) | #C71585 | (199,021,133) | |
| Sanguine | #92000A | (146,000,010) | |
| Qushqo'nmas (binafsha rang soyasi) | #D8BFD8 | (185,211,238) | |
| Binafsha-baqlajon (binafsha rang) | #991199 | (153,017,153) | |
| Rosa vivo (inkubatsiya qilingan shoxli o't) | #FF007F | (255,000,127) | |
| Lavanda-atirgul (binafsha rang) | #FBA0E3 | (108,123,139) | |
| Mountbatten pushti | #997ABD | (153,122,141) |
Jadval kulrang ranglar va ranglar
| Ism | Kolir | Hex | (RGB) |
| Kulrang (Suriya) | #808080 | (128,128,128) | |
| Kulrang (Suriya) | #bebebe | (190,190,190) | |
| (Siry-vidtinok) | #858585 | (133,133,133) | |
| Grey33 (Suriya-33) | #545454 | (084,084,084) | |
| (Sirogo shifer) | #708090 | (112,128,144) | |
| (Kvartsovlar) | #99958s | (153,149,140) | |
| (Svetlo siriy) | #bbbbbb | (187,187,187) | |
| (Sriblyasty) | #c0c0c0 | (192,192,192) | |
| (Siro-oq) | #f0f0f0 | (240,240,240) | |
| (Borodiy Abdel-Kerim) | #e0e0e0 | (224,224,224) | |
| Ochiq kulrang (och kulrang) | #d3d3d3 | (211,211,211) | |
| LightStateGray() | #778899 | (119,136,153) | |
| StateGray-1 (Blido-cornflower blue1) | #c6e2ff | (198,226,255) | |
| StateGray-2 (Blido-cornflower blue2) | #b9d3ee | (185,211,238) | |
| StateGray3() | #9fb6cd | (159,182,205) | |
| StateGray4() | #6c7b8b | (108,123,139) |
Ushbu sahifada HTML, CSS, JavaScript, Flash va boshqalar kabi veb-ishlab chiquvchi tillarida ranglarni belgilash uchun ishlatilishi mumkin bo'lgan kalit so'zlar bilan jadval mavjud.
Qadimgi spetsifikatsiyalarda WC3 konserni faqat 16 ta kalit so'zdan iborat edi, ularga qo'shimcha ravishda HTML va CSS-da ranglar o'rnatilgan. Bundan tashqari, ko'proq joriy spetsifikatsiyalar, rang nomlarini belgilash uchun yana 130 ta kalit so'zlar qo'shildi. Bu erda ranglar, o'n oltilik va RGB kodlarining nomlari ko'rsatilgan jadval mavjud.
CSS qoidalariga rioya qilgan holda, rang nomlari katta-kichik harflarga sezgir emas. IndianRed va indianred ranglari uchun yozuvlar teng.
Shuni ham ta'kidlash kerakki, jadvaldagi 146 ta kalit so'zdan aslida kamroq ranglar mavjud. Bu shuni anglatadiki, bu kalit so'zlar bir xil rangni anglatadi. Shunday qilib, Grey va Grey nomlari #808080 kodi bilan 50 hex rangni bildiradi va Magenta so'zi #FF00FF hex kodiga mos keladigan HTML rangi Fuchsia bilan sinonimdir. Shuningdek, Aqua va Cyan so'zlari bilan sinonim bo'lgan hidlar #00FFFF kodiga mos keladi.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Ranglarni o'rnatish uchun o'n oltilik kodlardagi raqamlar ishlatiladi. O'ninchi tizim o'rniga o'n oltinchi tizim, nomidan ko'rinib turibdiki, 16 raqamiga asoslanadi. Raqamlar paydo bo'ladi: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. 10 dan 15 gacha raqamlar lotin harflari bilan almashtiriladi. O'n oltinchi sistemada 15 dan katta sonlar ikkita raqamni bitta raqamga birlashtirish orqali hosil bo'ladi. Masalan, o'ninchi tizimdagi 255 raqami o'n oltinchi tizimdagi FF raqami bilan tasdiqlanadi. Belgilangan raqam tizimi bilan chalkashmaslik uchun o'n oltinchi raqam oldiga # belgisini qo'ying, masalan #666999. Uch rangdagi terilar - qizil, yashil va ko'k - 00 dan FF gacha qiymatlarni olishi mumkin. Shu tarzda, tayinlangan rang uchta omborga bo'linadi #rrggbb, bu erda birinchi ikkita belgi rangning qizil komponentini, o'rta ikkitasi - yashil va qolgan ikkitasi - ko'kni bildiradi. Belgini qo'shish mumkin bo'lgan #rgb qisqa shaklidan foydalanishga ruxsat beriladi. Shunday qilib, rekord #fe0 izi #ffee00 sifatida baholanadi.
Nomi uchun
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Brauzerlar o'z nomlari orqasida turli xil ranglarni qo'llab-quvvatlaydi. Jadvalda 1 nom, o'n oltilik kod, RGB, HSL formatidagi qiymatlar va tavsif ko'rsatilgan.
| men | Kolir | Kod | RGB | HSL | Tavsif |
|---|---|---|---|---|---|
| oq | #ffffff yoki #fff | rgb(255,255,255) | hsl(0,0%,100%) | Bily | |
| kumush | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | Suriya | |
| kulrang | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Toʻq kulrang | |
| qora | #000000 yoki #000 | rgb(0,0,0) | hsl(0,0%,0%) | Chorny | |
| to'q qizil | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | To'q qizil | |
| qizil | #ff0000 yoki #f00 | rgb(255,0,0) | hsl(0,100%,50%) | qizil oltin | |
| apelsin | #ffa500 | rgb(255,165,0) | hsl(38,8,100%,50%) | apelsin | |
| sariq | #ffff00 yoki #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Jovtiy | |
| zaytun | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Zaytun | |
| Laym | #00ff00 yoki #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Och yashil | |
| yashil | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Zeleniy | |
| suv | #00ffff yoki #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Blakitny | |
| ko'k | #0000ff yoki #00f | rgb(0,0,255) | hsl(240,100%,50%) | Moviy | |
| dengiz floti | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Toʻq koʻk | |
| ko'k | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Moviy-yashil | |
| fuşya | #ff00ff yoki #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Rozheviy | |
| siyohrang | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | binafsha |
Qo'shimcha yordam uchun RGB
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Rang, zafar va qizil, yashil va ko'k qiymatlarni o'ndan birida aniqlashingiz mumkin. Uch rangli komponentli teri 0 dan 255 gacha qiymatlarni oladi. Bundan tashqari, rangni yuqori sifatli rang uchun o'rnatish mumkin, bu 255 raqamiga 100% mos keladi. Rgb kalit so'zi dastlab ko'rsatilgan va keyin rangli komponentlar bo'lib ko'rinadigan qurollar uchun, masalan, rgb (255, 128, 128) yoki RGB (100%, 50%, 50%).
RGBA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
RGBA formati sintaksisi bo'yicha RGB ga o'xshaydi, lekin elementning ravshanligini ko'rsatadigan alfa-kanalni o'z ichiga oladi. 0 qiymatlari aniqlikning oshishini, 1 - ravshanlikning etishmasligini va 0,5 darajasidagi oraliq qiymatlar - to'liq ravshanlikni ko'rsatadi.
CSS3 uchun RGBA kengaytmalari ushbu versiya uchun CSS kodining o'zini tekshirishni talab qiladi. E'tibor bering, CSS3 standarti hali ishlab chiqilmoqda va o'zgarishi mumkin. Masalan, fon rangi pikseliga qo'shilgan RGB formatining rangi tekshiruvdan o'tishi kerak, ammo endi fon pikseliga qo'shimchalar yo'q. Bunday holda, brauzerlar odatda bu va boshqa quvvat uchun rangni to'g'ri tushunishadi.
HSL
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSL formati Hue, Saturate va Lightness birinchi harflari sharafiga nomlangan. Rang qoziqdagi rang bilan bir xil (1-rasm) va darajalarda ko'rsatilgan. 0 ° qizil, 120 ° yashil va 240 ° ko'k. Rang qiymati 0 dan 359 gacha o'zgartirilishi mumkin.
Kichik 1. Rangli doira
Intensivlik rangning intensivligi bo'lib, u 0% dan 100% gacha o'zgarib turadi. 0% qiymati ranglar va kulrang soyalar mavjudligini anglatadi, 100% to'yinganlikning maksimal qiymati.
Yengillik rang qanchalik yorqinligini belgilaydi va 0% dan 100% gacha bo'lgan oraliqlarda ko'rsatiladi. Ranglarni quyuq va yuqori qiymatlarni ochiq saqlash muhim, 0% va 100% ekstremal qiymatlar qora va oq rangni ko'rsatadi.
HSLA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSLA formati sintaksisi bo'yicha HSL formatiga o'xshaydi, lekin elementning ravshanligini ko'rsatadigan alfa-kanalni o'z ichiga oladi. 0 qiymatlari aniqlikning oshishini, 1 - ravshanlikning etishmasligini va 0,5 darajasidagi oraliq qiymatlar - to'liq ravshanlikni ko'rsatadi.
RGBA, HSL va HSLA formatlari uchun rang qiymatlari CSS3-ga qo'shiladi, shuning uchun ushbu formatlarni o'zgartirganda, kodni to'g'ri versiya bilan tekshiring.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Oldindan
Veb-saytda keltirilgan barcha sher baliq ovlash usullari nazariy va hisoblash usullariga asoslangan. Mualliflar ulardan foydalanishda sizning xavfsizligingizga kafolat bermaydi va natijalar uchun javobgarlikni o'z zimmasiga olmaydi. Esingizda bo'lsin, sher - kulba va beparvo jonzot!
Ushbu dumba natijasi rasmda ko'rsatilgan. 2.
Kichik 2. Veb-sahifadagi ranglar
Noutbuklar
