Matn uchun rangni o'rnating. Shrift tegining rang atributi. CSS-da matn uchun rangni o'rnatish. Ranglarni taqdim etish usullari RGB yordamida ranglarni belgilash

Sintaksis

Rang: ko'k;

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 qiymatning (yoki uchta butun qiymat yoki uch yuzinchi qiymat) ajratilgan ro'yxati, keyin esa 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.

Kitobning birinchi qismida, ba'zi hollarda, biz CSS-da matn rangini qanday o'rnatishni allaqachon ko'rsatdik. Bu erda hech qanday murakkab narsa yo'q: sizga rang kuchi va matnni cheklamoqchi bo'lgan rangning qiymati kerak.

P (rang: #211C18; )

Misolda #211C18 qiymati o'n oltilik rang kodini bildiradi. Agar siz o'n olti xonali sanoq tizimi bilan allaqachon tanish bo'lsangiz, keyingi xatboshini o'qishni o'tkazib yuborishingiz mumkin. Shuningdek, biz Internetda ranglarni taqdim etishning boshqa usullarini bilamiz - rangli modellar (RGB, HSL) va kalit so'zlardan foydalanish. Ushbu ma'lumot yangi boshlanuvchilar uchun foydali bo'ladi va o'qishdan oldin tavsiya etiladi.

O'n olti rang (olti burchakli)

O'n oltinchi tizim raqam ( oltilik, oltilik) 16 raqamiga asoslanadi. Oʻn oltilik qiymatni yozish uchun 16 ta belgidan foydalaniladi: 0 dan 9 gacha arab raqamlari va lotin alifbosining birinchi harflari (A, B, C, D, E, F). O'n oltilik formatdagi rang 00 dan FF gacha bo'lgan uchta ikki xonali raqam sifatida yoziladi (ular oldida # belgisi bo'lishi kerak), bu uchta komponentga mos keladi: Qizil, Yashil, Moviy (RGB rang modeli). Aks holda, rangni #RRGGBB deb yozish mumkin ko'rinadi, bu erda birinchi belgilar juftligi qizil rovonni, ikkinchisi - yashil ravonni, uchinchisi - ko'k ravonni anglatadi. Olingan rang - bu uchta rangning kombinatsiyasi.

Hex-quits yozuvini qisqartirish

O'nlab o'n olti rang qiymatlarini qisqacha yozish mumkin. Buning uchun #RRGGBB kabi yozuvni #RGB ga o'zgartiring. Agar olti burchakli raqamda bir xil belgilarning uchta jufti bo'lsa, ushbu parametrdan foydalanishingiz mumkin.

Qisqartirilgan ariza shakli tez-tez to'ldirilishi ko'zda tutilgan va ma'lumot uchun biz imkon qadar qisqa vaqt ichida bir qator arizalarni taqdim etamiz. Gapirishdan oldin, ranglarning olti burchakli qiymatlari ro'yxatdan o'tish uchun sezgir emas - siz ham katta, ham kichik harflarni tanlashingiz mumkin, hamma narsa sizning didingiz va zavqingizga bog'liq bo'ladi.

Hex-quits qisqacha yozuvini ilova qiling:

Rangli model RGB

CSS rangini qo'shishning yana bir usuli - o'nlab RGB qiymatlaridan foydalanish (Qizil, Moviy, Yashil). Buning uchun siz kuch rangidan keyin rgb kalit so'zini, so'ngra qo'llarda va kim orqali yozishingiz kerak - 0 dan 255 gacha bo'lgan uchta raqam, bu qizil, yashil va ko'k ranglarning intensivligini bildiradi (r). , g, b). Raqam qanchalik baland bo'lsa, rang shunchalik kuchli bo'ladi. Masalan, yorqin yashil rangni tanlash uchun siz quyidagilarni yozishingiz kerak:

P (rang: rgb(0, 255, 0); )

Va sarg'ish rangli o'qi quyidagi ma'noga ega:

Rang: rgb(94, 81, 3); /* pastda – o‘n oltinchi ko‘rinishda yozilgan rang: */ rang: #5E5103;

Qora rang uchun qiymatlar (0, 0, 0), oq rang uchun esa (255, 255, 255) yoziladi. Shuningdek, ushbu qiymatlarni yuzlab ko'rsatishga ruxsat beriladi. Shunday qilib, 255 raqami 100% ni bildiradi, shuning uchun siz boshqa rangni o'rnatishingiz mumkin:

Rang: rgb (100%, 100%, 100%);

Ranglarning ma'nosini bilib oling

Ehtimol sizda ovqat bordir: yulduzlar ranglarning barcha ma'nolarini oladimi? Ruhsiz uxlash grafik muharrirlar Ranglar va rang sxemalarini tanlashda yordam beradigan onlayn xizmatlar ham mavjud. Eng buyuklaridan biri mashhur dasturlar, unda siz ma'lum bir rangni tanlashingiz va uning RGB qiymatini, hex va boshqalarni tanlashingiz mumkin - Adobe Photoshop. Shu bilan bir qatorda, siz nafaqat rangni, balki butun narsani osongina tanlashingiz mumkin bo'lgan maxsus saytlar mavjud. rang sxemasi. Kengaytirilgan butt – Adobe Color CC xizmati.

Rangli model RGBA

RGBA formati uchun rangni RGB bilan bir xil tarzda o'rnatishingiz mumkin. RGBA ning RGB uchun ahamiyati rangning ravshanligi uchun mas'ul bo'lgan alfa kanalining mavjudligi bilan bog'liq. Ko'rinish 0 dan 1 gacha bo'lgan oraliqda qo'shimcha raqam bilan o'rnatiladi, bu erda 0 ko'proq ravshanlikni, 1 esa aniqlik yo'qligini bildiradi. 0,5 turdagi oraliq qiymatlar sizga vizual ko'rinishni o'rnatishga imkon beradi (qisqartirilgan yozuvga ruxsat beriladi, noldan keyin, nuqtadan keyin - .5). Masalan, matn rangli va ravshan bo'lishi uchun siz rgba kalit so'zini va quvvat rangidan keyin rang qiymatini yozishingiz kerak:

P (rang: rgba(94, 81, 3, .9); )

RGBA ning salbiy tomoni shundaki, u qo'llab-quvvatlamaydi Internet-brauzer Explorer versiyalari 8 va undan oldingi. Ayniqsa IE8 uchun siz quyidagi yechimni amalga oshirishingiz mumkin:

P (rang: rgb(94, 81, 3); rang: rgba(94, 81, 3, .9); )

Ilovaning birinchi kuchi IE8 brauzeriga beriladi, u matnni kerakli rangda ko'rsatadi, ammo aniqliksiz. Va RGBA-ni tushunadigan brauzerlar tushunchadan biroz kuchga ega bo'ladi.

Rangli modellar HSL (HSLA)

HSL rang modelining koordinatalari (Hue, Saturation, Lightness) yordamida CSS-da rangni ham o'rnatishingiz mumkin. Bu shunday yozilgan:

P (rang: hsl(165, 100%, 50%); )

Qo'llardagi birinchi raqam ohangni (rang) anglatadi va darajalarda ko'rsatilgan (raqamlar diapazoni 0 dan 359 gacha). Rang rangi qanday ko'rinishini taxmin qilsangiz, darajalarning o'zlari nima uchun farqlanishini tushunishingiz oson bo'ladi:

Qo'llardagi yana bir uchinchi raqam, shubhasiz, to'yinganlik va yengillikni anglatadi. Ularning qiymatlari 0 dan 100 gacha bo'lgan shkalalarda o'rnatiladi. To'yinganlik qiymati qanchalik past bo'lsa, rang shunchalik o'chiriladi. Nolga teng bo'lgan to'yinganlik qiymati, rang bilan bir xil qiymatga ega bo'lmagan kulrang rangga tushiriladi. Qo'shimcha yorug'lik qiymatlari uchun rangning yorqinligini belgilashingiz mumkin. Past qiymatlar quyuq ranglarga olib keladi, yuqori qiymatlar ochiq ranglarga olib keladi. Yengillik uchun 100% qiymati oq rang, 0% qora degan ma'noni anglatadi.

HSLA rang modeli HSL bilan deyarli bir xil ishlaydi, lekin unda RGBA ga o'xshash alfa kanali mavjud bo'lib, unga qo'shimcha ravishda siz rangning ravshanligini belgilashingiz mumkin, bu diapazonda kerakli qiymatlarni ko'rsatadi. 0 dan 1 gacha:

P (rang: hsla(165, 100%, 50%, .6); )

HSL va HSLA barcha brauzerlar tomonidan qo'llab-quvvatlanadi, shu jumladan Internet Explorer 8 va undan oldingi versiyalar.

Standart HTML ranglari

Internetda chiptalarni taqdim etishning yana bir usuli kalit so'zlar, qo'shimcha ma'lumot olish uchun element rangini belgilashingiz mumkin. Butt:

P (rang: qora;)

Berilgan rang qiymatida yozilishi mumkin bo'lgan 16 ta standart rang mavjud:

Ushbu ranglar barcha brauzerlar tomonidan qo'llab-quvvatlanadi. Ulardan tashqari, turli xil ranglar uchun 130 ga yaqin qo'shimcha kalit so'zlar mavjud. Ushbu ranglarning to'liq jadvalini W3C provayderidan olish mumkin.

Bunday kalit so'zlardan foydalanish maqbuldir, ammo har qanday so'z brauzer tomonidan qabul qilinmasligi xavfi mavjud. Shuning uchun kalit so'zlar o'rniga o'n oltilik rang kodini yozish tavsiya etiladi.

Qoplar

CSS-da matnning rangi qo'shimcha rang kuchi yordamida o'rnatiladi, shuning uchun qiymat bir necha usullar bilan yozilishi mumkin - o'n oltilik (oltilik) formatda, RGB yoki HSL formatida yoki kalit so'zni kiritish orqali. Qo'shimcha kalit so'zdan keyin ko'rsatilgan rangning noto'g'ri ko'rinishini oldini olish uchun olti burchakli qiymatni ko'rsatish yaxshiroqdir.

Bundan tashqari, elementning ko'rinishini qo'shimcha alfa-kanal (RGBA va HSLA formatlari) ortida o'rnatishingiz mumkin. Buning uchun IE8 brauzeri mavjud dastlabki versiyalari RGBA, HSL va HSLA formatlari qo'llab-quvvatlanmaydi.

U HTML rangi Siz uchta usulni o'rnatishingiz mumkin:

Yogo uchun HTMLda rang kodini nomlayman

Turli xil ranglar ularning nomi bilan ko'rsatilishi mumkin, vikorista rang nomining ma'nosi sifatida Ingliz tili. Eng keng tarqalgan kalit so'zlar: qora, oq, qizil, yashil, ko'k va boshqalar.

Matn rangi - qizil

Konsortsium standartiga muvofiq eng mashhur ranglar Butun dunyo bo'ylab pavutini(English World Wide Web Consortium, W3C):

Turli xil rangdagi vikoristonning dumbalari:

Butt: ismning orqasidagi rangga hurmat

• O'zingiz sinab ko'ring »

Qizil aphid ustida bosh

To'q sariq fonda sarlavha

Ohak fonida sarlavha

Qora shira ustidagi oq matn

Qizil aphid ustida bosh

To'q sariq fonda sarlavha

Ohak fonida sarlavha

Qora shira ustidagi oq matn

Qo'shimcha RGB uchun rang nazorati

Monitorda turli xil ranglarni ko'rsatishda RGB palitrasi asos sifatida ishlatiladi. Siz tanlagan rangingizdan qat'i nazar, uchta asosiy rang mavjud: R - qizil (qizil), G - yashil, B - ko'k. Teri rangi yorqinligi bir bayt bilan o'rnatiladi va shuning uchun 0 dan 255 gacha qiymatlarni kiritish mumkin. Masalan, RGB (255,0,0) qizil rangda ko'rsatiladi, chunki qizil rang eng yuqoriga kiritilgan qiymati (255) va boshqalar o'rnatiladi í 0 ga Shuningdek, siz tasvir uchun rangni o'rnatishingiz mumkin. Parametrlardan teri mos keladigan rangning yorqinlik darajasini ko'rsatadi. Masalan: rgb(127, 255, 127) va rgb(50%, 100%, 50%) qiymatlari o'rtacha to'yinganlikdagi yangi yashil rangni o'rnatadi:

Butt: qo'shimcha RGB uchun Zavdanya rangi

• O'zingiz sinab ko'ring »

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

O'n olti qiymat uchun rangni saqlash

Ahamiyati R G B Shuningdek, siz quyidagi shaklda qo'shimcha o'n oltilik (HEX) rang qiymatlarini belgilashingiz mumkin: #RRGGBB, bu erda RR (qizil), GG (yashil) va BB (ko'k) va 00 dan FF gacha o'n oltilik qiymatlar (o'nlik bilan bir xil). 0-255). O'n oltinchi tizim, o'ninchi tizimdan tashqari, nomidan ko'rinib turibdiki, 16 raqamiga asoslanadi. O'n oltinchi tizimda quyidagi belgilar qo'llaniladi: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, Z, D, E, F. Bu yerda 10 dan 15 gacha raqamlar lotin harflari bilan almashtiriladi. O'n oltilik tizimda 15 dan katta raqamlar bitta qiymatdagi ikkita belgining birikmasidir. Masalan, o'ninchi tizimdagi eng yuqori 255 raqami o'n oltinchi tizimdagi FFning eng yuqori qiymatiga to'g'ri keladi. O'nlik tizimini almashtirish uchun o'n oltilik raqam oldiga xesh belgisini qo'ying # , masalan, #FF0000 qizil rang sifatida ko'rsatiladi, qizil bo'laklar uning eng yuqori qiymatiga (FF) va boshqa ranglar minimal qiymatga (00) o'rnatiladi. Xesh belgisidan keyingi belgilar # Siz ham katta, ham kichikni ishga olishingiz mumkin. O'n oltinchi tizim #rgb shaklining qisqartirilgan shaklidan foydalanishga imkon beradi, bu erda belgi sub-urushga teng. Shunday qilib, #f7O yozuvi #ff7700 sifatida baholanadi.

Qimmatli qog'ozlar: rangli HEX

• O'zingiz sinab ko'ring »

qizil: #FF0000

yashil: #00FF00

ko'k: #0000FF

qizil: #FF0000

yashil: #00FF00

ko'k: #0000FF

qizil+yashil=zhovtiy: #FFFF00

qizil+ko‘k=binafsha: #FF00FF

yashil + ko'k = qora: # 00FFFF

Keng tarqalgan ranglar ro'yxati (nomlar, HEX va RGB):

Zichlik va rang uchun rang kodlari (fon).