CSS bilan tanishuv - HTML va CSS

HTML sahifaning skeleti bo'lsa, CSS uning ko'rinishi. Endi sahifamizni bezashni boshlaymiz.

CSS sintaksisi #

CSS

selektor {
    xossa: qiymat;
    xossa: qiymat;
}

Haqiqiy misol:

CSS

h1 {
    color: #2563eb;
    font-size: 32px;
    text-align: center;
}

Qism	Nomi	Vazifasi
`h1`	Selektor	Qaysi elementga
`color`	Xossa (property)	Nima o'zgaradi
`#2563eb`	Qiymat	Qanday o'zgaradi
`{ }`	E'lon bloki	Barcha qoidalar
`;`	Ajratgich	Har bir qoidadan keyin

Nuqta-vergulni unutmang

CSS

/* NOTO'G'RI - keyingi qoida ishlamaydi */
h1 {
    color: blue
    font-size: 32px;
}

/* TO'G'RI */
h1 {
    color: blue;
    font-size: 32px;
}

Oxirgi qoidadan keyin ham ; qo'yish yaxshi odat - keyin yangi qoida qo'shganingizda xato bo'lmaydi.

CSS ni ulashning uch usuli #

Amalda deyarli har doim uchinchi usul ishlatiladi

1. Inline (tavsiya etilmaydi) #

HTML

<p style="color: red; font-size: 18px;">Qizil matn</p>

2. Internal #

HTML

<head>
    <style>
        p {
            color: red;
            font-size: 18px;
        }
    </style>
</head>

3. External (to'g'ri usul) #

css/uslub.css:

CSS

p {
    color: red;
    font-size: 18px;
}

index.html:

HTML

<head>
    <link rel="stylesheet" href="css/uslub.css">
</head>

Nima uchun tashqi fayl afzal?

Keshlanadi - brauzer CSS ni bir marta yuklab, barcha sahifalarda ishlatadi.
Bir joydan boshqariladi - rangni o'zgartirsangiz, butun sayt o'zgaradi.
HTML toza qoladi - tuzilma va ko'rinish ajratilgan.
Jamoada ishlash oson - dizayner CSS bilan, dasturchi HTML bilan ishlaydi.

Izohlar #

CSS

/* Bu bir satrli izoh */

/*
   Ko'p satrli izoh.
   Bo'limlarni ajratish uchun qulay.
*/

/* ==========================================
   SARLAVHA QISMI
   ========================================== */
.sayt-sarlavha {
    background: #ffffff;
}

CSS da // ishlamaydi

JavaScript va PHP dagi // izoh CSS da ishlamaydi. Faqat /* ... */ ishlating.

Kaskad - CSS ning "C" harfi #

CSS - Cascading Style Sheets, ya'ni "kaskadli uslublar jadvali". Bir elementga bir nechta qoida qo'llanganda, brauzer qaysi birini tanlashini kaskad hal qiladi.

CSS

p { color: blue; }
p { color: red; }      /* bu g'olib - keyingi yozilgan */

Uchta omil, muhimlik tartibida:

Daraja	Omil	Izoh
1	Muhimlik	`!important` hammasidan ustun
2	Ustunlik (specificity)	Selektor qanchalik aniq
3	Tartib	Keyingi yozilgan g'olib

Ustunlik (Specificity) #

Har bir selektorning "og'irligi" bor:

Yuqoridagi har doim pastdagini yengadi

HTML

<p id="birinchi" class="muhim">Bu qanday rangda bo'ladi?</p>

CSS

p              { color: blue; }    /* 1 ball */
.muhim         { color: green; }   /* 10 ball */
#birinchi      { color: red; }     /* 100 ball - G'OLIB */

Ballar qo'shiladi:

CSS

p.muhim        { color: orange; }     /* 1 + 10 = 11 */
#birinchi p    { color: purple; }     /* 100 + 1 = 101 */
.a .b .c       { color: teal; }       /* 10 + 10 + 10 = 30 */

!important dan qoching

CSS

p { color: blue !important; }

U ishlaydi, lekin muammo yaratadi: keyinroq rangni o'zgartirmoqchi bo'lsangiz, yana bitta !important yozishingiz kerak bo'ladi. Natijada !important urushi boshlanadi va CSS boshqarib bo'lmas holga keladi.

To'g'ri yechim: selektorni aniqroq qiling yoki kod tartibini o'zgartiring. !important faqat tashqi kutubxona uslubini bekor qilish kabi kam hollarda oqlanadi.

Meros (Inheritance) #

Ba'zi xossalar ota elementdan bolalarga o'tadi:

CSS

body {
    font-family: Arial, sans-serif;
    color: #334155;
    line-height: 1.6;
}

Endi sahifadagi barcha matn shu shrift va rangda bo'ladi - har biriga alohida yozish shart emas.

Meros bo'ladi	Meros bo'lmaydi
`color`	`background`
`font-family`, `font-size`	`border`
`line-height`	`margin`, `padding`
`text-align`	`width`, `height`
`visibility`	`display`
`cursor`	`position`

CSS

/* Merosni majburlash */
.karta {
    border: inherit;
}

/* Merosni bekor qilish */
.maxsus {
    color: initial;      /* brauzer standarti */
    font-size: unset;    /* meros bo'lsa meros, bo'lmasa initial */
}

Birinchi bezatilgan sahifa #

index.html:

HTML

<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Husanboy Qodirov</title>
    <link rel="stylesheet" href="css/uslub.css">
</head>
<body>

<header class="sarlavha">
    <h1>Husanboy Qodirov</h1>
    <p class="kasb">Frontend dasturchi</p>
</header>

<main class="mazmun">
    <section class="bolim">
        <h2>Men haqimda</h2>
        <p>Salom! Men veb-saytlar yarataman va yangi texnologiyalarni o'rganaman.</p>
    </section>

    <section class="bolim">
        <h2>Ko'nikmalar</h2>
        <ul class="konikmalar">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </section>
</main>

<footer class="past">
    <p>&copy; 2026 Husanboy Qodirov</p>
</footer>

</body>
</html>

css/uslub.css:

CSS

/* ==========================================
   UMUMIY SOZLAMALAR
   ========================================== */
body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #334155;
    background: #f8fafc;
}

/* ==========================================
   SARLAVHA
   ========================================== */
.sarlavha {
    background: #2563eb;
    color: #ffffff;
    padding: 48px 24px;
    text-align: center;
}

.sarlavha h1 {
    margin: 0 0 8px;
    font-size: 36px;
}

.kasb {
    margin: 0;
    font-size: 18px;
    opacity: 0.9;
}

/* ==========================================
   ASOSIY MAZMUN
   ========================================== */
.mazmun {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 24px;
}

.bolim {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}

.bolim h2 {
    margin-top: 0;
    color: #0f172a;
    font-size: 22px;
}

/* ==========================================
   KO'NIKMALAR RO'YXATI
   ========================================== */
.konikmalar {
    list-style: none;
    padding: 0;
    margin: 0;
}

.konikmalar li {
    display: inline-block;
    background: #dbeafe;
    color: #1e40af;
    padding: 6px 14px;
    border-radius: 999px;
    margin: 0 6px 6px 0;
    font-size: 14px;
    font-weight: 600;
}

/* ==========================================
   PASTKI QISM
   ========================================== */
.past {
    text-align: center;
    padding: 24px;
    color: #64748b;
    font-size: 14px;
}

2-bo'limdagi bo'sh sahifa bilan taqqoslang - farq CSS tufayli

Kodni tartibli yozish

CSS fayli tez o'sadi. Uni boshqarish uchun:

Bo'limlarni izohlar bilan ajrating
Umumiydan xususiyga qarab yozing (avval body, keyin komponentlar)
Har bir qoidani yangi satrga yozing
Klass nomlarini ma'noli qo'ying: .karta yaxshi, .k1 yomon

Amaliy topshiriq

css/uslub.css faylini yarating va HTML ga <link> bilan ulang.
body ga shrift, rang va line-height bering - meros ishlashini kuzating.
Uchta turli selektor yozing: teg, .class va #id. Bir elementga uchalasini ham qo'llab, qaysi biri g'olib bo'lishini tekshiring.
!important qo'shib ko'ring va nima o'zgarishini ko'ring, so'ng o'chirib tashlang.
Yuqoridagi sahifani takrorlang va ranglarni o'zingizniki bilan almashtiring.
DevTools (F12) da elementni tanlab, qaysi CSS qoidalari qo'llanganini ko'ring. Bekor qilingan qoidalar chizib tashlangan holda ko'rinadi.

Xulosa #

CSS sintaksisi: selektor { xossa: qiymat; }.
Ulashning uch usuli bor, lekin amalda tashqi .css fayl ishlatiladi.
Kaskad: !important → ustunlik → yozilish tartibi.
Ustunlik: inline (1000) > #id (100) > .class (10) > teg (1).
!important dan qoching - u kodni boshqarib bo'lmas holga keltiradi.
Meros: color, font-family kabi xossalar bolalarga o'tadi; margin, border o'tmaydi.
CSS izohlari faqat /* ... */ ko'rinishida.

Keyingi bo'limda selektorlarni chuqurroq o'rganamiz.

CSS sintaksisi #

CSS ni ulashning uch usuli #

1. Inline (tavsiya etilmaydi) #

2. Internal #

3. External (to'g'ri usul) #

Izohlar #

Kaskad - CSS ning "C" harfi #

Ustunlik (Specificity) #

Meros (Inheritance) #

Birinchi bezatilgan sahifa #

Xulosa #

Xatolik topdingizmi?