Dasar Css yang perlu dipahami petama-pertama adalah selektor, yang berfungsi untuk memilih elemen-elemen HTML yang menjadi target dalam mengatur desain pada Css. Dengan memahami jenis-jenis selektor sobat bisa memilih selektor apa saja yang perlu digunakan dalam pembuatan desain css.
Baiklah ada beberapa jenis selektor yang saya akan jelaskan kepada sobat sekalian diataranya ialah :
1. Selektor Kelas
2. Selektor Pseudo Kelas
3. Selektor Atribut
4.Selektor Keturunan
5.Selektor Orang tua dan anak
Oke sebelum saya masuk keselektor saya ingin menjelaskan apa Itu Dom ? Dom (Document Object Model) adalah struktur yang selalu ada di setiap dokumen HTML. Dom dirancang agar pengaksesan di sebuah dokumen-dokumen HTML mudah dilakukan.
Contoh Dokumen Pada DOM :
<!DOCTYPE html><html><head> <title>Jurusan Di SMK</title></head><body> <h1>Jurusan Di SMK</h1> <div id=""> <ul> <li>Akuntansi</li> <li>Administrasi Perkantoran</li> <li>Tata Niaga</li> </ul> </div></body></html>
Oke Sobat bisa dilihat pada coding diatas struktur <html> adalah akar Sedangkan pada <div> merupakan orang tua dari <ul> dan <li> merupakan cucu dari dari tag <div> dan tag <li> itu memiliki 4 saudari tag <li> lainnya seperti silsila keturuna atau bisa dikatakan sebagai bentuk akar.
1.Selektor Kelas
Slektor kelas itu seperti apa ? Selektor kelas yaitu menerapkan aturan dalam penyajian elemen-elemen yang memiliki atribut class yang disebutkan diselektor. Ciri-ciri dari selektor kelas diawali dengan tanda titik (.) dan diikuti dengan nama kelas (isi atribut class nilai class).
<!DOCTYPE html><html><head> <title>Selektor Kelas</title> <style type="text/css"> .jurusan{ color: white; font-size: 20px;<br> background-color: blue;}</head><body> <h1>Selektor Kelas</h1> <ul> <li class="jurusan">Akuntansi</li> <li class="bukanjurusan">SD</li> <li class="bukanjurusan">SMP</li> <li class="bukanjurusan">SMA</li> <li class="bukanjurusan">SMK</li> <li class="jurusan">Administrasi Perkantoran</li> <li class="jurusan">Tata Niaga</li> <li class="jurusan">Rekayasa Perangkat Lunak</li> <li class="bukanjurusan">MA</li> </ul>
Bisa kita lihat pada coding diatas class yang bernilai jurusan akan dieksekusi dengan perintah text yang berwana putih dan memiliki background biru.
2. Selektor Pseudo-Kelas
Apa itu Selektor Pseudo-Kelas Selektor ini tidak terhubung dengan nama kelas di elemn HTML. Selektor pseudo-kelas berkaitan dengan atribut-atribut khusus di elemen HTML .
Contohnya :
<html><head> <title>Pseudo-kelas</title></head><style type="text/css"> div{ height:300px; } a:link{ color: blue; } a:hover{ color: white; background-color: black; } a:visited{ color: green; } a:actiive{ color: red; }</style><body> <h1>Selektor Peseudo-kelas</h1> <div id="daftar_isi"> <p>Daftar Isi</p> <a href="#bagian_awal">Pendahuluan</a> <a href="#bagian_utama">Bagian Utama</a> </div> </body></html>
No comments:
Post a Comment