Bu modulda CSS bilan tanishildi: sintaksis, uslublarni sahifaga ulashning uch usuli va eng ko’p ishlatiladigan xususiyatlar.
CSS nima va sintaksisi
HTML sahifaning strukturasini beradi, CSS esa ko’rinishini. CSS qoidasi doim bir xil shaklda yoziladi:
selektor {
xususiyat: qiymat;
}
Selektor — qaysi elementlarga qo’llanishi, jingalak qavs ichida esa xususiyat: qiymat; juftliklari:
h1 {
color: green;
font-size: 40px;
}
Natija: sahifadagi barcha <h1> sarlavhalar yashil rangda va 40 piksel o’lchamda chiqadi.
Bir xil uslubni bir nechta selektorga berish uchun ular vergul bilan yoziladi:
h1, h2, h3 {
font-family: Georgia, serif;
}
CSS’da izoh /* ... */ orasiga yoziladi — HTML izohidan (<!-- -->) farq qiladi, adashtirmang:
/* Sarlavhalar uchun umumiy uslub */
h1 { color: green; }
Tipik xato. Qiymatdan keyin ; qo’ymaslik. Bitta nuqta-vergul tushib qolsa, undan keyingi xususiyatlar ham ishlamay qoladi. Uslub "yarim ishlayotgan" bo’lsa, avval nuqta-vergullarni tekshiring.
Ulashning uch usuli
| Usul | Qayerda yoziladi | Qachon qulay |
|---|---|---|
| Inline | Elementning style atributida |
Bitta elementni tez sinab ko’rish |
| Internal | <head> ichida <style> tegida |
Bitta sahifali kichik ishlar |
| External | Alohida .css faylda, <link> bilan ulanadi |
Haqiqiy loyihalar |
External usulda <head>ga shu qator yoziladi:
<head>
<link rel="stylesheet" href="style.css">
</head>
Haqiqiy loyihada deyarli har doim external ishlatiladi: bitta style.cssni o’zgartirsangiz, unga ulangan hamma sahifa birdan yangilanadi.
Tipik xato. style.css yozib qo’yib, <link>ni unutish — fayl bor, lekin sahifa unga "ulanmagan", shuning uchun hech narsa o’zgarmaydi.
Agar bitta elementga bir nechta joydan uslub kelsa, elementga eng "yaqin" yozilgani g’olib chiqadi: inline uslub internal/external’dan ustun turadi. CSS nomidagi "cascading" (kaskad) so’zi aynan shu ustunlik qoidalarini anglatadi — ular bilan keyingi CSS kursida chuqur tanishasiz.
Asosiy xususiyatlar
p {
color: white;
background-color: darkgreen;
font-size: 18px;
font-family: Arial, sans-serif;
text-align: center;
}
Natija: oq matnli, to’q yashil fonli, markazga tekislangan xatboshilar.
color— matn rangi;background-color— fon rangi.font-size— shrift o’lchami (odatda px’da);font-family— shrift nomi (vergul bilan zaxira variantlar).text-align— matnni tekislash:left,center,right.
Yana ikkita tez-tez ishlatiladigan xususiyat:
h2 {
font-weight: normal; /* qalinlikni olib tashlaydi */
text-decoration: underline; /* tag ostiga chizadi */
}
Rangni uch xil yozish mumkin: nom bilan (red), hex kod bilan (#10B981), RGB bilan (rgb(16, 185, 129)). Hex kod — dizaynda eng ko’p uchraydigan shakl: # belgisidan keyin qizil, yashil va ko’k miqdori juft raqamlarda yoziladi.
Muhim kuzatish — meros (inheritance): body uchun yozilgan font-family yoki color uning ichidagi barcha elementlarga "yuqadi". Shuning uchun butun sahifa shriftini bitta qoida bilan belgilash mumkin:
body {
font-family: Verdana, sans-serif;
}
Natija: sahifadagi hamma matn — sarlavhalardan xatboshigacha — Verdana shriftida.
Amaliyot
- Internal
<style>bilan sahifangiz<h1>ini istalgan rangga bo’yang. style.cssfayli yaratib<link>bilan ulang;<p>uchun shrift o’lchami va rang belgilang.- Bitta xatboshiga bir xil xususiyatni uch usulda (inline, internal, external) har xil qiymat bilan yozing — qaysi biri "g’olib chiqishini" kuzating.
- Sahifa foniga rang bering va matn rangini unga kontrast qilib tanlang — o’qilishi qulay bo’lsin.
Modul testini ishlang — CSS’ning davomi (selektorlar) ikki moduldan keyin chuqurlashadi.