atribut kelas

6.1 Atribut kelas dan tag gaya

Tetapi bukan itu sahaja. Selepas beratus-ratus "gaya" dicipta, persoalan timbul: bagaimana untuk menggunakannya? Dan kemudian mereka datang dengan idea untuk mengumpulkan mereka ke dalam "kelas". Ini, tentu saja, bukan kelas yang sama seperti di Jawa. Hanya kumpulan gaya khas.

Dan jika sebelum menggunakan "kelas" anda mempunyai gambar:

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

Sekarang ia boleh ditulis sebagai:

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

Kami mencipta yang istimewa «style» picturedan memindahkan nilai gaya daripada style. Dan kemudian kami mengikat <img> dan gambar "gaya" dengan tag class.

6.2 Pemilih, jenis pemilih

Gaya ini, yang diterjemahkan secara berasingan, dikenali sebagai classesatau selectors. Mereka mempunyai beberapa ciri penting.

Seseorang html-elementboleh mempunyai berbilang pemilih. Nama mereka ditunjukkan dengan ruang. Contoh:

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

Satu sebab kami telah menyentuh pemilih di sini adalah kerana ia boleh digunakan secara automatik. Dan harta berguna ini akan digunakan dengan kerap pada masa hadapan. Termasuk pembangun Java.

Berikut adalah senarai pendek mereka:

* {
  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 lebih baik jika anda mengkaji jadual ini beberapa kali dan semua ini disimpan di dalam kepala anda. Tanpa web dalam kehidupan moden, tiada di mana-mana dan di web - tiada tempat tanpa pemilih.