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» picture
dan 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 classes
atau selectors
. Mereka memiliki beberapa fitur penting.
Satu html-element
dapat 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 | * |
|
Berlaku untuk semua elemen dokumen HTML. |
2 | #pengenal |
|
# diikuti oleh id dari elemen yang akan diterapkan gaya yang diberikan. |
3 | menandai |
|
Berlaku untuk semua tabel dalam dokumen. |
4 | tag.pemilih |
|
Berlaku untuk semua tabel dokumen yang memiliki atribut kelas yang ditentukan. |
5 | .pemilih |
|
Berlaku untuk semua elemen yang memiliki atribut kelas yang ditentukan. Tag apapun. |
6 | anak orang tua |
|
Berlaku untuk semua elemen di mana tag induk berisi kelas utama dan tag anak berisi kelas artikel. |
7 | tag: tautan |
|
:link pseudo-class digunakan untuk menata tautan yang belum diklik pengguna. |
8 | tag: sudah dikunjungi |
|
:link pseudo-class digunakan untuk menata tautan yang telah diklik pengguna. |
9 | tag: diperiksa |
|
Kelas semu ini hanya akan memilih elemen UI yang dicentang: tombol radio atau kotak centang. |
10 | tag: melayang |
|
Kelas semu ini memungkinkan Anda untuk mengubah gaya elemen saat mengarahkannya dengan mouse. |
sebelas | label: anak pertama |
|
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.
GO TO FULL VERSION