CSS asoslari

CSS (Cascading Style Sheets) — bu HTML ingiz qanday ko'rinishini boshqaradigan til — ranglar, shriftlar, oraliqlar va joylashuv. HTML kontentni ta'minlaydi; CSS uni ko'rimli qiladi.

Qoidaning shakli

CSS qoidasi (rule) ikki qismdan iborat: qaysi elementlarni uslublash kerakligini tanlaydigan selektor va ular qanday ko'rinishi kerakligini tavsiflovchi property: value; juftliklaridan iborat deklaratsiya bloki.

p {
  color: navy;
  font-size: 16px;
}

Bu yerda p — selektor, color va font-size — xususiyatlar (properties), navy va 16px esa ularning qiymatlari (values).

Selektorlar

Doimiy ishlatadigan uchta selektor:

Element selektori — turdagi har bir tegga qaratilgan. p { ... } barcha paragraflarni uslublaydi.
Class selektori — nuqta bilan boshlanadi va o'sha class atributiga ega har qanday elementga qaratilgan. Ko'plab elementlar bo'ylab qayta ishlatiladigan.
ID selektori — # bilan boshlanadi va o'sha id ga ega bitta elementga qaratilgan. IDlar sahifada noyob bo'lishi kerak.

p { color: gray; }          /* element */
.warning { color: red; }    /* class */
#logo { width: 120px; }     /* id */

<p class="warning">Watch out!</p>

Classlar — asosiy ishchi kuchi — uslublash uchun ularga ustunlik bering, chunki ular qayta ishlatiladigan va moslashuvchan.

Specificity: kim g'olib chiqadi?

Ikkita qoida bir xil elementda bir xil xususiyatni belgilaganda, brauzerga tenglikni buzuvchi kerak. Specificity — qaysi qoida g'olib chiqishini hal qiladigan ballash tizimi. Taxminan, ko'proq aniq selektorlar kamroq aniqlarni yengadi:

ID selektorlari eng kuchli.
Class selektorlari o'rtada.
Element selektorlari eng zaif.

Shunday qilib #logo .warning ni yengadi, u esa p ni yengadi. Agar ikkita qoida bir xil specificityga ega bo'lsa, oxirgi yozilgani g'olib chiqadi (bu "cascading" qismi). Specificityni past saqlashga harakat qiling va classlarga tayaning — bu CSS ingizni oldindan aytib bo'ladigan va bekor qilishni oson qiladi.

CSS qayerga joylashadi

CSS ni joylashtirishning uchta joyi bor:

Inline — bevosita elementdagi style atributi. Eng yuqori specificity, lekin qayta ishlatish qiyin va undan qochgan ma'qul.
Internal — HTML <head> ichidagi <style> teg ichida. Bitta kichik sahifa uchun yaxshi.
External — <link rel="stylesheet" href="styles.css"> bilan bog'langan alohida .css faylda. Bu standart yondashuv: bitta fayl butun saytingizni uslublaydi va brauzerlar uni kesh qilishi mumkin.

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

Suhbat maslahatlari

Uchta selektor turini va ID o'rniga qachon classga murojaat qilishni biling.
Specificityni oddiy tushuntiring: ID class ni yengadi, class element ni yengadi, keyingi qoidalar esa tenglikni buzadi.
Standart sifatida external stylesheetlarni tavsiya qiling va nega inline uslublardan tavsiya etilmasligini ayta olishingiz kerak.

CSS asoslari

CSS (Cascading Style Sheets) — bu HTML ingiz qanday ko'rinishini boshqaradigan til — ranglar, shriftlar, oraliqlar va joylashuv. HTML kontentni ta'minlaydi; CSS uni ko'rimli qiladi.

Qoidaning shakli

p {
  color: navy;
  font-size: 16px;
}

Bu yerda p — selektor, color va font-size — xususiyatlar (properties), navy va 16px esa ularning qiymatlari (values).

Selektorlar

Doimiy ishlatadigan uchta selektor:

Element selektori — turdagi har bir tegga qaratilgan. p { ... } barcha paragraflarni uslublaydi.
Class selektori — nuqta bilan boshlanadi va o'sha class atributiga ega har qanday elementga qaratilgan. Ko'plab elementlar bo'ylab qayta ishlatiladigan.
ID selektori — # bilan boshlanadi va o'sha id ga ega bitta elementga qaratilgan. IDlar sahifada noyob bo'lishi kerak.

p { color: gray; }          /* element */
.warning { color: red; }    /* class */
#logo { width: 120px; }     /* id */

<p class="warning">Watch out!</p>

Classlar — asosiy ishchi kuchi — uslublash uchun ularga ustunlik bering, chunki ular qayta ishlatiladigan va moslashuvchan.

Specificity: kim g'olib chiqadi?

ID selektorlari eng kuchli.
Class selektorlari o'rtada.
Element selektorlari eng zaif.

CSS qayerga joylashadi

CSS ni joylashtirishning uchta joyi bor:

Inline — bevosita elementdagi style atributi. Eng yuqori specificity, lekin qayta ishlatish qiyin va undan qochgan ma'qul.
Internal — HTML <head> ichidagi <style> teg ichida. Bitta kichik sahifa uchun yaxshi.
External — <link rel="stylesheet" href="styles.css"> bilan bog'langan alohida .css faylda. Bu standart yondashuv: bitta fayl butun saytingizni uslublaydi va brauzerlar uni kesh qilishi mumkin.

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

Suhbat maslahatlari

Uchta selektor turini va ID o'rniga qachon classga murojaat qilishni biling.
Specificityni oddiy tushuntiring: ID class ni yengadi, class element ni yengadi, keyingi qoidalar esa tenglikni buzadi.
Standart sifatida external stylesheetlarni tavsiya qiling va nega inline uslublardan tavsiya etilmasligini ayta olishingiz kerak.

CSS asoslari

CSS asoslari

Qoidaning shakli

Selektorlar

Specificity: kim g'olib chiqadi?

CSS qayerga joylashadi

Suhbat maslahatlari

CSS asoslari

CSS asoslari

Qoidaning shakli

Selektorlar

Specificity: kim g'olib chiqadi?

CSS qayerga joylashadi

Suhbat maslahatlari

Muhokama

Muhokama