CSS quruluşu (ətraflı)

CSS-in quruluşu iki əsas hissədən ibarətdir. Seçicilər (Selector) və Bildiriş bloku (Declaration Block). Bildiriş bloku da iki yerə ayrılır: Xüsusiyyət (Property) və Dəyər (Value).


Bütün HTML elementləri potensial Seçicilərdir. Seçicilər adını da burdan alır, HTML-in seçilən elementi mənasındadır. Bildiriş bloku belə { mötərizə ilə açılır və bağlanır. Bildirişlər arasında " ; " nöqtəli vergül istifadə edilir. Xüsusiyyət və dəyərlər bir-birindən " : " iki nöqtə ilə ayrılır. 

h1 {
font-family: Arial;
}

bu quruluşda h1 elementlərindəki mətnlər Arial şrifti ilə olacaqdır


Qruplaşdırmaq

Yuxarıda sadəcə bir seçiciyə dəyər təyin etməyi gördük, birdən çox HTML elementinə də dəyər verə bilərik, buna qruplaşdırma deyilir.

p, h3 {
font-family: Arial;
}

Bununla paraqraflarda (p-mətnlərdə) və başlıqlarda (h3) şriftlərin Arial olacağını qeyd etdik. Qruplaşdırma edilən Seçiciləri ayırmaq üçün " , " vergüldən istifadə olunur. İstənilən qədər Seçici qruplaşdırıla bilər. Qruplaşdırma dizaynerlərə xeyli asanlıqlar gətirir. Birdən çox Seçiciyə bir deyil daha çox bildiriş də əlavə edə bilərik.

p, h3 {
font-family: Arial;
font-size:2;
font-weight: bold;
}
 

Seçicilər iki cür olur. Sinif SeçicisiId Seçicisi.


Sinif seçicisi (Class Selector)
Eyni HTML elementinə fərqli xüsusiyyətlər təyin etmək üçün Sinif Seçicisini istifadə etmək lazımdır. Məsələn; hazırlayacağımız səhifədə iki fərqli paraqraf təyin etmək lazımdır. Bunlardan biri sağa söykənən, digərinin isə mərkəzdə olmasını istəyirik.
p.sagateref {
    text-align: right
}

p.merkeze {
    text-align: center
}
Ardınca isə aşağıdakı HTML kodları yazmalıyıq
<p class="sagateref">Xpert.az sizə veb xidmətlər göstərir</p>
<p class="merkeze">Yuxarıdakı yazı elandır</p>
Tutaq ki, yazını mərkəzə çəkməyi sadəcə bir HTML elementinə deyil, çoxlu sayda HTML elementinə əlavə etmək istəsəniz;
.merkeze {
    text-align: center
}
bunu CSS-də yazıb, ardınca istədiyiniz HTML elementinə bu sinifi əlavə edə bilərsiniz
<span class="merkeze">Bu gün hava çox istidir</span>
<p class="merkeze">Bakı gözəl şəhərdir</p>
Bundan başqa birdən çox sinifi bir HTML elementinə də əlavə etmək mümkündür
<p class="vacib elan">Bu gün Nəsimi rayonunda dəhşətli yanğın baş verib</p> 
Yuxarıdakı nümunədə görüldüyü kimi bir "vacib" adlı sinfimiz, bir də "elan" adlı sinfimiz mövcuddur. Bunun üçün yazılacaq kod; 
.vacib {
    font-weight: bold;
}
.elan {
    font-style: italic;
}
.vacib.elan {
    background: silver;
}
vacib mətnlər üçün qalın, elan üçün isə yazını əyri etdik. Bir də hər ikisinə birdən xüsusiyyət əlavə edə bilirik. Diqqət edirsinizsə, görərsiniz ki, class="vacib elan" hər ikisi üçün birdən CSS seçicisində .vacib.elan formasında yazırıq.

Id Seçiciləri
Id seçiciləri Sinif seçicisindən fərqlidir. Sinif Seçicisi səhifədə birdən çox elementə təyin edilə bilir, ancaq Id Seçicisi yalnız bir elementə təyin edilə bilər. Seçici adının əvəllində # işarəsi olan seçicilər Id seçicisidir.
#mavi {
    background:blue;
}

#qirmizi {
    background:red;
}
HTML-da isə
<p id="mavi">Bu yazının arxa fon rəngi mavidir</p>
<p id="qirmizi">Bu yazının arxa fon rəngi qırmızıdır</p>

Sinif yoxsa Id?
Yuxarıda Id Seçicisi üçün hər nə qədər də bir səhifədə yalnız bir dəfə istifadə edilə bilər desək də dizaynerin səhifədə bir çox yerdə istifadə etməsinə brauzerlər diqqət etmir, yəni səhvdir deyə mesaj vermir. Ancaq bu elementləri DOM skriptlərində istifadə edərkən Id-i bir neçə yerdə etdiyimizdə səhv mesajı alacağıq. Bu səbəblə hər nə qədər brauzerlər icazə versə də Id Seçicisini bir dəfə istifadə etməliyik. Birdən çox istifadə edəcəyimiz elementlər üçün Sinif Seçicisini istifadə etməliyik. Bu kodumuzu daha rahat və təmiz edəcək.
Sinif və Id Seçiciləri kiçik-böyük hərfə qarşı həssasdır; 
p.vacibElan {
    font-weight: bold;
}
Və HTML-da
<p class="vacibelan">Problem var</p>
Yuxarıdakı kod işləməyəcək, çünki "E" hərfi bir yerdə böyük, digərində isə kiçik  olaraq istifadə edilmişdir.
CSS3