CSS əsasları: selektorlar, rənglər, şriftlər və kaskad

Bu dərsdə öyrənəcəksən

CSS-i səhifəyə qoşmaq və qaydanın hissələrini adlandırmaq
Teq, sinif, id, nəsil və psevdosinif selektorlarından istifadə etmək
Rəngləri, ölçü vahidlərini (px, %, em, rem) və şrift xassələrini tətbiq etmək
Kaskadı, spesifikliyi və varisliyi izah etmək

İndiyə qədər yazdığın səhifələr düzgün qurulub, amma bir az darıxdırıcı görünür: ağ fon, qara mətn, standart şrift. CSS (Cascading Style Sheets — kaskad üslub cədvəlləri) səhifəyə görünüş verir. Maraqlısı budur ki, eyni HTML-ə başqa CSS faylı qoşmaqla səhifəni tamamilə dəyişmək olar — HTML-in bir sətrini belə dəyişmədən.

CSS qaydası və onu qoşmaq

CSS qaydalardan ibarətdir. Qayda selektordan (hansı elementlər) və fiqurlu mötərizədəki elanlardan (nə dəyişilir) ibarətdir. Hər elan xassə və qiymətdən ibarətdir, aralarında iki nöqtə, sonunda isə nöqtəli vergül qoyulur.

CSS

/* selector   { property: value; } */
h1 {
  color: #e34f26;
  font-size: 32px;
}

h1 — selektor, color və font-size — xassələr, #e34f26 və 32px — qiymətlər. /* … */ CSS-də şərhdir.

CSS-i səhifəyə üç yolla qoşmaq olar. Real saytlarda ən yaxşısı ayrıca fayldır: bütün səhifələr eyni üslubu paylaşır və brauzer faylı bir dəfə yükləyib yadda saxlayır.

HTML

<!-- 1. External file, inside <head> (best choice) -->
<link rel="stylesheet" href="styles.css">

<!-- 2. A <style> block, inside <head> -->
<style>
  p { color: navy; }
</style>

<!-- 3. The style attribute on one element -->
<p style="color: navy;">Hello</p>

Selektorlar

Selektor	Nəyi seçir
`p`	bütün `<p>` elementlərini (teq selektoru)
`.note`	`class="note"` olan bütün elementləri
`#logo`	`id="logo"` olan yeganə elementi
`nav a`	`<nav>`-ın içindəki bütün `<a>` elementlərini (nəsil selektoru)
`h2, h3`	həm `<h2>`, həm də `<h3>` elementlərini (qruplaşdırma)
`a:hover`	siçan üzərində olan keçidi (psevdosinif)

HTML· Kodu dəyiş və yenidən işə sal

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  p { color: #334155; }
  .note { background: #fef3c7; padding: 6px 10px; border-radius: 6px; }
  #main-title { color: #7c3aed; }
  li a { color: #0891b2; font-weight: bold; }
  h2, h3 { font-family: Georgia, serif; }
  a:hover { color: #db2777; }
</style>

<h2 id="main-title">CSS selectors</h2>
<p>A normal paragraph.</p>
<p class="note">A paragraph with the class note.</p>
<ul>
  <li><a href="#">A link inside a list</a></li>
</ul>
<h3>Another heading</h3>
<a href="#">A link outside the list</a>

Önizləmə

Siçanı keçidlərin üzərinə gətir — :hover rəngi dəyişir. Birinci abzasa da class="note" əlavə et və nə baş verdiyinə bax.

Rənglər və ölçü vahidləri

color mətnin rəngini, background isə fonu dəyişir. Rəngi bir neçə cür yazmaq olar: adla (tomato), onaltılıq kodla (#0ea5e9 — qırmızı, yaşıl və mavinin payı), rgb() ilə (hər kanal 0–255) və hsl() ilə (rəng tonu 0–360°, doyğunluq və işıqlılıq faizlə). rgb() və hsl() daxilində / 0.5 kimi şəffaflıq da vermək olar.

HTML· Kodu dəyiş və yenidən işə sal

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  div { margin: 6px 0; padding: 10px; border-radius: 8px; color: white; }
  .name { background: tomato; }
  .hex { background: #0ea5e9; }
  .short { background: #f60; }
  .rgb { background: rgb(34, 197, 94); }
  .alpha { background: rgb(124 58 237 / 0.4); color: #1e293b; }
  .hsl { background: hsl(330, 80%, 55%); }
</style>

<div class="name">tomato: a color name</div>
<div class="hex">#0ea5e9: hex code</div>
<div class="short">#f60: short hex for #ff6600</div>
<div class="rgb">rgb(34, 197, 94)</div>
<div class="alpha">rgb(124 58 237 / 0.4): 40% visible</div>
<div class="hsl">hsl(330, 80%, 55%)</div>

Önizləmə

hsl()-də yalnız birinci ədədi (rəng tonunu) dəyiş: 0 — qırmızı, 120 — yaşıl, 240 — mavi.

Vahid	Nəyə nisbətən	Harada istifadə olunur
`px`	sabit ölçü (ekran pikseli)	haşiyələr, kiçik boşluqlar
`%`	valideyn elementin ölçüsü	enlər
`em`	elementin öz şrift ölçüsü (`font-size`-da isə valideynin şrifti)	mətnə uyğun daxili boşluqlar
`rem`	kök elementin (`<html>`) şrift ölçüsü, adətən 16px	şrift ölçüləri, boşluqlar
`vw`, `vh`	pəncərənin eninin / hündürlüyünün 1%-i	tam ekranlı bloklar

HTML· Kodu dəyiş və yenidən işə sal

<style>
  html { font-size: 16px; }
  body { font-family: system-ui, sans-serif; padding: 12px; }
  .box { font-size: 20px; border: 2px dashed #94a3b8; padding: 8px; }
  .em { font-size: 1.5em; }
  .rem { font-size: 1.5rem; }
  .half { width: 50%; background: #bae6fd; }
</style>

<div class="box">
  The parent's text is 20px
  <p class="em">1.5em = 1.5 × 20px = 30px</p>
  <p class="rem">1.5rem = 1.5 × 16px = 24px</p>
  <p class="half">width: 50% of the parent</p>
</div>

Önizləmə

.box-un şrift ölçüsünü 30px et: em ilə yazılan mətn böyüyəcək, rem ilə yazılan isə dəyişməyəcək.

Şriftlər və mətn

font-family şrifti seçir. Siyahıda bir neçə şrift yazılır: birincisi istifadəçinin kompüterində yoxdursa, brauzer növbətini götürür. Siyahı ümumi ailə ilə bitməlidir: sans-serif, serif və ya monospace. system-ui isə cihazın öz sistem şriftidir. font-size ölçünü, font-weight qalınlığı (400 — adi, 700 — qalın), line-height sətirlərarası məsafəni, text-align isə düzləndirməni təyin edir.

HTML· Kodu dəyiş və yenidən işə sal

<style>
  body { font-family: system-ui, sans-serif; padding: 16px; background: #f8fafc; }
  .card { max-width: 340px; padding: 16px; background: white; border-radius: 12px; }
  h2 { font-family: Georgia, 'Times New Roman', serif; margin-top: 0; }
  .tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
         text-transform: uppercase; color: #0d9488; }
  p { line-height: 1.6; color: #475569; }
  .price { font-size: 1.5rem; font-weight: 700; text-align: right; color: #1e293b; }
</style>

<div class="card">
  <div class="tag">New book</div>
  <h2>The Caspian Sea</h2>
  <p>A short guide to the largest lake on Earth, its coasts and its wildlife.</p>
  <div class="price">12 AZN</div>
</div>

Önizləmə

line-height-ı 1-ə endir və mətnin necə sıxlaşdığına bax. text-transform: uppercase HTML-dəki mətni dəyişmədən onu böyük hərflərlə göstərir.

Kaskad, spesifiklik və varislik

Bir elementə bir neçə qayda eyni xassəni fərqli qiymətlə verəndə hansı qalib gəlir? Bunu kaskad həll edir. Əvvəl spesifikliyə baxılır — selektor nə qədər dəqiqdirsə, bir o qədər güclüdür: style atributu > id > sinif və psevdosinif > teq. Spesifiklik bərabərdirsə, sonra yazılan qayda qalib gəlir.

HTML· Kodu dəyiş və yenidən işə sal

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; font-size: 18px; }
  p { color: green; }
  .warning { color: darkorange; }
  #special { color: crimson; }
  p { color: royalblue; }
  .box { color: purple; border: 2px solid #cbd5e1; padding: 8px; }
</style>

<p>1. Which color am I?</p>
<p class="warning">2. And me?</p>
<p class="warning" id="special">3. And me?</p>
<div class="box">4. I am purple, and so is my <em>child</em>.</div>

Önizləmə

Əvvəlcə cavabı özün tap, sonra önizləməyə bax. 1 — mavi (eyni spesifiklik, sonuncu qayda qalib gəlir), 2 — narıncı (sinif teqdən güclüdür), 3 — tünd qırmızı (id sinifdən güclüdür), 4 — <em> rəngi valideyndən miras alır, haşiyəni isə yox.

Tərif

Varislik

Bəzi xassələrin qiymətinin valideyndən uşaq elementlərə öz-özünə keçməsi. Mətnlə bağlı xassələr (color, font-family, font-size, line-height) irsən keçir; qutu ilə bağlı xassələr (border, margin, padding, background) isə keçmir. Ona görə şrifti bir dəfə body-yə vermək kifayətdir.

Əsas fikirlər

CSS qaydası = selektor + { xassə: qiymət; }; real saytlarda CSS ayrıca fayldan <link> ilə qoşulur.
Əsas selektorlar: p (teq), .class, #id, nav a (nəsil), a:hover (psevdosinif).
Rənglər: ad, hex, rgb(), hsl(); vahidlər: px sabitdir, %, em, rem, vw isə nisbidir.
Toqquşmada spesifiklik qərar verir (style > id > sinif > teq), bərabər olanda isə sonuncu qayda qalib gəlir.
Mətn xassələri (color, font-*) irsən keçir, qutu xassələri (margin, border, padding) keçmir.

Özünü yoxla

10 sual. Hər düzgün cavab XP qazandırır.

1 / 10

class="card" olan bütün elementləri hansı selektor seçir?