Zahiriddin muhammadbobur nomidagi andijon davlat universiteti

Mavzu:Matnni formatlash

Matnlarni formatlashda, shrift xossalaridan tashqari belgilar, so'zlar va qatorlar orasidagi masofa, vertikal va gorizontal tekislanish (moyillik), abzatsdagi birinchi qator chekinishi kabi qo'shimcha parametrlar aniqlanishi mumkin.
▶ letter-spacing atributi matndagi belgi (simvol)lar orasidagi masofani belgilaydi. Qiymat sifatida CSS da qabul qilingan px, pt, em va boshqa birliklarni ishlatish mumkin. Jimlikda normal qiymatga ega. Manfiy qiymat ham berilishi mumkin.
p { font-size: 16px; color: navy; letter-spacing: 5px;}
Ushbu stil qo'llanilgan matn
▶ word-spacing so'zlar orasidagi masofani belgilaydi. Qiymat sifatida CSS da qabul qilingan px, pt, em va boshqa birliklarni ishlatish mumkin. Jimlikda normal qiymatga ega. Manfiy qiymat ham berilishi mumkin. Matnda text-align orqali justify qiymati qo'llanilgn bo'lsa, word-spacing ishlamaydi. Chunki bu holatda matn ikki tomonlama tekislanishi uchun Brauzer so'zlar orasidagi masofani avtomatik tarzda boshqaradi.
p { font-size: 12pt; color: teal; word-spacing: 20px;}
Yuqori qatordagi stil qo'llanilgan matn
▶ text-indent - abzatsdagi birinchi qator chekinishini belgilaydi. Absolyut va nisbiy birliklarda berilishi mumkin. (px, pt, em, %, mm, ...).
p { 2em; font-style: italic; font-weight: normal;}
Yuqorida ko'rsatilgan stilli, abzatsda 2em chekinishli matn
▶ line-height atributi qatorlar orasidagi vertikal masofani belgilaydi. CSS da ishlatiladigan absolyut va nisbiy masofa birliklarini qabul qiladi. Jimlikdagi qiymati normal. Manfiy qiymat ham qabul qilishi mumkin.
p { font-size: 90%; color: maroon; line-height: 150%;}
Yuqoridagi stil qo'llanilgan matn 1-qator (Qator orasi 1,5 baravar)
Yuqoridagi stil qo'llanilgan matn 2-qator
Yuqoridagi stil qo'llanilgan matn 3-qator
▶ text-align atributi matnning gorizontal moyilligini belgilaydi. center, left, right va justify mohiyatlariga ega. Shunga ko'ra matn o'zi joylashgan element-konteyner doirasida chapdan tekislanish, o'ngdan tekislanish, markazga moyillik yoki ikki tomonlama tekislanishdan birini qabul qiladi.
CSS da:
.left{text-align:left;}
.right{text-align:right;}
.center{text-align:center;}
.matn2 { text-align: justify; }
HTML da:

class="left">Chapga tekislangan1-matn


class= "right">O`ngga tekislangan 2-matn


class= "center">Markazga moyillashgan 3-matn


class= "matn2">Ikki tomondan tekislangan matn

Natija:
Chapga tekislangan 1-matn
O`ngga tekislangan 2-matn
Markazga moyillashgan 3-matn
Ikki tomondan tekislangan matn. O`sib ketg'on tirnoqlar kishining madaniyatsizligidin dalolatdurkim, garchi anga tillo suvi yugurtirilg'on bo'lub, xizmat ko'rsatib qo'yg'on madaniyat xodimig'a tegishli bo'lub turg'on bo'lsa ham. Ikki tomondan tekislangan matn.
▶ vertical-align atributi o'zi joylashgan ajdod elementga, masalan jadval katagiga nisbatan vertikal moyillikni belgilaydi. top, bottom, middle yoki baseline qiymatlaridan birini qabul qiladi.
td {font-size:12pt; color:maroon; vertical-align:top;}
td {font-size:12pt; color:maroon; vertical-align:bottom;}
td {font-size:12pt; color:maroon; vertical-align:middle;}
td {font-size:12pt; color:maroon; vertical-align:baseline;}
Mos ravishda kontent tepadan, pastdan, vertikal o'rtadan joylasha boradi. baseline mohiyatida joriy element asos chizig'i ajdod element asos chizig'iga moslashadi. Jadval katagida ishlatilganda katak asos chizig'i matn yoki joylashtirilgan boshqa element asos chizig'iga moyillashadi (tekislanadi).
▶ text-decoration atributi yordamida matn ostidan, tepasidan va o'chirilgandek ustidan chiziq o'tkazish mumkin. underline, overline, line-through, blink, none mohiyatlarini qabul qilishi mumkin. Jimlikdagi qiymati asosan none, a tegida esa underline bo'ladi, ya`ni Giperbog'lanishlarda jimlikda ko'rsatkich matn osti chiziladi.
▷ underline

style= "text-decoration: underline">Osti chizilgan matn

Osti chizilgan matn

▷ overline

style= "text-decoration: overline">Tepasi chizilgan matn

Tepasi chizilgan matn

▷ line-through

style= "text-decoration: line-through">O`chirilgandek usti chizilgan matn

O`chirilgandek usti chizilgan matn

▷ blink

style= "text-decoration: blink">Miltillovchi matn

Miltillovchi matn

▷ blink mohiyati hamma Brauzerlarda ham ishlayvermaydi.

▶ text-transform atributi yordamida simvollar registrini o'zgartirish mumkin. Quyidagi qiymatlarni qabul qiladi:
▷ capitalize - har bir so'zning birinchi harfini yuqori registrga o'zgartiradi.
▷ uppercase - barcha harflarni yuqori registrga o'zgartiradi.
▷ lowercase - barcha harflarni quyi registrga o'zgartiradi.
CSS da:
.class1 { text-transform: capitalize; }
.class2 { text-transform: uppercase; }
.class3 { text-transform: lowercase; }
HTML da:

class= "class1">HTML - Gipermatn belgilash tili


class= "class2">HTML - Gipermatn belgilash tili


class= "class3">HTML - Gipermatn belgilash tili

Natija:

HTML - Gipermatn belgilash tili
HTML - Gipermatn belgilash tili
HTML - Gipermatn belgilash tili
▶ white-space atributi probellarni ko'rsatish tipini belgilab beradi. Jimlikda ketma-ket joylashgan barcha probellar (va bo'sh qatorlar) Brauzer oynasida bitta probel qolguncha qisqartiriladi. (Qo'shni elementlardan hech bo'lmaganda biri blok hosil qiluvchi element bo'lsa, ular orasida probel qoldirilmaydi).
▷ normal - matn standart holatda chiqariladi.
▷ pre - barcha probel va qator ko'chirishlar (enter) saqlanib qoladi.
▷ nowrap -
tegidan tashqari qator ko'chirish amalga oshirilmaydi.
CSS da:
.class1 { white-space: normal; }
.class2 { white-space: pre; }
.class3 { white-space: nowrap; }
HTML da:

class="class1">
Bir necha
so'zli matn

class="class2">Probellar
va qator ko'chirishlar
qisqartirilmaydigan matn


class="class3">Ushbu matn nowrap stili qo'llanilishi natijasida Brauzer oynasi to'lgan joydan
yangi qatorga ko'chirilmaydi

Natija:

Bir necha so'zli matn

Probellar

va qator ko'chirishlar
qisqartirilmaydigan matn

Ushbu matn nowrap stili qo'llanilishi natijasida Brauzer oynasi to'lgan joydan

yangi qatorga ko'chirilmaydi (
qo'yilmaganda hammasi bir qator bo'lardi)