Bu maqola bilan CSS2 stiliga tegishli barcha stil xususiyatlarni ko‘rib chiqgan bo‘lamiz. Keyin, ko‘pchilik uchun qiziq bo‘lgan CSS3 haqida yozishni boshlashim mumkin bo‘ladi. Oxirgi xususiyat «display» deb ataladi.

Display — blokli elementlarni veb sahifada qay ko‘rinishda chiqarish va uni joylashuvini aniqlashtirib beradi, bu xususiyat orqali oldin ko‘rib o‘tgan bir necha xususiyatlarning vazifasini bajarsa bo‘ladi, uning uchun biroz o‘ylab bu xususiyatni ishlatish lozim.

Bu xususiyatni bir necha qiymatlari bor, ularni birma-bik ko‘rib chiqamiz.

block — bu qiymat qatorli elementlar(span, hx,…)ni ham blokli(div, p) qilib ko‘rsatadi, ya’ni qatorli elementlarni ketma-ket yozsangiz ham alohida qatorda chiqarib beradi(qatorli elementlar bir qatorda chiqishi lozim);

inline — bu qiymat yuqoridagi qiymatga teskari, ya’ni blokli elementlarni qatorli qilib beradi, ya’ni «div«, «p» teglar bir qatorda yozilishi mumkin.

YUqoridagi ikki qiymatni bitta qilib, misol ko‘ramiz.

<html>
<head>
<title>Display_1</title>
</head>
<body>
<span>Qatorli element </span>
<span><b>DISPLAY</b> ishlatilmadi</span>
<span style="display:block; color:red;"><b>Display</b> ishlatilib, </span>
<span style="color:red">span blokli element bo'lib qoldi</span><br>
<span>----------------------------------------------------</span>
<p>Bu blokli element</p>
<p>shunig uchun ikkinchi blok pastga tushib qoldi</p>
<p style="display:inline; color:red;">Buham blokli element, </p>
<p style="display:inline; color:red;">lekin <b>display</b> orqali qatorli element bo'lib qoldi</p>
</body>
</html>

Misolda, qatorli(span)elementlarni blokli, blokli(p)elementlar qatorli qilindi.

20css_1

inline-block — bu qiymat bizga ikki hil narsani anglatadi, ya’ni kiritilgan kontent ichki tomondan blok, kontent ichi blok, lekin, tashqi tomondan qatorli tip, boshqa ob’yektlar uchun qator tegi kritilgan hisoblanadi. Biroz g‘alati, ichki tomoni blok, tashqi tomoni qatorli kontent, hali ham tushunmagan bo‘lsangiz misolda ko‘rsataman.

<html>
<head>
<title>Display_2</title>
<style>
.rasm{
background-color:gray;
padding:10px;
width:190px;
display: inline-block;
}
</style>
</head>
<body>
<div class="rasm">
<p><img src="bum.jpg"></p>
<p>Rasm</p>
</div>
<div class="rasm">
<p><img src="bum.jpg"></p>
<p>Rasm</p>
</div>
</body>
</html>

Ikkita rasm sahifaga chiqarildi, bu rasm blokli element(div)orqali chiqarildi, agar «display» xususiyatini kiritmasangiz, rasmlar yonma-yon emas, qatorma-qator chiqadi, rasm, uning tegidan ikkinchi rasm.

20css_2

«Display» ning «inline-block» qiymati, rasmni blok shaklida qoldirib, keyingi rasm(keyingi ob’yekt) uchun bu teg(div)ni qatorli teg deb tanishtirmoqda. Shuning uchun, rasmlar ketma-ket chiqmoqda. Ikkinchi rasm uchun, birinchi rasm qator tipiga tegishli, lekin birinchi rasm o‘zi uchun blokli.

inline-table — yuqoridagi qiymat bilan bir xil, bunda blok-qator rolini jadval o‘ynaydi, misolda ko‘rsataman.

<html>
<head>
<title>Display_2</title>
</head>
<body>
<table border=1>
<tr><td>2000-2001</td> <td>2001-2002</td></tr>
<tr><td>2003-2004</td> <td>2004-2005</td></tr>
<table>
Bu jadval oqali hamma har xil narsani tushunishi mumkin, odatda bu yillar...
<font color="red">-------------------------------------------------</font>
<table border=1 style="display:inline-table">
<tr><td>1900-1901</td> <td>1901-1902</td></tr>
<tr><td>1903-1904</td> <td>1904-1905</td></tr>
<table>
Hali ham nimaligini tushunmadingizmi?
</body>
</html>

Dastlabki holda, jadval blok ko‘rinishida, shuning uchun undan keyingi matn jadvaldan keyin chiqmoqda

20css_3

Keyingi holda esa, «display» «inline-table» qiymati bilan ishlatilmoqda, ya’ni jadvaldan keyingi ob’yekt(yozuv) jadvalni qatorli tip deb o‘ylaydi va yonidan chiqadi.

none — shu qiymatga ega bo‘lgan blok ko‘rinmas holga keladi. Hattoki u olgan joy ham saqlanmaydi.

<html>
<head>
<title>Display_2</title>
</head>
<body>
<div>Uzbekistan, Tashkent</div>
<div style="display:none">England, London</div>
<div>Russia, Moscow</div>
</body>
</html>

20css_4

manimcha bu qiymat juda yaxshi tushunarli.

list-item — bloklar ro‘yxatdan iborat ekanligini o‘rnatadi, shunda markerlar ham hosil bo‘ladi.

<html>
<head>
<title>Display_5</title>
<style>
div{
display:list-item;
}
</style>
</head>
<body><ol>
<div>Uzbekistan, Tashkent</div>
<div>England, London</div>
<div>Russia, Moscow</div>
</ol>
</body>

marker turlarini «list-style» orqali berish mumkin.

20css_5

«Display«ning qolgan qiymatlari jadvallar bilan bog‘liq bo‘lib, html gippermat tili jadval teglari bilan bir xil(HTML da jadvallar), ya’ni

20css_6