CSS selektorlari va Box Model

Selektor turlari, kaskad va specificity, meros, Box Model, box-sizing

10-sinfAdvanced UX/UI6-hafta · 16-dars

Bugun nimalarni o'rganamiz?

Selektorlar

Kimni bezaymiz

Kaskad va specificity

Kim g'olib

Box Model

Har element quti

Takrorlash

Sahifa sarlavhasi uchun qaysi teg ishlatiladi va nechta bo'lishi kerak?

Sahifada bitta h1 bo'ladi.

Selektorlar

Kimni bezaymiz

Selektor tanlash

Selektor turlari


h1 { color: navy; }
.card { background: #fff; }
#logo { width: 120px; }
nav a { text-decoration: none; }
ul > li { margin-bottom: 4px; }
a[href^="https"] { color: green; }
a:hover { color: crimson; }
li:nth-child(2) { font-weight: 700; }

Class nomini vazifasiga qarab bering (.card, .btn), ko'rinishiga qarab emas (.red). Id ni stil uchun kam ishlating.

Mini-test

ul > li qaysi elementlarni tanlaydi?

> — faqat bevosita bola.

Kaskad va specificity

Kim g'olib

Kaskad tartibi

Kim g'olib?


a { color: gray; }            /* 1 */
.menu a { color: blue; }      /* 11 */
nav .menu a { color: green; } /* 12 */
#top a { color: red; }        /* 101 */

body { font-family: Arial, sans-serif; }
/* font-family barcha ichki teglarga o'tadi */

Qoidani tuzatish uchun kuchliroq selektor yozish o'rniga, avval DevTools da qaysi qoida bosib o'tayotganini toping.

Mini-test

Qaysi selektor eng kuchli?

Id bor: 100 + 1 = 101.

Box Model

Har element quti

Qutining qatlamlari

Box Model


* { box-sizing: border-box; }

.card {
  width: 300px;
  padding: 16px;
  border: 1px solid #ccc;
  margin: 12px auto;
}

margin: 0 auto blokni gorizontal markazga qo'yadi (blok kengligi berilgan bo'lsa). padding bo'lsa — fon ichida, margin — fondan tashqarida.

Mini-test

border-box da width: 300px nimani anglatadi?

Umumiy kenglik 300px bo'ladi.

content-box va border-box

content-box

width faqat mazmun; padding va border qo'shiladi

border-box

width hammasini o'z ichiga oladi

Loyihada doim border-box ishlating.

Atamalar. Bosing

Selektor

bosing

CSS qoidasi kimga tegishli ekanini aytadi

Specificity

bosing

Qoidaning kuchliligi

Padding

bosing

Chegara ichidagi bo'sh joy

Margin

bosing

Elementdan tashqaridagi masofa

Bezash tartibi

1. Tanlang

Selektor yozing.

2. Kuchini bilib oling

Specificity ni hisoblang.

3. O'lchang

DevTools da Box Model.

Specificity jadvali

Selektor	Kuch	Misol
Inline style	1000	`style="..."`
Id	100	`#logo`
Class / pseudo	10	`.card`, `:hover`
Teg	1	`p`, `a`
Universal `*`	0	`*`

Pastga bosing: kuchlilik

Maktab sayti kartasi

.card class ni yarating: width, padding, border.
* { box-sizing: border-box; } ni qo'shing va farqni DevTools da ko'ring.
.card:hover uchun soya yoki rang qo'shing.

Box Model sozlash


* { box-sizing: content-box; }
.box { width: 200px; padding: 20px; }

Box Model sozlash


* { box-sizing: border-box; }
.box { width: 200px; padding: 20px; }

CSS raqamlarda

ta qatlam: content, padding, border, margin

— content-box da 200 + 40 + 4 hisobi

— #top a ning kuchi

Specificity va Box Model — CSS ning ikki asosiy qoidasi.

Amaliy topshiriq 20 daqiqa

OsonSelektor yozing: Barcha h2 ni ko'k, .note ni sariq fonda bering.

OsonSpecificity: nav a va .menu a dan qaysi biri kuchli?

O'rtaQuti hisobi: content-box: width:200px; padding:20px; border:2px. Umumiy kenglik?

O'rtaborder-box: Shu qutini umumiy kengligi 200px bo'ladigan qiling.

QiyinHover karta: .card ustiga kelganda soya chiqadigan qoidani yozing.

BonusMeros: color meros bo'ladimi, border ham? Misol bering.

Dars xulosasi

Selektorlar

Teg, class, id, avlod, bola, atribut.

Kaskad

Specificity, tartib va meros.

Box Model

Content, padding, border, margin; border-box.

Uyga vazifa: CSS selektorlari va Box Model.

Keyingi dars: Flexbox

Bir o'lchamli joylashuv

6-hafta · 17-dars