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:

# Pemilih Contoh Keterangan
1 *
* {
  margin: 0;
  padding: 0;
}
Berlaku untuk semua elemen dokumen HTML.
2 #pengenal
#img123 {
   width:100px;
   height 100px;
}
# diikuti oleh id dari elemen yang akan diterapkan gaya yang diberikan.
3 menandai
table {
   color: black;
}
Berlaku untuk semua tabel dalam dokumen.
4 tag.pemilih
table.important {
   color: red;
}
Berlaku untuk semua tabel dokumen yang memiliki atribut kelas yang ditentukan.
5 .pemilih
.picture {
  opacity: 0.5
}
Berlaku untuk semua elemen yang memiliki atribut kelas yang ditentukan. Tag apapun.
6 anak orang tua
main article {
  color: blue;
}
Berlaku untuk semua elemen di mana tag induk berisi kelas utama dan tag anak berisi kelas artikel.
7 tag: tautan
a:link {
color: blue;
}
:link pseudo-class digunakan untuk menata tautan yang belum diklik pengguna.
8 tag: sudah dikunjungi
a:visited {
color: red;
}
:link pseudo-class digunakan untuk menata tautan yang telah diklik pengguna.
9 tag: diperiksa
input[type=radio]:checked {
 border: 1px solid black;
}
Kelas semu ini hanya akan memilih elemen UI yang dicentang: tombol radio atau kotak centang.
10 tag: melayang
div:hover {
  background: red;
}
Kelas semu ini memungkinkan Anda untuk mengubah gaya elemen saat mengarahkannya dengan mouse.
sebelas label: anak pertama
ul li:first-child {
 border-top: none;
}
Kelas semu ini hanya akan mengizinkan elemen anak pertama untuk dipilih.

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.