sınıf özniteliği

6.1 Sınıf niteliği ve stil etiketi

Ama hepsi bu değil. Yüzlerce "stil" icat edildikten sonra şu soru ortaya çıktı: bunlar nasıl kullanılır? Ve sonra onları "sınıflara" ayırma fikrini buldular. Bunlar, elbette, Java'dakilerle aynı sınıflar değildir. Sadece özel stil grupları.

Ve "sınıfları" kullanmadan önce bir resminiz varsa:

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

Şimdi şu şekilde yazılabilir:

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

Özel bir tane oluşturduk «style» pictureve stil değerlerini style. Ardından <img> ile "stil" resmini etiketiyle bağladık class.

6.2 Seçici, seçici türleri

Ayrı ayrı oluşturulan bu stiller, classesveya olarak bilinmeye başlandı selectors. Birkaç önemli özelliği var.

Birinin html-elementbirden çok seçicisi olabilir. Adları bir boşlukla gösterilir. Örnek:

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

Burada seçicilere değinmemizin bir nedeni, otomatik olarak uygulanabilmeleridir. Ve bu yararlı özellik gelecekte çok sık kullanılacaktır. Java geliştiricileri dahil.

İşte bunların kısa bir listesi:

* {
  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;
}

Hepsini ezberlemek zorunda değilsin. Ancak bu tabloyu birkaç kez incelerseniz ve tüm bunları kafanızda biriktirirseniz iyi olur. Modern hayatta web olmadan, hiçbir yerde ve web'de - seçiciler olmadan hiçbir yerde.