Əsas seçicilər

4.1 Tipə görə seçicilər

CSS-də seçicilər üslubun tətbiq ediləcəyi elementləri müəyyən etmək üçün istifadə olunur. Əsas seçicilər tipə görə, sinfə görə, identifikatora görə və universal seçicilərdən ibarətdir. Bu seçicilərin hər birinin öz xüsusiyyətləri və tətbiq sahələri var.

Tipə görə seçicilər (Type Selectors)

Tipə görə seçicilər müəyyən tipdəki bütün elementlərə üslub tətbiq edir. Məsələn, bütün paraqraflara (<p>), başlıqlara (<h1>, <h2> və s.) və ya digər HTML-teqlərinə üslub tətbiq etmək olar.

    
      tagname {
        xassə: qiymət;
        xassə: qiymət;
      }
    
  

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

Bu seçici bütün <p> elementlərinə sənəddə üslub tətbiq edəcək.

Xüsusiyyətlər:

• Təyin olunmuş tipdəki bütün elementlərə tətbiq edilir
• Müəyyən tipdəki bütün elementlərə tətbiq olunması üçün qlobal üslublar üçün əlverişlidir

4.2 Klass üzrə selektorlar

Klass üzrə selektorlar müəyyən bir klassı olan bir və ya bir neçə elementə üslub tətbiq etməyə imkan verir. Klasslar HTML-də class atributu ilə müəyyən edilir və CSS-də nöqtə (.) işarəsi ilə göstərilir.

Sintaksis:

    
      .classname {
        xassə: dəyər;
        xassə: dəyər;
      }
    
  

Nümunə:

    
      .button {
        background-color: green;
        color: white;
        padding: 10px;
      }
    
  

Bu selektor button klassına sahib olan bütün elementlərə üslub tətbiq edəcək.

Xüsusiyyətlər:

• Eyni klass bir neçə element üçün istifadə edilə bilər
• Fərqli elementlərə eyni üslubu asanlıqla tətbiq etməyə imkan verir

4.3 İdentifikator üzrə selektorlar

İdentifikator üzrə selektorlar unikal identifikatoru olan elementə stil tətbiq edir. İdentifikatorlar HTML-də id atributu ilə müəyyən edilir və CSS-də # simvolu ilə göstərilir.

Sintaksis:

    
      #uniq-id {
        xassə: qiymət;
        xassə: qiymət;
      }
    
  

Nümunə:

Bu selektor main identifikatoru olan elementə stil tətbiq edəcək.

    
      /* #main identifikatoru olan elementi seçir */
      #main {
        width: 800px;
        background: yellow;
      }
    
  

    
      <div id="main">Bu elementin eni 800px olacaq.</div>
      <div>Bu element stilizasiya olunmayacaq.</div>
    
  

Xüsusiyyətlər:

• İdentifikator səhifədə unikal olmalıdır
• Başlıq və ya əsas məzmun kimi unikal elementlərin stilizasiyası üçün istifadə edilir

4.4 Qrup selektorları

Qrup selektorları eyni qaydanı bir neçə elementə tətbiq etməyə imkan verir. Onlar kod miqdarını azaldır və stillərin idarə edilməsini asanlaşdırır.

Sintaksis:

    
      selektor, selektor, … {
        xüsusiyyət: dəyər;
        xüsusiyyət: dəyər;
      }
    
  

Nümunə:

    
      /* Bütün h1, h2 və h3 elementlərini seçir */
      h1,
      h2,
      h3 {
        font-family: Arial, sans-serif;
      }
    
  

    
      <h1>Başlıq 1</h1>
      <h2>Başlıq 2</h2>
      <h3>Başlıq 3</h3>
      <p>Bu mətn bu qayda ilə stilləşdirilməyəcəkdir.</p>
    
  

4.5 Universal Selektorları

Universal selektorlar səhifədəki bütün elementlərə stil tətbiq edir. Onlar ulduz (*) ilə təmsil olunur və stil sıfırlamaq və ya bütün elementlərə ümumi stil tətbiq etmək üçün faydalı ola bilər.

Sintaksis:

    
      * {
        xüsusiyyət: dəyər;
        xüsusiyyət: dəyər;
      }
    
  

Nümunə:

Bu selektor səhifədəki bütün elementlərə stil tətbiq edəcək, onların boşluqlarını sıfırlayacaq və box modelini təyin edəcək.

    
      <div>Paraqraf 1</div>
      <div>Paraqraf 2</div>
    
  

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

Xüsusiyyətlər:

• Səhifədəki bütün elementlərə tətbiq olunur
• Qlobal stil sıfırlamaları və ya bütün elementlər üçün əsas stillərin tətbiqi üçün faydalıdır