HTML və CSS mətn rəngini necə dəyişdirmək olar. Mətn Rəngini HTML və CSS RGB Rəng Modelini Necə Dəyişdirmək olar

RGB rəng modeli

CSS-də rəngləri təyin etməyin ikinci yolu onluq RGB dəyərlərindən (Qırmızı, Mavi, Yaşıl) istifadə etməkdir. Bunun üçün rəng xassəsindən sonra rgb açar sözünü, sonra isə mötərizədə və vergüllə ayrılaraq yazmalısınız - 0-dan 255-ə qədər olan üç rəqəm, hər biri qırmızı, yaşıl və mavi rənglərin intensivliyini bildirir (r , g, b). Rəqəm nə qədər yüksəkdirsə, rəng bir o qədər sıx olur. Məsələn, parlaq yaşıl rəng əldə etmək üçün yazmalısınız:

P (rəng: rgb(0, 255, 0); )

Ancaq sarımtıl-xardal rənginin aşağıdakı mənası var:

Rəng: rgb(94, 81, 3); /* aşağıda eyni rəngdir, onaltılıq sistemlə yazılmışdır: */ color: #5E5103;

Qara üçün dəyər (0, 0, 0) və ağ üçün (255, 255, 255) kimi yazılır. Bu dəyərləri faizlə də göstərmək olar. Beləliklə, 255 rəqəmi 100% -ə uyğundur, buna görə də ağ rəng aşağıdakı kimi təyin edilə bilər:

Rəng: rgb(100%, 100%, 100%);

Rəng mənalarını harada axtarmaq lazımdır

Bəlkə bir sualınız var: bütün bu rəng mənalarını haradan əldə edirsiniz? Çox var qrafik redaktorlar və rəngləri seçə və rəng sxemləri qura biləcəyiniz onlayn xidmətlər. Ən çox biri məşhur proqramlar, burada uyğun rəngi seçə və onun RGB, hex dəyərini və daha çoxunu əldə edə bilərsiniz - Adobe Photoshop. Alternativ olaraq, yalnız rəngi deyil, həm də bütünü asanlıqla seçə biləcəyiniz xüsusi saytlar var Rəng sxemi. Əla nümunə Adobe Color CC xidmətidir.

RGBA rəng modeli

Rəngi ​​təyin edin RGB formatı A demək olar ki, RGB-də olduğu kimi mümkündür. RGBA və RGB arasındakı fərq, rəngin şəffaflığından məsul olan bir alfa kanalının olmasıdır. Şəffaflıq 0-dan 1-ə qədər olan rəqəmdən istifadə etməklə təyin edilir, burada 0 tam şəffaflıq, 1 isə əksinə, tamamilə qeyri-şəffaflıq deməkdir. 0,5 kimi aralıq dəyərlər şəffaf bir görünüş təyin etməyə imkan verir (qısa işarələrə icazə verilir, sıfır olmadan, lakin nöqtə ilə - .5). Məsələn, mətni rəngli və bir qədər şəffaf etmək üçün rəng xassəsindən sonra rgba açar sözünü və rəng dəyərini yazmalısınız:

P (rəng: rgba(94, 81, 3, .9); )

RGBA-nın dezavantajı brauzerin onu dəstəkləməməsidir internet Explorer 8 və daha əvvəlki versiyalar. Xüsusilə IE8 üçün aşağıdakı həlli tətbiq edə bilərsiniz:

P (rəng: rgb(94, 81, 3); rəng: rgba(94, 81, 3, .9); )

Nümunədə ilk xüsusiyyət mətni göstərəcək IE8 brauzeri üçündür düzgün rəngdə, lakin şəffaflıq olmadan. Və RGBA-nı başa düşən brauzerlər şəffaflıqla elementə ikinci xüsusiyyəti tətbiq edəcəklər.

HSL (HSLA) rəng modelləri

Siz həmçinin HSL rəng modelinin koordinatlarından (Hue, Saturation, Lightness) istifadə edərək CSS-də rəng təyin edə bilərsiniz. Belə yazılıb:

P (rəng: hsl(165, 100%, 50%); )

Mötərizədə ilk rəqəm rəng deməkdir və dərəcələrlə verilir (0-dan 359-a qədər rəqəmlər). Rəng çarxının necə göründüyünü xatırlasanız, dərəcələrin niyə istifadə edildiyini başa düşmək asan olacaq:

Mötərizədə ikinci və üçüncü rəqəmlər müvafiq olaraq doyma və yüngüllük deməkdir. Onların dəyərləri 0-dan 100-ə qədər faizlə müəyyən edilir. Doyma dəyəri nə qədər aşağı olarsa, rəng bir o qədər səssizləşir. Sıfır doyma dəyəri, rəngin dəyərinin nə olmasından asılı olmayaraq, boz rənglə nəticələnəcəkdir. Yüngüllük dəyəri rəngin parlaqlığını təyin etməyə imkan verir. Aşağı dəyərlər tünd rəng çalarları ilə nəticələnir, yüksək dəyərlər açıq çalarlarla nəticələnir. Yüngüllük üçün 100% dəyəri ağ, 0% qara deməkdir.

HSLA rəng modeli demək olar ki, HSL ilə eyni işləyir, lakin RGBA-ya bənzər, 0-dan 1-ə qədər istədiyiniz dəyəri göstərərək rəngin şəffaflığını təyin edə biləcəyiniz bir alfa kanalına malikdir:

P (rəng: hsla(165, 100%, 50%, .6); )

HSL və HSLA, Internet Explorer 8 və daha əvvəlki versiyalar istisna olmaqla, bütün brauzerlər tərəfindən dəstəklənir.

Standart HTML Rəngləri

İnternetdə rəngləri təmsil etməyin başqa bir yolu element üçün rəng təyin etmək üçün istifadə edilə bilən açar sözlərdir. Misal:

P (rəng: qara;)

Rəng xüsusiyyətinin dəyərində yazıla bilən 16 standart rəng var:

Bu rənglər bütün brauzerlər tərəfindən dəstəklənir. Onlara əlavə olaraq, üçün təxminən 130 əlavə açar söz var müxtəlif çalarlar rənglər. Tam masa bu rəngləri W3C arayış kitabında görmək olar.

Bu cür açar sözlərdən istifadə məqbuldur, lakin bəzi sözlərin brauzer tərəfindən qəbul edilməməsi riski var. Buna görə də açar sözlər əvəzinə onaltılıq rəng kodunu yazmaq tövsiyə olunur.

Nəticələr

IN CSS rəngi mətn rəng xassəsindən istifadə etməklə müəyyən edilir və onun dəyəri bir neçə üsulla - onaltılıq (hex) formatda, RGB və ya HSL formatında və ya açar sözü göstərməklə yazıla bilər. Qarşısını almaq üçün səhv ekran açar sözdən istifadə edərək müəyyən edilmiş rəng, onun hex dəyərini təyin etmək daha yaxşıdır.

Alfa kanalından (RGBA və HSLA formatları) istifadə edərək elementin şəffaflığını təyin etmək də mümkündür. IE8 brauzerinin və onun əvvəlki versiyalarının RGBA, HSL və HSLA formatlarını dəstəkləmədiyini nəzərə almağa dəyər.

Bu dərslikdə biz sonuncu etiket atributuna baxacağıq , mətnin rəngini təyin edir. Varsayılan olaraq, mətn ağ fonda göstərilən qara rəngdədir. Üçün html mətn rəngini dəyişdirin, etiketin rəng atributunu tətbiq etməlisiniz :