AXV

CSS asoslari: ulash va selektorlar

Sahifaga libos kiydiramiz: CSS nima, qanday ulanadi va elementlar qanday tanlanadi

8-sinfWeb Full-stack4-hafta · 10-dars

Bugungi reja

01. CSS nima?

Vazifasi va yozilish qoidasi.

02. Ulash

inline, internal, external.

03. Selektorlar

Element, class, id, universal, guruh, descendant.

04. Ustuvorlik

Ikki qoida to'qnashsa, kim yutadi?

01

CSS nima?

Cascading Style Sheets: sahifaning tashqi ko'rinishi

HTML skelet, CSS libos

HTML Mazmun va tuzilma «Nima?» + CSS Rang, shrift, joylashuv «Qanday?» = Sayt Chiroyli va tushunarli tayyor!

CSS bilan va CSS siz

sinf.uz

8-sinf yangiliklari

Bugun informatikadan yangi mavzu boshlandi.

Ertaga dars 14:00 da.

sinf.uz

8-sinf yangiliklari

Bugun informatikadan yangi mavzu boshlandi.

Ertaga dars 14:00 da.

CSS qoidasining anatomiyasi

h1 { } color : blue ; selektor xususiyat qiymat Qismlarni bosing: har birining izohi chiqadi

Birinchi CSS qoidamiz


h1 {
  color: blue;
  text-align: center;
  background-color: lightyellow;
}
Bitta qoidaga xohlagancha e'lon yozish mumkin. Har biri ; bilan tugaydi.
02

HTMLga CSS ulash

Uch usul: style atributi, <style> tegi, <link> tegi

CSS ning uch turi

Inline

bosing

Bitta teg ichida, style atributi bilan. Faqat shu elementga ta'sir qiladi.

Internal

bosing

<head> ichidagi <style> tegida. Butun shu sahifaga ta'sir qiladi.

External

bosing

Alohida .css fayl, <link> bilan ulanadi. Ko'p sahifaga bitta fayl.

Uch usul kodda

1. Inline: style atributi


<h1 style="color: red;">Salom</h1>

Tez sinash uchun qulay, lekin takrorlanadi va kodni chalkashtiradi.

2. Internal: style tegi


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

Bitta sahifa uchun yetarli.

3. External: link tegi


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

style.css ichida faqat CSS yoziladi: h1 { color: red; }

External CSS: bitta fayl, ko'p sahifa

index.html haqida.html aloqa.html link style.css yagona dizayn
Rangni bitta joyda o'zgartirsangiz, butun sayt o'zgaradi.

Mini-test

External CSS faylini HTMLga qaysi teg ulaydi?

To'g'ri: <link> teg <head> ichida, rel="stylesheet" va href bilan yoziladi.
03

Selektorlar

Aynan kerakli elementni tanlash san'ati

Oltita selektor

TuriYozilishiNimani tanlaydi
ElementpBarcha <p> teglari
Class.kartaclass="karta" elementlar
Id#logoid="logo" yagona element
Universal*Sahifadagi hamma element
Guruhh1, h2Vergul bilan sanalganlar
Descendantnav anav ichidagi barcha a

Element, class va id


p {
  color: gray;
}

.karta {
  background-color: lightyellow;
}

#logo {
  font-size: 32px;
}
    

<p>Oddiy matn</p>
<div class="karta">...</div>
<div class="karta">...</div>
<h1 id="logo">AXV</h1>

Class yoki id?

Class

  • Nuqta bilan: .karta
  • Ko'p elementda takrorlanadi
  • Bitta elementda bir nechta: class="karta katta"

Ko'pincha shu ishlatiladi

Id

  • Panjara bilan: #logo
  • Sahifada faqat bir marta
  • Yagona, noyob element uchun

Bir id ikki marta yozilmaydi

Selektor ta'siri

sinf.uz

Yangiliklar

Birinchi xabar

Ikkinchi xabar

Selektor ta'siri

sinf.uz

Yangiliklar

Birinchi xabar

Ikkinchi xabar

Bitta qoida p { color: crimson; } ikkala abzatsni bir vaqtda bo'yadi.

Guruh va descendant selektor


h1, h2, h3 {
  color: navy;
}

nav a {
  text-decoration: none;
}

* {
  margin: 0;
}

Chuqurroq bilish uchun pastga bosing

Descendant: «ichidagi»

<nav> <a> <a> <a> nav tashqarisida nav a tanlaydi: yashil qutilarni
04

Ustuvorlik

Ikki qoida bir elementga to'qnashsa, qaysi biri yutadi?

Specificity: kim kuchliroq?

element 1 .class 10 #id 100 inline 1000

Ballar hisoblash uchun oddiy o'xshatish. Teng bo'lsa, oxirgi yozilgani yutadi.

Matn qaysi rangda?


p { color: red; }
.xabar { color: green; }
#asosiy { color: blue; }
    

<p id="asosiy" class="xabar">
  Salom!
</p>

Abzats matni qaysi rangda ko'rinadi?

Id (100) > class (10) > element (1). Eng kuchlisi yutadi, qoida tartibining ahamiyati yo'q.

Odatiy xatolar

Nuqta unutildi

karta { ... } degan qoida <karta> tegini qidiradi. To'g'risi: .karta

Nuqtali vergul yo'q

color: red dan keyingi e'lon ishlamay qolishi mumkin. Har doim ;

Fayl ulanmagan

href yo'li noto'g'ri yoki rel="stylesheet" yo'q: stil chiqmaydi

Amaliy topshiriq 30 daqiqa

Osonindex.html va style.css yarating, ulang, h1 rangini o'zgartiring.
O'rta3 ta .karta, #logo, guruh h2, h3 va nav a qoidalarini yozing.
QiyinBir elementga 3 ta to'qnashuvchi qoida yozing, natijani oldindan taxmin qiling va tekshiring.

Bugungi dars xulosasi

0
CSS ulash: inline, internal, external
0
selektor turi
0
ustuvorlik: element, class, id, inline
Keyingi dars (11): rang va shrift bilan ishlash, meros olish.