Agar siz barcha CSS maqolalarni o‘qib borayotgan bo‘lsangiz, hozirga kelib ancha narsalarni o‘rganib olgan bo‘lasiz. Bu maqola ham oldingilaridan qolishmagan holda muhim sanalib, kontentlarga bag‘ishlanadi. Kontent bu — biror blokning tashkil etuvchisi yoki bir mavzuni o‘zida yig‘gan biror matndir, umumiy holda aytadigna bo‘lsak, saytning tashkil etuvchilaridir.

Quyida kontentlar bilan ishlash uchun mo‘ljallangan CSS hususiyatlari bilan tanishishingiz mumkin:

quotes;

counter-increment;

counter-reset;

content.

Ko‘rib turganingizdek, unchalik ko‘p emas, lekin ularning qiymatlari kam ham emas :). Birma-bir ko‘rib chiqamiz:

Quotes — matn(kontent) ichida qo‘shtirnoq turini berish. Har xil standartlarda, matn ichida keladigan qo‘shtirnoqlarga ma’lum bir talablar qo‘yiladi, aynan qo‘shtirnoq turi «quotes» orqali veb sahifaga chiqariladi. Qo‘shtirnoqqa olinish kerak bo‘lgan yozuv «q«(quotes ning qisqartirilagan foyrmasi)tegi ichiga yoziladi va bu orqali oldindan aniqlashtirilgan qo‘shtirnoq sahifaga chiqariladi, bu xususiyatning quyidagi qiymatlari bor:

17css_1

Agar ham ochiladigan, ham yopiladigan qo‘shtirnoq kerak bo‘lsa, ikkalovi ketma-ket beriladi. Shu qiymatlardan foydalanib misol ko‘ramiz,

<html>
<head>
<style>
q{
font-size:18px;
quotes: "\00ab" "\00bb";
}
</style>
</head>
<body>
<p>United <q>Man United</q></p>
    </body>
</html>

17css_2

Sounter-increment, counter-reset — bu xususiyatlar hisoblagichlar yaratishda ishlatiladi, ya’ni ro‘yxatlar yaratishda ketma-ket raqamlashlarni amalga oshirib beradi. Counter-reset orqali, hisoblagich hisobini saqlash uchun biror nom(identifikator) beriladi va counter-increment orqali bu identifikato o‘zgartirib boriladi.

Hisoblagich identifikatori, Counter-reset orqali quyidagicha e’lon qilinadi(asosan body tegi uchun yaratiladi):

<style>
body{
counter-reset:akmx;
}
</style>

Bu holda hisob «1» dan boshlanadi, agar «0» dan boshlash kerak bo‘lsa,

counter-reset:akmx -1;

Agar, hisoblagich ma’lum bir raqamdan boshlanish kerak bo‘lsa(misol uchun 5 dan),

counter-reset:akmx 5;

Identifikatorni e’lon qilishni ko‘rib chiqdik, qolgan kombinatsiyalarni o‘zingiz biroz o‘ylab amalga oshira olasiz.

Identifikatorni bittaga oshirish uchun, counter-increment xususiyatidan foydalaniladi:

counter-increment:akmx;

Agar faqat juft sonlar ko‘rinishida oshish kerak bo‘lsa,

counter-increment:akmx 2;

Bu xususiyatgan misol ko‘rish uchun, «content» xususiyatidan xabardor bo‘lish lozim, hisoblagich qiymatlarini brouzerga chiqarish uchun, «content«ning «counter» qiymati kerak bo‘ladi. Biroz oldiga o‘tgan holda aytishim mumkinki, «counter» orqali kerakli joyga hisoblagich qiymatini chiqarish mumkin. Bundan tashqari, kontentning qayeridan, hisoblagich qiymatini chiqarishni aniqlashtirish uchun, «content» hususiyatining «before«(kontentlan oldin) yoki «after«(kontentdan keyin) qiymatlari ham kerak bo‘ladi. Misol ko‘ramiz,

<html>
<head>
<style>
body{
counter-reset:akmx;
}
h3:after{
counter-increment:akmx;
content: counter(akmx) ". ";
}
</style>
</head>
<body>
<h3>Eric Contana</h3>
<h3>Roy Kean</h3>
<h3>Rio Ferdinand</h3>
    </body>
</html>

Misolni tahlil qilaidgan bo‘lsak, «akmx» degan hisoblagich identifikatori yaratildi(1 dan boshlanadi), uning qiymati har safar bittaga oshirilib boriladi,  «h3:before» ya’ni, «h3» tegidan oldin hisoblgich qiymati qo‘yib boriladi(hisoblagich qiymatidan so‘ng nuqta qo‘yiladi), natija

17css_3

Misoldan hammasi tushunarli bo‘ldi deb o‘ylayman. Endi, «content» xususiyatini to‘liq ko‘rib chiqamiz.

Content — veb sahifa matnida mavjud bo‘lmagan ma’lum bir qiymatlarni, shu CSS xususiyati orqali generatsiya qilinib, matnga kiritiladi. Misol qilib, yuqoridagi kodni ko‘rsatishimiz mumkin, tartib raqam matnda mavjud emas edi, kod orqali kiritildi. Bu xususiyatni quyidagi qiymatlari mavjud:

open-quote — «quotes» xususiyati orqali ochiluvchi qo‘shtirnoqni o‘rnatish;

close-quote — «quotes» xususiyati orqali yopiluvchi qo‘shtirnoqni o‘rnatish;

no-open-quote — ochiluvchi qo‘shtirnoqni o‘rnatishni bekor qilish;

no-close-quote — yopiluvchi qo‘shtirnoqni o‘rnatishni bekor qilish;

counter — hisoblagich qiymatini brouzerga chiqarish;

normal — matnning qayerida generatsiya qilingan qiymatlarni chiqarish kerakligini aniqlashtirish, ikkita psevdoklass  qiymati bor: «:before«(matndan oldin), «:after«(matndan keyin).

Misol ko‘ramiz,

<html>
<head>
<style>
 .cont {
    color: green;
    quotes: "<" ">";
   }
   .cont:before {
    content: open-quote;
  }
   .cont:after {
    content: close-quote;
   }</style>
</head>
<body>
<p>Manchester United o'yinchilari uchun</br> <b><span class="cont">2014-2015</span> </b>yil og'ir o'tmoqda</p>
    </body>
</html>

Ajratilgan kontent uchun, o‘rnatilgan qo‘shtirnoq kontent boshi va oxirida namoyon bo‘lmoqda.

17css_5

Kontent ichiga istalgan matn(so‘z, biror yozuv)ni ham kiritishingiz mumkin:

<html>
<head>
<style>
   .kk:after{
   content: " Best of the Best";
   }
   </style>
</head>
<body>
<p> <span class="kk">Manchester United</span></p>
    </body>
</html>

Eng asosiysi, kontent dan keyin yoki oldin(before, after) kerakli yozuvni chiqarishni o‘rnating.

17css_6

Maqola oxirida, yana bir CSS xususiyatini ko‘rsatib o‘tmoqchiman, uning nomi «cursor» deb nomlanadi. Bu xususiyat, sichqoncha belgilangan ob’yekt ustiga olib borilganda uning ko‘rsatkichini o‘zgartirib beradi. Quyidagi rasmda bu xususiyatning qiymatlari rasm ko‘rinishida keltirilgan:

17css_4

YUqoridagi qiymatlardan tashqari, o‘zingiz biror rasmni sichqoncha ko‘rsatkichi sifatida o‘rnatishingiz ham mumkin. Biror misol ko‘ramiz,

<html>
<head>
</head>
<body>
<p>Har xil ko'rinishdagi sichqoncha ko'rsatkichlari:</p>
<a href="#" style="cursor:help">HELP</a> </br>
<a href="#" style="cursor:pointer">POINTER</a></br>
<a href="#" style="cursor:move">MOVE</a></br>
<a href="#" style="cursor:text">TEXT</a></br>
<a href="#" style="cursor:url('owncursor.jpg')">MY_CURSOR</a>
</body>
</html>

Bu misol orqali har xil turdagi sichqoncha ko‘rsatkichlarini ko‘rishingiz mumikin, hattoki o‘zingiz o‘rnatgan rasm ko‘rinishida ham(cursor:url(‘owncursor.jpg’)).