Yaxshi tipografik dizayn muvaffaqiyatli veb-saytning muhim qismidir. CSS siz yaratgan veb-sahifalardagi veb-sahifalarda matn paydo bo'lishiga katta nazorat qiladi. Bu siz foydalanadigan har qanday shrift rangini o'zgartirish qobiliyatini o'z ichiga oladi.
Shrift ranglarini tashqi uslublar jadvalidan foydalanib , ichki uslublar varag'i yordamida o'zgartirish mumkin yoki u HTML hujjat ichidagi kattalashtirish orqali o'zgartirish mumkin. Eng yaxshi amaliyotlar CSS uslublaringiz uchun tashqi uslublar jadvalidan foydalanish kerakligini belgilaydi. O'zingizning hujjatning "boshiga" to'g'ridan-to'g'ri yozilgan uslublar ichki uslublar varag'i odatda kichik, bir sahifali saytlar uchun ishlatiladi. Ko'p yillar ilgari ko'rib chiqqan eski "shrift" teglariga mos keladigan Inline uslublaridan saqlanish kerak. Ushbu inline uslublar shrift uslubini boshqarish uchun juda qiyinlashtiradi, chunki siz uni inline uslubining har bir nusxasida o'zgartirishingiz kerak bo'ladi.
Ushbu maqolada siz shrift rangini tashqi uslublar jadvalini va paragraf tagida ishlatiladigan uslubni o'zgartirishni o'rganasiz. Matnni o'rab turgan har qanday yorliqda shrift rangini o'zgartirish uchun bir xil uslub xususiyatini qo'llashingiz mumkin, shu jumladan
yorlig'i.Shrift rangini o'zgartirish uchun uslublar qo'shish
Ushbu misol uchun siz sahifangizning formatlash uchun HTML hujjati va ushbu hujjatga biriktirilgan alohida CSS fayli bo'lishi kerak. HTML hujjat, ehtimol, uning tarkibida bir qator elementlarni yaratishi mumkin. Ushbu maqola uchun biz g'amxo'rlik qilayotgan xat elementi.
Tashqi uslublar jadvalidan foydalanib, paragraflar ichidagi matnning shrift rangi qanday o'zgarishi.
Rangli qiymatlar rangli kalit so'zlar, RGB rang raqamlari yoki o'n oltinchi raqamli ranglar sifatida ifodalanishi mumkin.
- Paragraf yorlig'i uchun uslublar xususiyatini qo'shing:
- p {}
- Rang xususiyatini uslubda joylashtiring. Bu xususiyatdan keyin yo'g'on ichakni qo'ying:
- p {rangi:}
- Keyinchalik xususiyatdan keyin rang qiymatini qo'shing. Ushbu qiymatni yarim nuqta bilan tugatganingizga ishonch hosil qiling:
- p {rangi: qora;}
Sizning sahifangizdagi xatlar qora bo'lib qoladi.
Ushbu misolda "qora" rangli kalit so'z ishlatiladi. Bu CSS-da rang qo'shishning bir usuli, lekin u juda cheklangan. "Qora" va "oq" uchun kalit so'zlarni ishlatish juda oson, chunki bu ikki rang juda aniq, ammo "qizil", "ko'k" yoki "yashil" kabi kalit so'zlarni ishlatsangiz nima bo'ladi? To'g'ridan-to'g'ri qizil, ko'k yoki yashil rang nima bo'ladi? Siz xohlagan rang soyaini kalit so'zlar bilan aniqlay olmaysiz. Shu sababli, onaltılık qiymatlar ko'pincha rangli kalit so'zlar o'rniga ishlatiladi.
p {rang: # 000000; }
Ushbu CSS uslubi sizning paragraflaringizning rangi qora rangga o'rnatadi, chunki # 000000 ning olti kodi qora rangga aylanadi. Siz ham hex qiymati bilan stenograf foydalanishingiz va uni # 000 sifatida yozishingiz mumkin va siz ham xuddi shunday narsani olasiz.
Yuqorida aytib o'tganimizdek, hex qiymatlari faqat qora yoki oq bo'lmagan rangga muhtoj bo'lganingizda yaxshi ishlaydi. Mana bir misol:
p {rangi: # 2f5687; }
Ushbu hex qiymati paragraflarni ko'k rangga o'rnatadi, lekin "ko'k" kalit so'zidan farqli o'laroq, bu hex kod sizga ko'k rangning o'ziga xos bir soyaini o'rnatish qobiliyatini beradi - ehtimol, dizaynerlar interfeysi yaratishda Ushbu veb-sayt. Bu holda, rang o'rta darajadagi, shiftga o'xshash ko'k bo'lishi mumkin.
Nihoyat, RGBA rang qiymatlarini shrift ranglari uchun ham ishlatishingiz mumkin. RGCA endi barcha zamonaviy brauzerlarda qo'llab-quvvatlanadi, shuning uchun siz ushbu qiymatlarni veb-brauzerda qo'llab-quvvatlanmasligi haqida xavotirlanmasdan foydalanishingiz mumkin, ammo siz ham osongina o'chirib qo'yishingiz mumkin.
p {rangi: rgba (47,86,135,1); }
Ushbu RGBA qiymati ilgari ko'rsatilgan shisha ko'k rang bilan bir xil bo'ladi. Birinchi 3 qiymat Qizil, Yashil va Moviy qiymatlarini belgilaydi va oxirgi raqam alfa sozlamalari hisoblanadi. Bu "100%" degan ma'noni anglatuvchi "1" ga o'rnatiladi, shuning uchun bu rang shaffof bo'lmasligi kerak. Agar siz shunga o'xshash, masalan .85 kabi o'nlik raqamga o'rnatgan bo'lsangiz, u 85% opaklikka aylanadi va rang biroz oshkora bo'ladi.
Agar siz rang qiymatlarini o'qqa tutishni istasangiz, buni amalga oshiradi:
p {
rang: # 2f5687;
rang: rgba (47,86,135,1);
}
Ushbu sintaksis birinchi navbatda hex kodini o'rnatadi. Keyinchalik RGBA raqam bilan ushbu qiymati yozib qo'yadi. Bu shuni anglatadiki, RGBAni qo'llab-quvvatlamaydigan eski brauzer birinchi qiymatni oladi va ikkinchisini e'tiborsiz qoldiradi. Zamonaviy brauzerlar CSS kaskadi uchun ikkinchi marta foydalanadi.