CSS-də əsas selektorlar

1. Tipə görə selektorlar (Type Selectors)

CSS-də selektorlar HTML elementlərini seçməyə və onlara stillər tətbiq etməyə imkan verir. Əsas selektorları bilmək səhifədə elementləri dəqiq və effektiv şəkildə seçməyə kömək edir, bu da CSS-ni veb məzmunu üçün güclü bir alət edir. Bu məqalədə tipə görə selektorlar (Type Selectors), sinfə görə selektorlar, identifikatora görə selektorlar, qrup və universal selektorları nəzərdən keçirəcəyik.

Tipə görə selektorlar müəyyən bir teqə aid bütün elementləri seçir. Məsələn, əgər səhifədəki bütün abzaslara stillər tətbiq etmək istəyiriksə, onda biz <p> teqi ilə tipə görə selektordan istifadə edirik.

p {
  color: blue;
  font-size: 16px;
}

<p>Bu mətn mavi olacaq və ölçüsü 16 piksel olacaq.</p>
<p>Eyni stillərə malik ikinci abzas.</p>

Tipə görə selektorlar, müəyyən bir növ elementlərin hamısına, məsələn, bütün başlıqlara və ya abzaslara stillər tətbiq etmək lazım olduqda faydalıdır. Onlar elementlər qrupunun xarici görünüşünə nəzarəti sadələşdirir və saytın dəstəyini daha asan edir.

2. Class Selectors

Class selektorları müəyyən class atribut dəyəri olan elementləri seçməyə imkan verir. Class adı nöqtə (.) ilə sinifin adından əvvəl göstərilir. Eyni class bir neçə element üçün istifadə edilə bilər, bu da bir neçə elementə eyni stili tətbiq etməyə imkan verir.

.highlight {
  background-color: yellow;
  color: blue;
  font-weight: bold;
}

<p class="highlight">Bu mətn sarı fonda mavi rənglə vurğulanıb.</p>
<p>Class-a sahib olmayan adi mətn.</p>
<div class="highlight">Bu blok da highlight class-ının stilləri ilə vurğulanacaq.</div>

Class selektorları universal və rahatdır, çünki stil yaratmağa imkan verir ki, onlar müxtəlif elementlərə tətbiq oluna bilər. Class-lar xüsusilə faydalıdır, əgər əlaqəsiz elementlər qrupunu stilləşdirmək lazımdırsa.

3. ID Seçiciləri (ID Selectors)

ID seçiciləri id atributunun müəyyən bir dəyərinə malik olan elementləri seçir. ID # simvolu ilə adı göstərilir. Class-dan fərqli olaraq, ID səhifədə unikal olmalıdır, bu da onu başlıq və ya naviqasiya paneli kimi unikal elementləri tərtib etmək üçün ideal edir.

#main-header {
  font-size: 24px;
  color: green;
  text-align: center;
}

<h1 id="main-header">Səhifə başlığı</h1>
<p>Bu paraqraf ID seçicisi ilə təsirlənməyəcək.</p>

ID seçiciləri səhifədə yalnız bir elementə stil tətbiq edir, buna görə də onları spesifik stillər ilə unikal elementlərin vurğulanması üçün istifadə edirlər.

4. Qrup selektorlar (Group Selectors)

Qrup selektorlar bir neçə elementə bir anda eyni stili tətbiq etməyə imkan verir. Bu, bir neçə selektoru vergül vasitəsilə bir CSS qaydasında birləşdirməklə edilir. Qrup selektorlar kodu sadələşdirir, çünki bir neçə növ element üçün ümumi stilləri təyin etməyə imkan verir.

h1, h2, h3 {
  color: navy;
  font-family: Arial, sans-serif;
}

<h1>Birinci səviyyəli başlıq</h1>
<h2>İkinci səviyyəli başlıq</h2>
<h3>Üçüncü səviyyəli başlıq</h3>
<p>Bu mətn qrup selektor tərəfindən təsirlənməyəcək.</p>

Qrup selektorlar CSS kodunu qısaltmağa və stilizasiyanı sadələşdirməyə kömək edir, xüsusən də müxtəlif elementlərə, məsələn, fərqli səviyyəli başlıqlara eyni xüsusiyyətləri tətbiq etmək lazım olduqda.

5. Universal Selektorlar (Universal Selectors)

Universal selektor ulduz işarəsi ilə (*) təyin olunur və səhifədəki bütün elementləri seçir. Bu, bütün elementlər üçün eyni bazis stilləri tez bir zamanda təyin etməyə imkan verən güclü bir alətdir, məsələn, eyni aralıqları təyin etmək və ya standart şrift təyin etmək üçün istifadə olunur. Universal selektor stilləri sıfırlamaq (reset) üçün çox faydalıdır, yəni brauzerin standart aralıqlarını və kənar boşluqlarını silib, daha dəqiq stil idarəsi etməyə imkan verir.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<h1>Başlıq</h1>
<p>Sıfır aralıq və kənar boşluqlarla mətn abzası.</p>
<div>Sıfır aralıq və kənar boşluqlarla konteyner.</div>

Bu nümunədə universal selektor bütün elementlər üçün aralıq və boşluqları sıfırlayır, bu da səhifədə stillərin uyğunluğunu (konsistensiyasını) təmin etməyə kömək edir. Bu üsul CSS kodunun əvvəlində tez-tez istifadə olunur ki, vahid stilizasiya yaradılsın.