class atributu

6.1 class atributu və style etiketi

Amma bu da hələ hamısı deyil. Yüzlərlə "stil" fikirləşiləndən sonra sual ortaya çıxdı: bunları necə istifadə etməli? Və sonra onları "class"larda qruplaşdırmaq fikirləşildi. Bu, əlbəttə ki, Java-da olan classlar kimi deyil. Sadəcə xüsusi stil qruplarıdır.

Və əgər "class"lardan istifadə etməmişdən əvvəl sənin rəsmin var idi:

       <img src="logo.png" style="width=100px;height=100px;opacity=0.5">
    

İndi isə onu belə yaza bilərdin:

<img src="logo.png" class="picture">
 
<style>
    img.picture {
 width=100px;
 height=100px;
 opacity=0.5
    }
</style>

Xüsusi "stil" picture yaratdıq və stil dəyərlərini style atributundan ona köçürdük. Sonra isə <img> və "stil" picture-ı class etiketi ilə birləşdirdik.

6.2 Seçici, seçici tipləri

Bu ayrı saxlanan stilləri classlar və ya seçicilər adlandırmağa başladılar. Onların bir neçə vacib xüsusiyyəti var.

Bir html-elementin bir neçə seçicisi ola bilər. Onların adları ara ilə göstərilir. Məsələn:

       <img src="logo.png" class="picture main">
    

Seçiciləri burada qeyd etməyimizin bir səbəbi onların avtomatik tətbiq oluna biləcəyidir. Və bu onların faydalı xüsusiyyəti sonradan çox tez-tez istifadə ediləcək. Java inkişaf etdiriciləri tərəfindən də.

Onların qısa siyahısı belədir:

* {
  margin: 0;
  padding: 0;
}

#img123 {
   width:100px;
   height:100px;
}

table {
   color: black;
}

table.important {
   color: red;
}

.picture {
  opacity: 0.5
}

.main .article {
  color: blue;
}

a:link {
color: blue;
}

a:visited {
color: red;
}

input[type=radio]:checked {
 border: 1px solid black;
}

div:hover {
  background: red;
}

ul li:first-child {
 border-top: none;
}

Bunu hamısını əzbərləmənə ehtiyac yoxdur. Amma yaxşı olar ki, bu cədvələ bir neçə dəfə baxasan və bunlar başında qalsın. Müasir həyatda onsuz web olmur, webdə isə seçicisiz heç yerə getmək mümkün deyil.

HTML + CSS