Menü Kapat

CSS Sintaksis

CSS  seçici və bəyannamə blokundan ibarətdir:

 

Seçici stil istədiyiniz HTML elementini işarə edir.

Bəyannamə bloku  nöqtəli vergüllə ayrılmış bir və ya daha çox bəyanatı ehtiva edir.

Hər bir bəyanatda bir CSS xüsusiyyət adı və bir kolonla ayrılmış bir dəyər daxildir.

CSS bəyannaməsi həmişə nöqtəli vergüllə bitir və bəyannamə blokları ilə əhatə olunur.

Aşağıdakı nümunədə bütün <p> elementləri qırmızı rəngli mətn kimi səhifənin mərkəzində yazilacaq:

<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
text-align: center;
}
</style>
</head>
<body><p>Salam Dünya</p>
<p>CSS’ile ilk proqramımiz</p></body>
</html>

Nəticə:

CSS seçiciləri  element adı, id, sinif, atribut  əsasında “HTML” elementlərini “tapmaq” (və ya seçmək üçün) istifadə olunur.

İd Seçici

İd seçicisi müəyyən element seçmək üçün HTML elementinin id xassəsini istifadə edir.

Bir elementin id’si bir səhifədə unikal olmalıdır, beləliklə id seçicisi bir unikal element seçmək üçün istifadə olunur!

Müəyyən bir id ilə bir element seçmək üçün, haşh (#) xarakterindən istifadə olunur.

Aşağıdakı stil  id = “para1” ilə HTML elementinə tətbiq olunacaq:

<!DOCTYPE html>
<html>
<head>
<style>
#element1 {
text-align: center;
color: blue;
}
</style>
</head>
<body><p id=”element1″>Hello World!</p>
<p>Kompleks tətbiq olunan web inkişaf kursu</p></body>
</html>

Nəticə:

 Class Seçici

Class seçicisi müəyyən bir sinif xüsusiyyətlərinə malik elementləri seçir.

Müəyyən bir sinifdə elementləri seçmək üçün, sinifin adının əvvəlində nöktə (.) yazın.

Aşağıdakı nümunədə, class = “mavi” ilə bütün HTML elementləri mavi olacaq:

<!DOCTYPE html>
<html>
<head>
<style>
.qırmızı {color: red;
}
</style>
</head>
<body><p class=”qırmızı”>Kompleks tətbiq olunan web inkişaf kursu</p>
<p class=”qırmızı”>Qırmızı rəngli mətn</p></body>
</html>

Nəticə:

Qrup Seçiciləri

Eyni tərz olan elementləriniz varsa, məsələn:

h1 {
text-align: center;
color: red;
}h2 {
text-align: center;
color: red;
}p {
text-align: center;
color: red;
}

Yazılan kodların sayını endirmək üçün seçiciləri qruplaşdırmaq daha yaxşı olar.

Seçiciləri qruplaşdırmaq üçün hər bir seçicini vergüllə ayırın:

h1, h2, p {
text-align: center;
color: red;
}