Oldingi darslardan CSS haqida biroz bo‘lsa ham ma’lumotga ega bo‘ldingiz. Bu maqola to‘liq, CSS kodlarini HTML kodlarida ishlatishni ko‘rsatib o‘taman. CSS kodlarini tushuntirib o‘tmayman, faqat ulashni va yozilish sintaksisini ko‘rsataman, keyingi maqolalardan boshlab, CSS stillarini birma-bir ko‘rib chiqamiz. CSS natijalarini brouzerda ko‘rish mumkin bo‘ladi, yana bir narsa, CSSga tegishli barcha darslar misollari «Firefox Mozilla» brouzeri orqali tekshiriladi, agar sizda boshqa brouzer bo‘lsa, misol natijalari sal farq qilishi mumkin.

CSS stillar quyidagicha yoziladi:

H1{color: blue; font-size:14 px}

1. Selektor nomi — yozilgan stilni qaysi tegda foydalanish(misolda H1).

2. Qavs — stillar boshlanganini bildiradi.

3. Stil xususiyati(Свойство) — qaysi stil xususiyatidan foydalanishni o‘rnatish(misolda color, font-size).

4. Qiymat — tanlangan stil xususiyat qiymati(misolda blue, 14 px).

Agar bir necha stil xususiyatlaridan foydalaniladigan bo‘lsak, ular qo‘shtirnoq(;) orqali ajratiladi, oxirida qo‘shtirnoq qo‘yish shart emas. Stil xususiyatlari yig‘indisi shaklli qavs ichiga olinishi shart({ }) va har bir stil xususiyatidan so‘ng, uning qiymatini berishdan oldin ikki nuqta(:) qo‘yilishi kerak.

Sintaksisi bilan tanishib chiqdik, endi HTML kodga ulashni ko‘rsatib o‘taman. Bir necha xil usulda ulash mumkin:

1. CSS stillarini alohida faylga yozib, bu faylni HTML kodida chaqirib ishlatish mumkin. Misol uchun, «style.css» nomli fayl yaratib ichiga quyidagi stil xususiyat va qiymatlarini kiritamiz.

h1{color:blue;font-size:14px}

Undan so‘ng, «index.html» fayl yaratib, bu faylni yuqorida yaratgan «style.css» nomli fayl bilan bitta papkaga joylashtiramiz, so‘ng bu faylga quyidagi HTML teglarni kiritamiz(HTML teglar bilan tanishish).

<html>
<head>
<title>CSS bilan ishlash</title>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<h1>Hello World CSS!</h1>
</body>
</html>

HTML kodni ishga tushiramiz va quyidagi natijani olamiz,

3css_1

Ko‘rib turganingizdek «Hello World CSS!» yozuvi, «style.css» faylida ko‘rsatgan stilimizni oldi, ya’ni ko‘k rang va 14 piksel o‘lcham.

2. HTML hujjat ichida, stil xususiyatlarini aniqlashtirib qo‘yish mumkin.

<html>
<head>
<title>CSS bilan ishlash</title>
<style type="text/css">
h1{color:blue;font-size:14px}
</style>
</head>
<body>
<h1>Hello World CSS!</h1>
</body>
</html>

Natija, yuqoridagi bilan bir xil, bunda bitta tegga bitta stil berildi, agar o‘zgarishlar qilinmasa, shu teg qayerda ishlatilsa, hamma yerda shu stil dan foydalaniladi.

3. Identifikator orqali bog‘lash. O‘zgarmas nomga ega bitta stillar xususiyati yoziladi va u faqat bitta element uchun ishlatiladi. Ishlatishda «ID» kalit so‘zidan foydalaniladi, identifikator esa «#» belgisi bilan e’lon qilinadi.

<html>
<head>
<title>CSS bilan ishlash</title>
<style type="text/css">
#akm{color:blue;font-size:14px}
</style>
</head>
<body>
<h1 id="akm">Hello World CSS!</h1>
</body>
</html>

4. Klass orqali bog‘lash. Bitta klass ichida bir necha stil xususiyatlari aniqlashtirib olinadi, so‘ng, «class» kalit so‘zi orqali chaqirilib foydalaniladi, nuqta(.) orqali e’lon qilinadi. Identifikatordan farqli ravishda, bir yoki bir necha element orqali ishlatish mumkin.

<html>
<head>
<title>CSS bilan ishlash</title>
<style type="text/css">
.akm{ color:red;font-size:14px}
</style>
</head>
<body>
<h1 class="akm">Hello World CSS!</h1>
<h3>Hello World CSS!</h3>
<h3 class="akm">Hello World CSS!</h3>
</body>
</html>

3css_2

5. HTML kodi ichida(body tegi orasida) bog‘lanish, istalgan HTML kodi ichida, tegning «style» attributi orqali stil yaratish mumkin, bu stil faqat shu elementga xos bo‘lib, boshqa element uchun ishlatib bo‘lmaydi.

<html>
<head>
<title>CSS bilan ishlash</title>
<style type="text/css">
.akm{ color:red;font-size:14px}
</style>
</head>
<body>
<h1 style="color:green; font-family:verdana">Hello World CSS!</h1>
</body>
</html>

Natija quyidagicha bo‘ladi

3css_3

Bog‘lanishni, qo‘yilgan masala asosida, yuqoridagi biror turidan foydalanib amalga oshirishingiz mumkin bo‘ladi.