CSSga kirish: sintaksis, selektorlar va ranglar

DarslarWeb dasturlash

CSSga kirish: sintaksis, selektorlar va ranglar

CSS nima, qanday yoziladi, selektorlar turlari, CSSni HTMLga 3 xil usulda ulash va ranglar bilan ishlash.

35 daqiqa
CSS — Dars 1

CSSga kirish

HTML — saytning tanasi bo'lsa, CSS — uning kiyimi. Endi saytlaringiz chiroyli bo'ladi.

colorbackground.class#id*

Dars rejasi

6 ta mavzu
  1. 01CSS nima va nega kerak?
  2. 02CSS sintaksisi
  3. 03Selektorlar
  4. 04CSSni HTMLga ulash (3 usul)
  5. 05Izohlar
  6. 06Ranglar

1. CSS nima va nega kerak?

CSS — Cascading Style Sheets. Qisqacha aytganda, bu til HTML elementlariga ko'rinish beradi: rang, o'lcham, shrift, joylashuv va hokazo.

CSSsiz sayt bu shunchaki qora harflar oq fonda. CSS bilan esa siz xohlagan brendni, xohlagan dizaynni yarata olasiz.

CSS bor va yo'q — farqni ko'ring
Natijajonli

2. CSS sintaksisi

CSS qoidasi 3 qismdan iborat: selektor, xossa (property) va qiymat (value).

1selektor {
2  xossa: qiymat;
3}

Masalan:

1h1 {
2  color: red;
3  font-size: 32px;
4}
  • h1 — selektor (qaysi elementga?).
  • color, font-size — xossa (nimani o'zgartiramiz?).
  • red, 32px — qiymat (qanday qilib?).
  • { } — qoidalar shu qavslar ichida yoziladi.
  • ; — har bir qoidadan keyin nuqta-vergul qo'yiladi.

3. Selektorlar

Selektor — bu CSS qaysi elementga ta'sir qilishini ko'rsatadi. 5 ta asosiy selektor bor:

Teg selektori

Shu turdagi barcha teglarga qo'llanadi.

1p {
2  color: gray;
3}

Class selektori — .nom

HTMLda class="nom" deb yozamiz. CSSda .nom bilan tanlaymiz. Class bir nechta elementda takrorlanishi mumkin.

1<p class="muhim">Muhim matn</p>
2<p class="muhim">Yana muhim matn</p>
1.muhim {
2  color: red;
3  font-weight: bold;
4}

Id selektori — #nom

HTMLda id="nom". CSSda #nom. Id sahifada FAQAT bitta elementga beriladi (u noyob).

1<h1 id="bosh-sarlavha">Salom dunyo</h1>
1#bosh-sarlavha {
2  color: blue;
3}

Universal selektor — *

Sahifadagi BARCHA elementlarga ta'sir qiladi. Ko'pincha boshlang'ich sozlamalar uchun ishlatiladi.

1* {
2  margin: 0;
3  padding: 0;
4}

Selektorlar guruhi — ,  bilan

Bir nechta selektorga bir xil qoida qo'llash uchun ularni vergul bilan ajratamiz.

1h1, h2, h3 {
2  font-family: sans-serif;
3  color: #111;
4}
Barcha selektorlarni sinang
Natijajonli

4. CSSni HTMLga ulash — 3 usul

a) Inline — elementning ichida

Eng oddiy, lekin eng YOMON usul. Faqat zarur holatlarda ishlatiladi. style="..." atributi orqali yoziladi.

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

b) Internal — <style> teg ichida

HTML faylining <head> qismida <style> teg ichida yoziladi. Kichik loyihalar uchun mos.

1<!DOCTYPE html>
2<html>
3<head>
4  <style>
5    p {
6      color: blue;
7    }
8  </style>
9</head>
10<body>
11  <p>Men ko'k matnman</p>
12</body>
13</html>

c) External — alohida .css fayl

ENG YAXSHI usul. CSS alohida faylda turadi va HTMLga <link> orqali ulanadi. Bir CSSni bir nechta HTMLga ulash mumkin.

1<!-- index.html -->
2<head>
3  <link rel="stylesheet" href="style.css">
4</head>
1/* style.css */
2p {
3  color: green;
4}

5. Izohlar

CSSda izoh /* ... */ ichida yoziladi. Brauzer izohni ko'rsatmaydi — u faqat dasturchi uchun.

1/* Bu — sarlavha uchun qoida */
2h1 {
3  color: red; /* qizil rang */
4  /* font-size: 40px; — hozir kerak emas */
5}

6. Ranglar

CSSda rangni 4 xil usulda yozish mumkin:

a) Rang nomi bilan

Eng oddiy usul. 140+ tayyor nom bor: red, blue, green, tomato, crimson, teal va hokazo.

1p { color: tomato; }

b) HEX — # bilan

# belgisi va 6 ta harf/raqam. Dizayner va dasturchilar eng ko'p shu usulni ishlatadi.

1p { color: #ff5733; }       /* to'q sariq */
2h1 { color: #000000; }      /* qora */
3body { background: #ffffff; } /* oq */

c) RGB — qizil, yashil, ko'k

rgb(R, G, B) — har bir rang 0 dan 255 gacha. rgba qo'shimcha shaffoflik (alfa) qabul qiladi — 0 dan 1 gacha.

1p { color: rgb(255, 87, 51); }           /* to'q sariq */
2div { background: rgba(0, 0, 0, 0.5); }   /* yarim shaffof qora */

d) HSL — rang doirasi

hsl(rang, to'yinganlik, yorug'lik). Dizaynda juda qulay — rangni osongina ochish yoki to'qlashtirish mumkin.

1p { color: hsl(10, 100%, 60%); }
Ranglar bilan o'ynang
Natijajonli

Kichik test

0 / 6

1.CSS qoidasi qaysi belgilar ichida yoziladi?

2.HTMLdagi class="tugma" ga CSSda qaysi selektor mos keladi?

3.Qaysi usul CSSni ulashning ENG YAXSHI usuli hisoblanadi?

4.CSSda izoh qanday yoziladi?

5.Qaysi selektor sahifadagi BARCHA elementlarga ta'sir qiladi?

6.rgba(0, 0, 0, 0.5) — bu qanday rang?

Mustaqil ish

0 / 8