CSS nima va uni ulash usullari

HTML mazmunning tuzilishi va ma’nosini belgilaydi. CSS — Cascading Style Sheets — shu elementlarning rangi, o’lchami, oralig’i va joylashuvini boshqaradi. HTML’ni o’zgartirmasdan bir xil mazmunga turli dizayn berish mumkin.

CSS qoidasi qanday o’qiladi?

p {
  color: #334155;
  font-size: 18px;
}

p — qaysi elementlar tanlanishini bildiradigan selektor;
{ ... } — deklaratsiyalar bloki;
color va font-size — xususiyatlar;
#334155 va 18px — xususiyatlarning qiymatlari;
har deklaratsiya odatda ; bilan tugaydi.

Brauzer barcha <p> elementlarini topib, ularga blok ichidagi qoidalarni qo’llaydi. CSS xatosi odatda butun sahifani buzmaydi: brauzer tushunmagan deklaratsiyani tashlab, keyingisini o’qishda davom etadi.

Jonli natija

Kod

<article class="card">
<p class="label">YANGI DARS</p>
<h1>CSS bilan tanishuv</h1>
<p>HTML tuzilishni, CSS esa ko'rinishni boshqaradi.</p>
<a href="#">Darsni boshlash</a>
</article>

<style>
body {
background: #f8fafc;
}
.card {
max-width: 480px;
padding: 24px;
border: 1px solid #cbd5e1;
border-radius: 14px;
background: white;
}
.label {
color: #4f46e5;
font-size: 12px;
font-weight: 700;
}
h1 { color: #0f172a; }
a { color: #4338ca; }
</style>

Natija

Natija HTML mazmuni o’sha-o’sha qolib, CSS orqali fon, chegara, bo’shliq va ranglar o’zgarganini ko’rsatadi.

CSS ulashning uch usuli

Tashqi fayl — external CSS

CSS alohida style.css faylida saqlanadi va HTML <head> qismida ulanadi:

<link rel="stylesheet" href="style.css">

/* style.css */
body {
  font-family: Arial, sans-serif;
}

Bu asosiy va tavsiya etiladigan usul: bir fayl ko’p sahifaga ulanadi, brauzer uni keshlashi mumkin va dizayn bir joydan boshqariladi.

Sahifa ichida — internal CSS

Kichik tajriba yoki faqat bitta sahifaga tegishli qoida <style> ichida yozilishi mumkin:

<head>
  <style>
    h1 { color: navy; }
  </style>
</head>

Element ichida — inline CSS

<p style="color: crimson;">Ogohlantirish matni</p>

Inline uslub tez sinov uchun qulay, lekin HTML va dizaynni aralashtiradi, takrorlanadi va qayta boshqarish qiyin. Asosiy loyiha uslublarini tashqi faylda saqlang.

CSS fayl yo’li

HTML va CSS bir papkada bo’lsa href="style.css" yetarli. CSS css papkasida bo’lsa:

<link rel="stylesheet" href="css/style.css">

Ulanish ishlamasa, fayl nomi, kengaytmasi, katta-kichik harf va HTML fayliga nisbatan yo’lni tekshiring. <link> elementi <head> ichida bo’ladi.

Komment va formatlash

CSS kommenti /* va */ orasida yoziladi:

/* Asosiy navigatsiya */
nav {
  background-color: #0f172a;
}

Har xususiyatni alohida qatorda yozish, ikki bo’sh joy indentatsiya va izchil nomlash kodni o’qishni osonlashtiradi.

Amaliy mashq

index.html va style.css yarating. HTML’ga sarlavha, paragraf va havola qo’shing; tashqi CSS orqali fon, matn rangi, ichki bo’shliq va chegara bering. Keyin stylesheet href yo’lini vaqtincha buzib, muammoni DevTools orqali toping.

Qisqacha xulosa

CSS HTML elementlarining ko’rinishi va layoutini boshqaradi.
Qoida selektor va xususiyat: qiymat deklaratsiyalaridan tuziladi.
External CSS loyiha uchun asosiy usuldir.
Internal uslub kichik sahifa yoki tajribaga, inline esa kamdan-kam holatga mos.
Kaskad bir elementga mos kelgan qoidalar orasidan natijani hisoblaydi.

Keyingi darsda CSS selektorlar bilan kerakli elementni aniq tanlaymiz.