Yaxşı tipografik dizayn müvəffəqiyyətli bir veb saytın əhəmiyyətli bir hissəsidir. CSS , web pages qurduğunuz web pages mətn görünüşü üzərində böyük nəzarət verir. Bu istifadə etdiyiniz hər hansı bir yazı tipinin rəngini dəyişdirmək imkanıdır.
Font rəngləri xarici stil hesabatı , daxili stil hesabatı ilə dəyişdirilə bilər və ya HTML sənəd daxilində inline styling ilə dəyişdirilə bilər. Ən yaxşı təcrübələr sizin CSS üslublarınız üçün xarici stil hesabatı istifadə etməyinizi istisna edir. Sənədinizin "başında" birbaşa yazılmış üslubları olan daxili stil hesabatı ümumiyyətlə yalnız kiçik, bir səhifəlik saytlar üçün istifadə olunur. İnline üslublardan keçməməliyik, çünki onlar bir çox illər əvvəl həll etdiyimiz köhnə "yazı tipi" etiketlərinə yaxındır. Bu inline üslubları şablon üslubu idarə etmək üçün çox çətindir, çünki inline stilin hər bir nüsxəsində onları dəyişmək lazımdır.
Bu yazıda, xarici stil hesabatı və paraqraf etiketində istifadə olunan bir üslubu istifadə edərək font rəngini necə dəyişəcəyini öyrənəcəksiniz. Yazı rəngini
etiketi daxil olmaqla mətni əhatə edən hər hansı bir etiket üzərində dəyişdirmək üçün eyni stil mülkiyyətini tətbiq edə bilərsiniz.Font Rəngini dəyişdirmək üçün Stillər əlavə
Bu misal üçün, səhifənizin formatlaşdırılması üçün HTML sənəd və həmin sənədə əlavə olan bir CSS faylı olmalıdır. HTML sənədində ehtimal bir sıra elementlər olacaqdır. Bu maddənin məqsədi ilə əlaqədar olduğumuz biri bənd elementidir.
Xarici stil istifadə edərək paraqraf etiketləri daxilində mətnin font rəngini necə dəyişdirmək olar.
Rəng dəyərləri rəngli açar sözlər, RGB rəng nömrələri və ya hexadecimal rəng nömrələri kimi ifadə edilə bilər.
- Paraqraf tag üçün stil atributunu əlavə edin:
- p {}
- Rəngi xüsusiyyətini üslubda yerləşdirin. O əmlakdan sonra bir kolon qoyun:
- p {color:}
- Sonra mülkiyyətdən sonra rəng dəyərinizi əlavə edin. Yarım kolonla bu dəyəri sona çatdırmaq üçün əmin olun:
- p {color: qara;}
Sayfanızdaki paragraflar siyah olacaktır.
Bu misalda "qara" rəngli bir söz istifadə olunur. CSS-də rəng əlavə etmək üçün bir yoldur, lakin çox məhduddur. "Qara" və "ağ" üçün açar sözlər istifadə edərək, bu iki rəng çox xüsusi olduğundan, "qırmızı", "mavi" və ya "yaşıl" kimi açar sözlərdən istifadə edərkən nə baş verir? Qırmızı, mavi və ya yaşılın hansı kölgəsi olacaq? Açar sözlər ilə istədiyinizi tam rəngli kölgə göstərə bilməzsiniz. Buna görə onaltılıq dəyərlər tez-tez rəngli açar sözlər yerinə yetirilir.
p {color: # 000000; }
Bu CSS stil də paraqrafların qara rəngini təyin edərdi, çünki # 000000 hex kodu qara rəngə çevrilir. Hətta hex dəyərinizlə stenoqrafiya istifadə edə və yalnız # 000 kimi yazın və eyni şeyi əldə edə bilərsiniz.
Artıq qeyd etdiyimiz kimi, hex dəyərləri sadəcə qara və ağ olmayan bir rəngə ehtiyac duyduqda yaxşı işləyir. Burada bir nümunə:
p {color: # 2f5687; }
Bu hex dəyəri paraqrafları mavi bir rəngə düzəldər, lakin "mavi" sözündən fərqli olaraq, bu hex kod sizə mavi rəngin xüsusi bir kölgəsini təyin etmək imkanı verir - ehtimal ki, dizayner üçün interfeys yaratdıqda seçə bilər bu veb sayt. Bu vəziyyətdə, rəng orta sıra, şifer kimi mavi olardı.
Nəhayət, font rənglərinə görə RGBA rəng dəyərlərindən istifadə edə bilərsiniz. RGCA artıq bütün müasir brauzerlərdə dəstəklənir, buna görə də bu dəyərləri bir veb brauzerində dəstəklənməyəcək qədər az narahatlıqla istifadə edə bilərsiniz, ancaq asan bir geri dönüş təmin edə bilərsiniz.
p {color: rgba (47,86,135,1); }
Bu RGBA dəyəri daha əvvəl göstərilən şifrəli mavi rənglə eynidır. İlk 3 dəyərlər Qırmızı, Yaşıl və Mavi dəyərləri təyin edir və son rəqəm alfa ayarıdır. Bu "100%" deməkdir "1", bu rəngi şəffaflıq olmazdı. Əgər bu, 85 kimi bir decimal ədədinə düzəldirsinizsə, bu, 85% opaqlığa çevriləcək və rəng bir qədər şəffaf olardı.
Rəng dəyərlərinə bulletproof etmək istəyirsinizsə, bunu edərdin:
p {
rəng: # 2f5687;
rəng: rgba (47,86,135,1);
}
Bu sözdizim əvvəl hex kodunu təyin edir. Sonra RGBA nömrəsi ilə bu dəyəri yazır. Bu, RGBA-nı dəstəkləməyən hər hansı bir köhnə brauzerin ilk dəyərini alacaq və ikincisini görməyəcəkdir. Müasir brauzerlər CSS cascade üçün ikinci istifadə edəcək.