CSS-in əsas sintaksisi

3.1 Qaydalar (Rules)

CSS-in əsas elementlərinə qaydalar (rules), xassələr (properties) və dəyərlər (values) daxildir. CSS-in əsas sintaksisini anlamaq cəzbedici və funksional veb səhifələr yaratmaq üçün açardır.

CSS-in əsas elementləri:

• Qaydalar (Rules)
• Selektorlar (Selectors)
• Xassələr (Properties)
• Dəyərlər (Values)

Qaydalar (Rules)

CSS qaydaları selektordan və deklarasiya blokundan ibarətdir. Selektor hansı HTML elementlərinə stil tətbiq olunacağını göstərir, deklarasiya bloku isə bir və ya bir neçə xassə və onların dəyərlərini ehtiva edir. Adətən, bu, bir və ya bir neçə xassə və dəyərlərdən ibarət olur və əyri mötərizələrə {} daxil edilir.

Nümunə:

    
      selektor {
        xassə: dəyər;
        xassə: dəyər;
      }
    
  

Başlıq üçün nümunə:

    
      h1 {
        color: blue;
        font-size: 24px;
      }
    
  

Bu nümunədə h1 — selektordur, color və font-size — xassələrdir, blue və 24px isə bu xassələrin dəyərləridir.

3.2 Xüsusiyyətlər və qiymətlər

CSS elementlərin görünüşünü idarə etmək üçün geniş xüsusiyyətlər dəstini təqdim edir. Hər bir xüsusiyyət, bu xüsusiyyətin necə tətbiq ediləcəyini müəyyən edən bir və ya bir neçə dəyərə malikdir.

Əsas xüsusiyyətlər və onların qiymətləri:

Rəng və fon:

• color: mətnin rəngini təyin edir
• background-color: elementin fon rəngini təyin edir

Nümunə:

    
      div {
        color: red;
        background-color: yellow;
      }
    
  

Şrift:

• font-family: şrift ailəsini müəyyən edir
• font-size: şriftin ölçüsünü təyin edir
• font-weight: şriftin qalınlığını müəyyən edir

Nümunə:

    
      h1 {
        font-family: 'Georgia', serif;
        font-size: 36px;
        font-weight: bold;
      }
    
  

Mətn:

• text-align: elementi daxilində mətni düzənləyir
• text-decoration: mətnə vurğulama kimi effektlər əlavə edir

Nümunə:

    
      a {
        text-align: left;
        text-decoration: none;
      }
    
  

Boşluqlar və sərhədlər:

• margin: elementin ətrafındakı xarici boşluqları təyin edir
• padding: elementin daxilindəki boşluqları təyin edir
• border: elementin sərhədini müəyyən edir

Nümunə:

    
      .container {
        margin: 0 auto;
        padding: 20px;
        border: 2px solid #000000;
      }
    
  

Ölçülər və mövqelər:

• width və height: elementin eni və hündürlüyünü təyin edir
• position: elementin yerləşdirmə üsulunu müəyyən edir

Nümunə:

    
      .box {
        width: 200px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 100px;
      }
    
  

Sizə lazımdır:

• elementlərin standart xüsusiyyətlərini yadda saxlamaq
• bu xüsusiyyətlərin standart dəyərlərini yadda saxlamaq
• müxtəlif elementlərin unikal xüsusiyyətlərini yadda saxlamaq
• bu xüsusiyyətlərin praktikada necə işlədiyini yadda saxlamaq
• bu xüsusiyyətlərin bir-birinə necə təsir etdiyini yadda saxlamaq

Bunu etmək üçün ən yaxşı yol çoxlu CSS yazmaq və onun necə işlədiyini görməkdir.