CSS dili

Qayda nədən ibarətdir?

CSS-də selektor elementləri seçir, fiqurlu mötərizə içində xassə–dəyər cütləri görünüşü müəyyən edir. Deklarasiyaları nöqtəli vergüllə ayır. HTML-in head hissəsinə <link rel="stylesheet" href="styles.css"> əlavə et.

body {
  font-family: Arial, sans-serif;
  color: #17233b;
  background-color: #f4f7fa;
}
h1 { font-size: 2rem; text-align: center; }
p {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
}
a { text-decoration: underline; }

Nümunə

Şrift və mətnlə iş

font-family siyahısı ilk əlçatan şrifti seçir; sonda ümumi ailə saxla. font-size ölçü, font-weight qalınlıq, font-style kursiv kimi üslub təyin edir. line-height üçün vahidsiz dəyər mətn ölçüsü ilə uyğun dəyişir. text-align mətnin konteyner daxilində hizalanmasıdır, konteynerin özünü mərkəzləşdirmir.

Xüsusi şrift @font-face ilə lokal fayldan qoşula bilər. Azərbaycan hərflərini dəstəklədiyini yoxla. Rəng oxunaqlı kontrast yaratmalı, link yalnız rəng fərqi ilə seçilməməlidir. Qayda işləmirsə əvvəl fayl yolunu və selektoru yoxla.

Əlavə qeydlər və mənbələr

CSS qaydası selektor və xassə-dəyər cütlərindən ibarətdir. Ayrı üslub faylını HTML-ə qoş, mətnin rəngini, şriftini, ölçüsünü və sətirlər arasındakı məsafəni idarə et.

Niyə vacibdir?

CSS qaydalarını anlamaq dizaynı təsadüfi düzəlişlərlə deyil, məqsədli şəkildə qurmağa imkan verir.

Əvvəlki biliklər

HTML və semantik struktur

Bu mövzuda

Selektor və deklarasiya
CSS faylının qoşulması
Mətn, rəng və şriftlər

Mövzuya baxış

Ölçünün içində nə var?

Standart box model-də məzmunun eni, padding və border birlikdə elementin görünən enini yaradır. box-sizing: border-box təyin etdikdə verilən en padding və border-i də əhatə edir.

* { box-sizing: border-box; }
.kart {
  max-width: 32rem;
  padding: 1.5rem;
  border: 1px solid #d5d9d0;
  line-height: 1.6;
}

Nümunə

Üslub gözlədiyin kimi görünmürsə, qaydanı təkrar yazmaq əvəzinə DevTools-da hansı qaydanın üstün gəldiyini yoxla. Selektorun spesifikliyi və fayldakı sıra nəticəyə təsir edir.

Selektordan səhifə düzülüşünə

Sinif selektoru .card, daxilolma selektoru .card p, birbaşa övlad selektoru .card > p fərqli element qruplarını seçir. Psevdosiniflər elementin vəziyyətini və ya struktur mövqeyini seçir. Üslubları DevTools-da araşdır: qaydanın üstündən xətt çəkilibsə, hansı qaydanın üstün gəldiyini tap.

display: block adətən yeni sətirdə başlayır; inline mətn axınında qalır. inline-block mətn axınında olmaqla en və hündürlük qəbul edir. display: none elementin layout-da yerini də götürür. div və span ümumi konteynerlərdir; uyğun semantik element varsa onu seç.

Flexbox və mövqeləşmə

Flexbox birbaşa övladları əsas və çarpaz ox boyunca düzür. flex-direction dəyişəndə justify-content və align-items-in işlədiyi ox da dəyişir.

.products {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: stretch;
}
.product { flex: 1 1 15rem; }
.product-image { position: relative; }
.product-badge { position: absolute; top: .5rem; right: .5rem; }

Nümunə

relative elementin axındakı yerini saxlayır, absolute isə onu normal axından çıxarır və yerləşdirmə konteynerinə görə mövqeləşdirir. fixed adətən viewport-a görə yerləşir. Şəkil üzərində yazı və yardım izahı qurarkən məzmunu həm hover, həm klaviatura fokusu ilə əlçatan et.

Mövzu üzrə praktika

HTML təqdimat səhifənə ayrıca CSS faylı qoş. Oxunaqlı mətn, profil kartı və görünən fokus üslubu yarat.

Üslublar ayrıca fayldadır; elementlərin ölçüsünü box model ilə izah edə bilirsən.

Mövzunun yoxlama siyahısı

Selektorları və kaskadı izah et
Box model: margin, border və padding fərqini öyrən
Mətn ölçüsü və sətirarası məsafəni tənzimlə
Hover və focus vəziyyətlərini hazırla
display: block, inline, inline-block və none
Flexbox oxları, hizalanma və flex-wrap
Mövqeləşmə və tipik səhifə blokları

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

Mətnin rəngini dəyiş

Rəngləri müqayisə et. Mətn üçün göy rəngi seç.

Mətn rəngi

Hədəf: Mətni göy rəngdə göstər.

Mənim ilk səhifəm

.element { color: #14171d; }

Özün sına

HTML səhifənə ayrıca üslub faylı qoş. Başlıq və abzaslar üçün fərqli şrift ölçüsü, rəng və sətirarası məsafə təyin et.

Nəticəni necə yoxlayım?

CSS ayrıca fayldan qoşulur; rəng, şrift, mətn hizalanması və sətirarası məsafə məqsədli dəyişdirilir.

Gözlənilən nəticə

Başlıq 32 px, abzas 18 px olur və fərqli rənglər alır.
styles.css qoşulması götürüldükdə xüsusi görünüş itir.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Üslub ayrıca styles.css faylındadır; HTML onu link elementi ilə yükləyir.

index.html

<!doctype html>
<html lang="az">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nümunə səhifə</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<main><h1>İlk üslublarım</h1><p>CSS ilə rəng və oxunaqlı sətirarası məsafə qururam.</p></main>
</body>
</html>

styles.css

body{font-family:Arial,sans-serif;padding:24px}h1{font-size:32px;color:#214e80;line-height:1.2}p{font-size:18px;color:#35485a;line-height:1.8}

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.