1. Pemilih Tipe Apa yang dimaksud dengan pemilih tipe? Mengacu pada karakter baris yang menggunakan jenis tag yang ada di halaman web sebagai namanya. Body adalah tipe tag di halaman web, termasuk div, p, dan span.
Sebagai berikut:
isi {}
div {}
P{}
rentang {}
2. Pemilih grup
Untuk objek XHMTL, gaya yang sama dapat ditetapkan ke grup pada waktu yang sama.
Selector dipisahkan dengan koma. Keuntungan penulisan dengan cara ini adalah gaya yang sama hanya perlu ditulis satu kali, sehingga mengurangi jumlah kode dan memperbaiki struktur kode CSS.
Saat menggunakannya, harap perhatikan bahwa "koma" berada dalam mode setengah lebar, bukan mode lebar penuh berbahasa Mandarin.
Sebagai berikut:
h1,h2,h6,p,span
{
ukuran font:12px;
warna:#FF0000;
font-family: arial;
}
3. Berisi penyeleksi untuk menentukan gaya sub-objek dalam suatu objek, sehingga metode pemilihan berperan.
Perlu dicatat bahwa pengaturan gaya ini hanya berlaku untuk label sub-objek dari objek ini. Pengaturan gaya ini tidak berlaku untuk sub-objek lain yang ada sendiri atau terletak di luar objek ini.
Keuntungannya adalah membantu kita menghindari pengaturan id dan kelas yang berlebihan dan secara langsung menentukan elemen yang diperlukan.
Sebagai berikut:
rentang h2
{
warna: merah;
}
sebagai berikut:
body h1 span kuat
{
berat font: tebal;
}
4. Pemilih id adalah
pemilih yang muncul berdasarkan prinsip model objek dokumen DOM. Untuk file XHTML, setiap tag dapat diberi nama dalam bentuk id="", namun perlu diperhatikan bahwa dalam file XHTML ID unik dan tidak dapat diulang.
Di halaman web tata letak div CSS, Anda dapat memberi nama untuk tujuan yang berbeda, seperti header untuk head dan footer untuk bagian bawah.
XHTMLnya adalah sebagai berikut:
<div id="content"></div>
CSSnya adalah sebagai berikut:
#content
{
ukuran font:14px;
tinggi garis:120%;
}
5. Pemilih kelas
Faktanya, id adalah perpanjangan dari tag XHTML, dan kelas adalah kombinasi dari beberapa tag SHTML. Terjemahan literal dari kelas berarti kelas atau kategori.
Untuk tag XHTML gunakan class="" untuk penetapan nama. Tidak seperti id, kelas dapat digunakan kembali. Beberapa elemen dengan gaya yang sama dapat langsung didefinisikan sebagai sebuah kelas.
Keuntungan menggunakan kelas sudah jelas. Ini mencerminkan penggunaan kembali kode CSS. Banyak tag dapat didefinisikan menggunakan gaya tanpa menulis kode gaya untuk masing-masing tag.
XHTMLnya adalah sebagai berikut:
<p class="he"></p>
<span class="dia"></span>
<h5 kelas="dia"></h5>
CSSnya adalah sebagai berikut:
.he
{
margin:10 piksel;
warna latar:merah;
}
6. Pemilih tag khusus
Jika Anda ingin menggunakan id dan kelas secara bersamaan, dan juga ingin menggunakan pemilih tag pada saat yang sama, Anda bisa menggunakan metode berikut:
h1#content {}
/*Mewakili semua tag h1 dengan id sebagai konten*/
h1.p1 {}
/*Menunjukkan semua tag h1 dengan kelas p1*/
Ketepatan pemilih khusus label berada di antara pemilih label dan pemilih id/kelas, dan ini adalah salah satu pemilih yang umum digunakan.
7. Selektor kombinasi
Untuk semua selector di atas, gunakanlah secara kombinasi. Sebagai berikut:
h1 .p1 {}
/*Menunjukkan semua tag dengan kelas p1 di bawah h1*/
#konten h1 {}
Mewakili semua tag h1 di bawah tag dengan konten id
h1 .p1,#konten h1 {}
/*Mewakili semua tag h1 di bawah h1 dengan kelas p1 dan semua tag h1 di bawah tag dengan konten id*/
h1#konten h2{}
/*tag h2 di bawah tag h1 dengan id sebagai konten*/
Pemilih CSS sangat bebas dan fleksibel. Anda dapat menggunakan berbagai penyeleksi sesuai dengan kebutuhan halaman untuk menyusun dan mengoptimalkan file CSS sebanyak mungkin.