Zahiriddin muhammadbobur nomidagi andijon davlat universiteti

Mavzu:Shriftni formatlash

Stillar kasakad jadvali (CSS) shriftning nomi, rangi va razmerini, hamda uning "semizligi" va stilini (kursiv) belgilash imkoniyatini beradi.
▶ font-family atributi yordamida shrift nomi belgilanadi.
p { font-family: Arial; }
Ba`zi hollarda belgilangan shrift foydalanuvchi kompyuterida o'rnatilmagan bo'lishi mumkin. Shuning uchun alternativ shrift nomi va shrift oilasi ko'rsatilishi maqsadga muvofiq bo'ladi. Shunda Brauzer birinchi ko'rsatilgan shrift sistemada o'rnatilmagan bo'lsa, ikkinchisini, mabodo u ham topilmasa shu oilaga mansub bo'lgan mavjud shriftni qo'llaydi.
p { font-family: Verdana, Tahoma, sans-serif; }
Shriftlar oilasining ko'proq ishlatiladigani serif, sans-serif, monospace bo'lib, bundan tashqari cursive va fantasy shriftlari ham mavjud.
▶ font-style atributi normal yoki italic mohiyatini qabul qiladi. Jimlikdagi holati normal bo'lib, italic mohiyatida shriftni kursivlashtiradi.
p { font-family: Arial; font-style: italic; }
▶ font-size atributi shrift razmerini belgilaydi. Razmerlar px, pt, em, ex yoki protsentlarda berilishi mumkin.
.class1 { font-size: 16px; font-family: Arial; }
▶ color shrift rangini belgilaydi.
CSS da:
.class1 {font-size:16px; font-family:Arial; color:brown; font-style:italic;}
.class2 { font-size: 12pt; font-family: Verdana; color: #ff00ff; }
.class3 {font-size:120%; font-family:"Times New Roman"; font-weight:bold; color:rgb(100,180,180);}
HTML da:

class="class1">class1 stili qo'llanilgan abzatsdagi matn


class="class2">class2 stili qo'llanilgan abzatsdagi matn


class="class3">class3 stili qo'llanilgan abzatsdagi matn

Natija:

class1 stili qo'llanilgan abzatsdagi matn
class2 stili qo'llanilgan abzatsdagi matn
class3 stili qo'llanilgan abzatsdagi matn
▶ font-weight atributi bilan shriftning semizligi belgilanadi. 100, 200, 300, 400, 500, 600, 700, 800, 900 hamda normal (400)va bold (700) mohiyatlarini qabul qiladi. Bu yerda 100- eng ozg'in va 900- eng semiz shrift. Hozircha Brauzerlar bu imkoniyatlarni to'liq qo'llamaydi, asosan normal (400)va bold (700) qo'llaniladi. Boshqa mohiyatlar ko'rsatilganda yaqinrog'i ishlatiladi.
p { font-family: Arial; font-style: italic; font-weight: bold; }
.css fayldagi stillar matnini formatlash ixtiyoriydir, masalan yuqoridagi misolni quyidagicha ham yozish mumkin:
p {
font-family: Arial;
font-style: italic;
font-weight: bold;
}
HTML-hujjatni va unga biriktirilgan .css stillar faylini Notepad++ da ochib,
tajriba sifatida har xil o'zgarishlar kiritib, uni xotirada saqlab,
shu vaqtni o'zida ushbu HTML-hujjatni Brauzerda ham ochib, Brauzer oynasini yangilab (F5),
kiritilgan o'zgarishlarning vizual natijasini kuzatib borish,
stillar ta`sirini yanada aniqroq tushunishga yordam beradi.