Codecourse

Əsas qaydalar

HTML-dən fərqli olaraq stil qaydalarının öz yazılış formatı var. Selektor əsas anlayışdır. Teq, klass və identifikatorlar selektor rolunda çıxış edir. Yazılış qaydası aşağıdakı kimidir.

Əvvəlcə selektorun adı (məsələn, TABLE) yazılır və bu o deməkdir ki, bütün stil parametrləri <table> teqinə tətbiq olunacaq, bundan sonra açılan fiqurlu mötərizənin daxilində stilin parametri yazılır, onun qiyməti isə iki nöqtədən sonra göstərilir. Stil xassələri bir-birindən nöqtəli vergüllə ayrılır, sonda bu simvolu yazmamaq də olar.

CSS registr, yeni sətrə keçid, boşluq və tabulyasiya simvoluna qarşı həssas deyil.

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Başlıq</title>
  <style>
   h1 { color: #a6780a; font-weight: normal; } 
   h2 { 
    color: olive; 
    border-bottom: 2px solid black; 
   }
  </style>
 </head>
 <body>
   <h1>Başlıq 1</h1>
   <h2>Başlıq 2</h2>
 </body>
</html>

Yuxarıdakı nümunədə h1 selektorunun xassələri bir sətirdə yazılıb, lakin h2 selektoru üçün hər bir xassə ayrı-ayrı sətirdə yazılıb. İkinci halda lazımi xassələri axtarmaq və ehtiyac olduqda redaktə etmək daha asandır, lakin bu halda boşluq və sətrə keçiddən aktiv istifadə edilməsi sayəsində faylın tutumu cüzi artır. Buna görə stil parametrlərinin hazırlanması üsulu veb tərtibatçıdan asılıdır.

Stillərdən istifadə qaydaları

Yazılış forması

td { background: olive; }
td { color: white; }
td { border: 1px solid black; }

Lakin yuxarıdakı yazılış forması (genişləndirilmiş) bir o qədər əlverişli deyil. Belə ki eyni selektoru bir neçə dəfə təkrarlamaq lazım gəlir, buna görə hər bir selektor üçün xassələri bir yerdə yazın.

td {
  background: olive;
  color: white;
  border: 1px solid black;
}

Göründüyü kimi, bu yazılış forması (yığcam) daha əlverişlidir.

Stil kodunda daha aşağı hissədə yazılmış qiymətin prioriteti yüksəkdir

Əgər selektor üçün parametr əvvəlcə bir qiymət təyin edilirsə, daha sonra eyni parametr başqa qiymət alırsa, o zaman stil kodunda daha aşağı hissədə yazılmış qiymət tətbiq olunacaq.

p { color: green; }
p { color: red; }

Yuxarıdakı nümunədə p selektoru üçün mətnin rəngi əvvəlcə yaşıl, daha sonra qırmızı təyin edilib. Stil kodunda red qiyməti daha aşağı hissədə yazıldığına görə nəticədə mətnin rəngi qırmızı olacaq.

Əslində belə yazılış formasından uzaq olmaq və təkrarlanan qiymətləri silmək lazımdır.

Növbəti dərsi seçib keçid düyməsinə sıxın: