atribut kelas

6.1 Atribut kelas dan tag gaya

Tapi itu belum semuanya. Setelah ratusan "gaya" ditemukan, muncul pertanyaan: bagaimana cara menggunakannya? Dan kemudian muncul ide untuk mengelompokkan mereka ke dalam "kelas". Ini, tentu saja, bukan kelas yang sama seperti di Jawa. Hanya grup gaya khusus.

Dan jika sebelum menggunakan "kelas" Anda memiliki gambar:

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

Sekarang dapat ditulis sebagai:

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

Kami membuat yang spesial «style» picturedan mentransfer nilai gaya dari file style. Dan kemudian kami mengikat <img> dan gambar "style" dengan tag class.

6.2 Pemilih, jenis-jenis pemilih

Gaya-gaya ini, yang dirender secara terpisah, dikenal sebagai classesatau selectors. Mereka memiliki beberapa fitur penting.

Satu html-elementdapat memiliki beberapa penyeleksi. Nama mereka ditunjukkan dengan spasi. Contoh:

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

Salah satu alasan kami menyentuh pemilih di sini adalah karena mereka dapat diterapkan secara otomatis. Dan properti yang bermanfaat ini akan sangat sering digunakan di masa mendatang. Termasuk pengembang Java.

Berikut adalah daftar singkatnya:

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

Anda tidak perlu menghafal semuanya. Tetapi alangkah baiknya jika Anda mempelajari tabel ini beberapa kali dan semua ini disimpan di kepala Anda. Tanpa web dalam kehidupan modern, tidak ada tempat, dan di web - tidak ada tempat tanpa penyeleksi.