Dalam CSS selector merupakan sebuh pola yang berfungsi untuk mencari tag dalam HTML. Dengan lain kata semua tag atau atribut yang didefenisikan akan disebut sebagai selector dalam CSS. Ada beberapa selector dalam CSS ini.
* {
color: red;
background-color: blue;}
}
Dengan adanya selector tersebut maka semua tag HTML akan bernilai warna merah. Kemudian background atau latar belakang akan berwarna biru. Untuk mencobanya anda bisa menyisipkan ini pada sebuah halaman HTML di dalam tag <head>.
h1 {
text-decoration: underline;
background-color:black;
color: white;}
p {
font-size:12px;
color: red;
}
Dari kode di atas maka yang akan berubah adalah semua tag <h1> dan tag <p>. Setiap h1 akan memiliki background berwarna hitam dan tulisan berwarna putih. Sementara untuk pararaf /tag <p> akan memiliki ukuran huruf 12 dan berwarna merah.
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
<style type="text/css">
.satu {
font-size:12px;
color:blue;
}
.dua {
font-size:13px;
color:red;
</style>
</head>
<body>
<h1>Bab I Skripsi Biologi</h1>
<h2 class="dua">Latar Belakang</h2>
<p class="satu">Siswa adalah salah satu komponen penting dalam sebuah proses pembelajaran. Keberhasilan sebuah proses pembelajaran dalam pendidikan tidak terlepas dari keberhasilan siswa dalam memperoleh hasil belajar yang baik dalam pembelajaran itu sendiri. Menurut Sardiman (2010:111) siswa atau anak didik adalah salah satu komponen yang menempati posisi sentral dalam proses pembelajaran. Siswa yang memiliki kemampuan secara internasional akan membuat mutu pendidikan lebih baik..</p>
<p class="dua">SMP-RSBI di kota Padang telah memiliki fasilitas belajar yang lengkap. Berdasarkan hasil survey dan wawancara yang penulis lakukan pada bulan April 2011, dengan Ibu Doris Yelniwetis, guru biologi SMP Negeri 1 Padang dan Ibu Lisna, guru biologi SMP Negeri 8 Padang terungkap bahwa fasilitas belajar dan sarana penunjang lainnya di RSBI ini lebih lengkap dibanding dengan sekolah yang bukan RSBI..</p>
<h2 class="satu" >Identifikasi Masalah</h2>
<p class="satu">Kebiasaan belajar siswa kurang baik, terlihat dari kebiasaan dalam melaksanakan tugas yang hanya mengandalkan teman saja.
.Siswa tidak menggunakan billingual yang seimbang dalam proses pembelajaran biologi.
.Siswa memperoleh hasil belajar yang baik, namun sikap yang ditunjukkan selama proses pembelajaran kurang positif.
</p>
</body>
</html>
Perhatikan kode CSS yang berada di tag <head>. Di sana ada 2 selector. Pertama :
.satu {
font-size:12px;
color:blue;
}
dan yang kedua
.dua {
font-size:13px;
color:red;
Pada halaman HTML kita memiliki sebuah tag <h1>. Tag tersebut dibiarkan default alias bagaimana tampilan aslinya. Kemudian kita memiliki dua tag <h2>. Pada tag <h2> pertama digunakan selector dengan class satu. maka tampilan h2 tersebut mengikuti CSS class satu. Sementara itu <h2> kedua digunakan penulisan class dua maka tampilan sesuai dengan CSS selector dua. Begitu juga dengan paragraf. Ada 3 paragraf yang dipasangkan dengan class selector yang berbeda. Kesimpulannya: kita tidak bergantung pada tag. CSS bisa digunakan kapan saja, dengan menggunakan pemanggilan class="namaselector".
Selector macam ini adalah yang paling sering digunakan leh web designer. Mereka lebih bebas untuk memperindah website. CSS selector bisa dipanggil kapan saja web-designer mau.
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
<style type="text/css">
#satu {
font-size:12px;
color:blue;
}
#dua {
font-size:13px;
color:red;
</style>
</head>
<body>
<h1>Bab I Skripsi Biologi</h1>
<h2 id="dua">Latar Belakang</h2>
<p id="satu">Siswa adalah salah satu komponen penting dalam sebuah proses pembelajaran. Keberhasilan sebuah proses pembelajaran dalam pendidikan tidak terlepas dari keberhasilan siswa dalam memperoleh hasil belajar yang baik dalam pembelajaran itu sendiri. Menurut Sardiman (2010:111) siswa atau anak didik adalah salah satu komponen yang menempati posisi sentral dalam proses pembelajaran. Siswa yang memiliki kemampuan secara internasional akan membuat mutu pendidikan lebih baik..</p>
<p id="dua">SMP-RSBI di kota Padang telah memiliki fasilitas belajar yang lengkap. Berdasarkan hasil survey dan wawancara yang penulis lakukan pada bulan April 2011, dengan Ibu Doris Yelniwetis, guru biologi SMP Negeri 1 Padang dan Ibu Lisna, guru biologi SMP Negeri 8 Padang terungkap bahwa fasilitas belajar dan sarana penunjang lainnya di RSBI ini lebih lengkap dibanding dengan sekolah yang bukan RSBI..</p>
<h2 id="satu" >Identifikasi Masalah</h2>
<p id="satu">Kebiasaan belajar siswa kurang baik, terlihat dari kebiasaan dalam melaksanakan tugas yang hanya mengandalkan teman saja.
.Siswa tidak menggunakan billingual yang seimbang dalam proses pembelajaran biologi.
.Siswa memperoleh hasil belajar yang baik, namun sikap yang ditunjukkan selama proses pembelajaran kurang positif.
</p>
</body>
</html>
Perbedaanya bisa dilihat pada kode yang diberi warna biru. Hanya berbeda penulisan awalan pada kode CSS dan pemanggilan saja ; jika dibandingkan dengan selector class.
[href] {
font-size:18px ;
}
[type="submit"] {
width:33px;
}
Dari beberap website yang telah dilihat, selector ini sangat jarang sekali digunakan. Yang paling mudah dan gampang digunakan serta memiliki banyak keunggulan memag selecotor id dan selector class.
Universal Selector
Universal selector atau selector yang keseleruhan. Dalam CSS ditandai dengan penulisan bintang (*). Dengan menggunakan ini semua tag yang ada di halaman HTML akan beubah sesuai nilai dan properti selector tersebut. Contohnya sebagai berikut.* {
color: red;
background-color: blue;}
}
Dengan adanya selector tersebut maka semua tag HTML akan bernilai warna merah. Kemudian background atau latar belakang akan berwarna biru. Untuk mencobanya anda bisa menyisipkan ini pada sebuah halaman HTML di dalam tag <head>.
Element Type Selector
Element Type Selector atau Selector khusus untuk elemen. Properti dan value CSS akan berjalan sesuai tag yang dipilih atau elemen yang ditentukan ketika mendefenisikan CSS. Sebagai contoh perhatikan kode di bawah ini.h1 {
text-decoration: underline;
background-color:black;
color: white;}
p {
font-size:12px;
color: red;
}
Dari kode di atas maka yang akan berubah adalah semua tag <h1> dan tag <p>. Setiap h1 akan memiliki background berwarna hitam dan tulisan berwarna putih. Sementara untuk pararaf /tag <p> akan memiliki ukuran huruf 12 dan berwarna merah.
Class Selector
Class selector yaitu penulisan yang dikhususkan pada class tertentu. Selector didefenisikan dengan properti dan value tertentu. Kemudian, pada halaman HTML akan dipanggil CSS dengan menggunakan catribut class. Perhatikan contoh di bawah ini.<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
<style type="text/css">
.satu {
font-size:12px;
color:blue;
}
.dua {
font-size:13px;
color:red;
</style>
</head>
<body>
<h1>Bab I Skripsi Biologi</h1>
<h2 class="dua">Latar Belakang</h2>
<p class="satu">Siswa adalah salah satu komponen penting dalam sebuah proses pembelajaran. Keberhasilan sebuah proses pembelajaran dalam pendidikan tidak terlepas dari keberhasilan siswa dalam memperoleh hasil belajar yang baik dalam pembelajaran itu sendiri. Menurut Sardiman (2010:111) siswa atau anak didik adalah salah satu komponen yang menempati posisi sentral dalam proses pembelajaran. Siswa yang memiliki kemampuan secara internasional akan membuat mutu pendidikan lebih baik..</p>
<p class="dua">SMP-RSBI di kota Padang telah memiliki fasilitas belajar yang lengkap. Berdasarkan hasil survey dan wawancara yang penulis lakukan pada bulan April 2011, dengan Ibu Doris Yelniwetis, guru biologi SMP Negeri 1 Padang dan Ibu Lisna, guru biologi SMP Negeri 8 Padang terungkap bahwa fasilitas belajar dan sarana penunjang lainnya di RSBI ini lebih lengkap dibanding dengan sekolah yang bukan RSBI..</p>
<h2 class="satu" >Identifikasi Masalah</h2>
<p class="satu">Kebiasaan belajar siswa kurang baik, terlihat dari kebiasaan dalam melaksanakan tugas yang hanya mengandalkan teman saja.
.Siswa tidak menggunakan billingual yang seimbang dalam proses pembelajaran biologi.
.Siswa memperoleh hasil belajar yang baik, namun sikap yang ditunjukkan selama proses pembelajaran kurang positif.
</p>
</body>
</html>
Perhatikan kode CSS yang berada di tag <head>. Di sana ada 2 selector. Pertama :
.satu {
font-size:12px;
color:blue;
}
dan yang kedua
.dua {
font-size:13px;
color:red;
Pada halaman HTML kita memiliki sebuah tag <h1>. Tag tersebut dibiarkan default alias bagaimana tampilan aslinya. Kemudian kita memiliki dua tag <h2>. Pada tag <h2> pertama digunakan selector dengan class satu. maka tampilan h2 tersebut mengikuti CSS class satu. Sementara itu <h2> kedua digunakan penulisan class dua maka tampilan sesuai dengan CSS selector dua. Begitu juga dengan paragraf. Ada 3 paragraf yang dipasangkan dengan class selector yang berbeda. Kesimpulannya: kita tidak bergantung pada tag. CSS bisa digunakan kapan saja, dengan menggunakan pemanggilan class="namaselector".
Selector macam ini adalah yang paling sering digunakan leh web designer. Mereka lebih bebas untuk memperindah website. CSS selector bisa dipanggil kapan saja web-designer mau.
ID Selector
Selector id ini hampir sama persis dengan selector class. Bedanya hanya dalam cara penulisan defenisi CSS. Pada defenisi CSS awalan nama id ditulis dengan tanda pagar #. Berikutnya cara pemanggilan dengan menggunakan id="namaid". Lebih ringkasnya bisa dilihat kode berikut ini.<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
<style type="text/css">
#satu {
font-size:12px;
color:blue;
}
#dua {
font-size:13px;
color:red;
</style>
</head>
<body>
<h1>Bab I Skripsi Biologi</h1>
<h2 id="dua">Latar Belakang</h2>
<p id="satu">Siswa adalah salah satu komponen penting dalam sebuah proses pembelajaran. Keberhasilan sebuah proses pembelajaran dalam pendidikan tidak terlepas dari keberhasilan siswa dalam memperoleh hasil belajar yang baik dalam pembelajaran itu sendiri. Menurut Sardiman (2010:111) siswa atau anak didik adalah salah satu komponen yang menempati posisi sentral dalam proses pembelajaran. Siswa yang memiliki kemampuan secara internasional akan membuat mutu pendidikan lebih baik..</p>
<p id="dua">SMP-RSBI di kota Padang telah memiliki fasilitas belajar yang lengkap. Berdasarkan hasil survey dan wawancara yang penulis lakukan pada bulan April 2011, dengan Ibu Doris Yelniwetis, guru biologi SMP Negeri 1 Padang dan Ibu Lisna, guru biologi SMP Negeri 8 Padang terungkap bahwa fasilitas belajar dan sarana penunjang lainnya di RSBI ini lebih lengkap dibanding dengan sekolah yang bukan RSBI..</p>
<h2 id="satu" >Identifikasi Masalah</h2>
<p id="satu">Kebiasaan belajar siswa kurang baik, terlihat dari kebiasaan dalam melaksanakan tugas yang hanya mengandalkan teman saja.
.Siswa tidak menggunakan billingual yang seimbang dalam proses pembelajaran biologi.
.Siswa memperoleh hasil belajar yang baik, namun sikap yang ditunjukkan selama proses pembelajaran kurang positif.
</p>
</body>
</html>
Perbedaanya bisa dilihat pada kode yang diberi warna biru. Hanya berbeda penulisan awalan pada kode CSS dan pemanggilan saja ; jika dibandingkan dengan selector class.
Attribute Selector
Attribute seleotr ini biasa digunakan untuk atribut tertentu dalam HTML. Misalnya saja pada sebuah tombol submit di form HTML. Terkait : Cara Membuat Formulir/Form pada Halaman HTML. Penulisan kode CSS untuk selector ini, selector berada di dalam kurung siku.. Sebagai contoh:[href] {
font-size:18px ;
}
[type="submit"] {
width:33px;
}
Dari beberap website yang telah dilihat, selector ini sangat jarang sekali digunakan. Yang paling mudah dan gampang digunakan serta memiliki banyak keunggulan memag selecotor id dan selector class.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment