Bu darsda matnlarni formatlashga oid CSS xususiyatlari bilan tanishib chiqamiz, ular unchalik qiyin emas va ishlatilishi ham tushunarli, aytmoqchimanki qandaydir qiyin mantiqiy narsalar yo‘q. Bu xususiyatlarni yodlab olish shart emas, shunchaki shunday narsa borligini bilib qo‘ying, kerak bo‘lib qolsa, sintaksisini istalgan joydan topib olishingiz mumkin.

Umumiy olgandan, matnlar bilan ishlash uchun quyidagi xususiyatlar mavjud:

text-align;

text-decoration;

text-indent;

text-transform;

letter-spacing;

word-spacing;

line-height;

white-space;

direction;

unicode-bidi.

Endi, stillarga oid bu xususiyatlarni ko‘rib chiqamiz.

Text-align — matnni tekislash, HTML dagi «align» attribut kabi ishlaydi, qiymatlari ham bir xil:

left — chap tomonga tekislash(odatiy hol);

right — o‘ng tomonga tekislash;

center — markazga tekislash;

justify — matn uzunligi bo‘yicha tekislash.

h1{text-align:center;}

Text-decoration — matnni chizish kerak bo‘lsa, shu xususiyat ishlatiladi, uning qiymatlari quyidagilar:

none — hech qanday chizishni amalga oshirmaydi;

underline — matnni tegiga chizish;

overline — matnni ustig chizish;

line-through — matnni chizib tashlash.

Barcha qiymatlarga misol ko‘ramiz,

<html>
<head>
<title>decoration </title>
<style type="text/css">
#a1{
text-decoration:none;
}
#a2{
text-decoration:underline;
}
#a3{
text-decoration:overline;
}
#a4{
text-decoration:line-through;
}
</style>
</head>
<body>
<h3 id="a1">Wayne Rooney</h3>
<h3 id="a2">Wayne Rooney</h3>
<h3 id="a3">Wayne Rooney</h3>
<h3 id="a4">Wayne Rooney</h3>
</body>
</html>

Bitta yozuvni har xil ko‘rinishda chiqardik, natijani ko‘ramiz.

6css_1

Text-indent — birinchi qatorning boshida joy qoldirish, ya’ni abzatsni o‘rnatish uchun ishlatiladi. Qiymatni pikselda berish qulay va ishonchli.

<html>
<head>
<title>indent </title>
<style type="text/css">
p {
text-align:justify;
text-indent: 40px;
}
</style>
</head>
<body>
<p>Ko'pchilikka ma'lum holat, telefoningiz sizga SMS kelganidan xabar beradi.
Kelgan xabarni o'qir ekansiz bu sizga kerak bo'lmagan Reklama ekani ma'lum bo'ladi.
Eng g'azabingizni chiqaradigan holat, siz bu reklamaga a'zo bo'lmagansiz va
kelgan xabarni umuman qiziq va kerak emasligida.</p>
</body>
</html>

6css_2

Text-transform — matndagi yozuv harflarini katta-kichik qilib o‘zgartirish stil xususiyati. 4 xildagi qiymatlarni qabul qiladi:

capitalize — matndagi har bir so‘zning birinchi harfini katta harf qilib chiqaradi;

uppercase — matndagi barcha harflarni katta harfga almashtirib chiqaradi;

lowercase — matndagi barcha harflarni kichik harfga almashtirib chiqaradi;

none — registrni o‘zgartirmaydi, ya’ni qanday yozilgan bo‘lsa shunday chiqaradi.

<html>
<head>
<title>text </title>
</head>
<body>
<p style="text-transform:capitalize">Manchester United Football club<p>
<p style="text-transform:uppercase">Manchester United Football club<p>
<p style="text-transform:lowercase">Manchester United Football club<p>
<p style="text-transform:none">Manchester United Football club<p>
</body>
</html>

6css_3

Letter-spacing — matndagi harflar orasidagi masofani o‘rnatish, qiymatlarni pikselda beramiz.

<html>
<head>
<title>Letter </title>
</head>
<body>
<p style="letter-spacing:3px">Contana</p>
<p style="letter-spacing:8px">Contana</p>
</body>
</html>

6css_4

Word-spacing — matndagi so‘zlar orasidagi masofani o‘rnatish, albatta pikselda qiymatlarni beramiz.

<html>
<head>
<title>Word </title>
</head>
<body>
<h3 style="word-spacing:3px">Roy Kean</h3>
<h3 style="word-spacing:8px">Roy Kean</h3>
</body>
</html>

6css_5

Line-height — qator orasidagi masofani o‘rnatish, pikselda qiymat kiritamiz.

<html>
<head>
<title>Line </title>
</head>
<body>
<p style="line-height:20px">Roy Kean Nemani Vidic Roy Kean Nemani Vidic Roy Kean Nemani Vidic Roy Kean Nemani Vidic</p>
<p style="line-height:8px">Rayan Giggs David Beckham Rayan Giggs David Beckham Rayan Giggs David Beckham Nemani Vidic</p>
</body>
</html>

6css_6

Natijadan ko‘rib turibsizki, oradagi masofa kichik bo‘lsa, juda tushunarsiz matn hosil bo‘lar ekan. Bu stilni «normal» degan qiymati ham bor, bu qiymat odatiy hisoblanadi.

White-space — so‘zlar orasidagi probellarni qanday chiqarishni o‘rnatish. Odatda HTML gippermatn tilida barcha probellar bitta probel ko‘rinishida chiqadi, pre tegidan tashqari(pre tegi probellarni hisobga olib, shriftni ham sal o‘zgartirib chiqaradi), «white-space» xususiyati «pre» tegi bajargan vazifani bajaradi, faqat shriftni o‘zgartirmaydi. «White-space«ning qiymatlari:

normal —  oddiy ko‘rinish, matndagi probellar bitta probel ko‘rinishida chiqadi va so‘zlar keyingi qatorga avtomat o‘tadi;

nowrap — matndagi probellar hisobga olinmaydi, so‘zlar avtomat keyingi qatorga o‘tmaydi, «br» tegi orqali keyingi qatorga o‘tish kerak;

pre — matndagi probellar va keyingi qatorga o‘tishlar hisobga olinadi, agar kodda keyingi qatorga o‘tish bo‘lmasa, brauzerda o‘tkazgich(prokrutka) paydo bo‘ladi;

pre-line — matndagi probellar hisobga olinmaydi, belgilangan chegaradan so‘zlar chiqib ketsa, avtomat keyingi qatorga chiqadi;

pre-wrap — matndagi probellar va keyingi qatorga o‘tishlar saqlanib qoladi, agar matn belgilangan joydan chiqib ketsa, avtomat keyingi qatorga o‘tadi.

Misol ko‘ramiz,

<html>
 <head>
  <title>Margin Padding</title>
  <style>
.sloy1 {
border:2px solid black;
padding:2px;
height:80px;
width:80px;
white-space:pre-wrap;
background-color:red;
}
  </style>
 </head>
 <body>
<div>MUFC
English club
</div>
 </body>
 </html>

6css_9

Yozuv matn ichiga sig‘madi va keyingi qatorga o‘tdi.

Direction — matnni chiqarish yo‘nalishini o‘rnatish, 2 xil qiymati mavjud:

ltr — chapdan o‘nga qarab chiqarish;

rtl — o‘ngdan chapga qarab chiqarish.

<html>
<head>
<title>Direct </title>
</head>
<body>
<h4 style="direction:ltr">Hello World!</h4>
<h4 style="direction:rtl">Hello World!</h4>
</body>
</html>

6css_7

Unicode-bdi — matnni qanday tartibda chiqarishni o‘rnatish, qiymatlari:

normal — brauzer o‘zi qanday chiqarishni hal qiladi;

embed — «direction» xususiyatini qayta aniqlashtiradi, «direction«da qanday yozilgan bo‘lsa shunaqa chiqadi;

bidi-override — biz uchun qiziqarli qiymat, simvollar ketma-ketligi tartibi o‘zgartirib chiqaradi.

<html>
<head>
<title>Rang </title>
</head>
<body>
<h4 style="direction:ltr; unicode-bidi:embed">World!</h4>
<h4 style="direction:rtl; unicode-bidi:bidi-override">World!</h4>
</body>
</html>

6css_8