KOMENTAR CSS
Komentar dapat di sertakan dalam CSS dengan tujuan untuk memberi penjelasan bagi pembaca kode atau untuk mematikan kode salama penyusunan aplikasi web. Di CSS, semua tulian yang berada di antara pasangan /* dan */ akan dianggap sebagai komentar. Untuk mempraktikan hal ini berilah tanda pada kode berikut:
<!doctype html>
<html>
<head>
<title>belajar css</title>
<style>
/*
h1 {
color: white;
background-color: black;
}
*/
#info{
width: 200px;
height: 100px;
border: 1px solid;
text-align: center;
}
</style>
</head>
<body>
<h1>Tes css</h1>
<div id="info">hasil css eksternal</div>
</body>
</html>
Terlihat di atas bahawa teks h1 pada kode di atas yang seharusnya memiliki background hitam dan warna teks putih, maka setelah diberi komentar tidak terjadi apa-apa.
SELEKTOR CSS
Dasar CSS yang harus di pahami terlebih dahulu adalah selektor, yang berfungsi untuk memilih elemen-elemen HTML yang menjadi target untuk di atur. Dengan memahami jenis-jenis selektor, anda bisa memilih yang paling tepat digunakan untuk memformat elemen-elemen HTML.
1. selektor kelas
Selektor kelas menerepkan aturan penyajian terhadap elemen-elemen yang mempunyai atribut class yang disebutkan di selektor. Ciri-ciri selektor kelas adalah seperti berikut:
- Diawali dengan tanda titik (.).
- Diikuti dengan nama kelas (isi atibut class).
<!doctype html>
<html>
<head>
<title>belajar css</title>
<style>
.kota{
color: white;
background: black;
}
</style>
</head>
<body>
<h1>selektor kelas</h1>
<ul>
<li class="kota">bandung</li>
<li class="provinsi">jawa barat</li>
<li class="kota">jakarta</li>
<li class="provinsi">jawa barat</li>
<li class="kota">bogor</li>
</ul>
</body>
</html>
Hasilnya sebagai berikut:
Terlihat di atas bahawa hanya elemen yang diberi class kota yang backgroundnya hitam.
2. pseudo-kelas
Selektor pseudo-kelas tidak berhubungan dengan nama kelas di elemen HTML. Sebelum CSS3, selektor pseudo-kelas berkaitan dengan atribut-atribut khusus di elemen HTML. Sebagai contoh, lima pseudo-kelas, seperti pada tabel berikut.
| Pseudo-kelas | Keterangan |
|---|---|
| A:link | Mengatur elemen A jika A merupakan elemen yang belum dikunjungi |
| A:visited | Mengatur elemen A jika A merupakan elemen yang pernah dikunjungi |
| A:active | Mengatur elemen A jika A di klik |
| A:focus | Mengatur elemen A jika A merupakan elemen yang mulai mendapat fokus (misal pada tag input, ketika mouse diklik di dalam elemen ini). |
| A:hover | Mengatur elemen A jika A merupakan elemen sedang disorot oleh cursor |
Berikut contoh menunjukan penggunaan selektor pseudo-kelas yang mengatur tag <a>:
<!doctype html>
<html>
<head>
<title>belajar css</title>
<style>
.link1:link{
color: blue;
}
.link2:visited{
color: red;
}
.link3:active{
color: green;
}
.link4:hover{
color: black;
}
</style>
</head>
<body>
<p>link: </p> <a href="#bagian-dua" class="link1"> keadaan belum dikunjungi </a>
<p>visited: </p> <a href="#bagian-dua" class="link2"> pernah dikunjungi</a>
<p>active: </p> <a href="#bagian-dua" class="link3"> sedang diklik</a>
<p>hover: </p> <a href="#bagian-dua" class="link4"> sedang di sorot/hover</a>
</body>
</html>
Untuk hasilnya silahkan lihat di browser sendiri.
Catatan : Jika tidak di atur, link akan bersifat default seperti berikut:
- link yang belum di kunjungi akan digarisbawahi dan berwarna biri.
- link yang sudah dikunjungi akan digarisbawahi dan berwarna ungu.
- link yang sedang diklik akan digarisbawahi dan berwarna merah.
Di CSS3, pseudo-kelas dirancang agar tidak pemilihan elemen yang tidak berdasarkan struktur dokumen dapat dilakukan dengan cara mudah. ada beberapa pseudo-kelas yang direkomendasikan oleh W3C, seperti :first-child() :last-child() : only-child(), dan nth-child(). Berikut contoh penulisannya:
A. :first-child(), :last-child(), :nth-child()
A. :first-child(), :last-child(), :nth-child()
<!doctype html>
<html>
<head>
<title>belajar css</title>
<style>
/*bagian 1*/
.bagian1:first-child{
background-color: blue;
}
.bagian1:last-child{
background-color: red;
}
/*bagian2*/
.bagian2:nth-child(2n){
background-color: yellow;
}
.bagian2:nth-child(2n-1){
background-color: green;
}
</style>
</head>
<body>
<h3>first-child dan last-child</h3>
<div class="kurung">
<div class="bagian1">elemen pertama</div>
<div class="bagian1">elemen kedua</div>
<div class="bagian1">elemen ketiga</div>
<div class="bagian1">elemen keempat</div>
</div>
<h3>nth-child</h3>
<div class="kurung2">
<div class="bagian2">elemen pertama</div>
<div class="bagian2">elemen kedua</div>
<div class="bagian2">elemen ketiga</div>
<div class="bagian2">elemen keempat</div>
</div>
</body>
</html>
Berikut hasilnya:
Dari contoh diatas, class bagian1 yang merupakan anak pertama adalah
<div class="bagian1">elemen pertama</div> itu sebabnya anak pertama berwarna biru, dan akan terakhir berwarna merah.
Selektor .bagian2:nth-child(2n). berarti class bagian2 yang kedudukannya sebagai anak dengan urutan genap akan berwarna kuning. Sementara selektor .bagian2:nth-child(2n-1) yang kedudukannya sebagai anak dengan urutan ganjil akan berwarna hijau.
Catatan:
- nth-child(2n) bisa ditulis menjadi nth-child(even)
- nth-child(2n-1) bisa ditulis menjadi nth-child(odd)
B. :only-child()
contoh penggunaan :only-child dapat dilihat pada script berikut:
<!doctype html>
<html>
<head>
<title>belajar css</title>
<style>
.bagian1:only-child{
background-color: blue;
}
</style>
</head>
<body>
<h3>only-child</h3>
<div class="kurung">
<div class="bagian1">elemen pertama</div>
</div>
</body>
</html>
Berarti "div yang kedudukannya adalah sebagai anak tunggal". hasilnya seperti berikut:
C. Selektor atribut
Selektor atribut digunakan untuk mengatur elemen elemen yang memiliki atribut sesuai dengan yang di sebutkan di selektor. Berikut tabel yang menunjukan empat kemungkinan selektor atribut yang biasa digunakan.
| Selektor | Keterangan |
|---|---|
| A[atrib] | Cocok bagi semua elemen A yang memiliki atribut berupa atrib |
| A[atrib = "x"] | Cocok bagi semua elemen A yang memiliki atribut berupa atrib dengan nilai berupa "x" |
| A[atrib ^= "x"] | Cocok bagi semua elemen A yang memiliki atribut berupa atrib dengan nilai diawali oleh "x" |
| A[atrib$= "x"] | Cocok bagi semua elemen A yang memiliki atribut berupa atrib dengan nilai diakhiri oleh "x" |
Berikut contoh untuk mengatur semua elemen li yang class-nya diawali dengan "kota":
<!doctype html>
<html>
<head>
<title>belajar css</title>
<style>
/*elemen yang class-nya diawali dengan kota*/
li[class^="kota"]{
color: white;
background: black;
}
/*elemen yang class-nya diakhiri dengan bandung*/
li[class$="bandung"]{
color: yellow;
}
</style>
</head>
<body>
<h1>selektor atribut</h1>
<ul>
<li class="kota-bandung">bandung</li>
<li class="provinsi">jawa barat</li>
<li class="kota-jakarta">jakarta</li>
<li class="provinsi">jawa barat</li>
<li class="kota-bogor">bogor</li>
<li class="provinsi">sumatra</li>
<li class="kota-bandung">bandung barat</li>
</ul>
</body>
</html>
Berikut hasilnya:
Terlihat diatas bahwa elemen yang class-nya diawali dengan "kota" maka background-nya berwarna hitam. Sementara elemen yang class-nya diakhiri dengan "bandung" teks nya berwarna kuning.
Untuk selektor yang lainnya bisa dicoba coba sendiri.
D. Selektor keturunan
Selektor keturunan digunakan untuk memilih elemen-elemen yang merupakan keturunan suatu elemen. Bentuknya seperti berikut:
<!doctype html>
<html>
<head>
<title>belajar css</title>
<style>
body div{
color: yellow;
background: black;
}
</style>
</head>
<body>
<h1>selektor keturunan</h1>
<div>bagian pertama</div>
<div>bagian kedua</div>
<hr>
<section>
<div>bagian pertama</div>
<div>bagian kedua</div>
</section>
</body>
</html>
Maka div yang merupakan keturunan dari body. Hasilnya sebagai berikut:
E. Selektor orangtua-anak
Selektor orangtua-anak adalah selektor yang menyatakan hubungan antara orang tua dan anaknya saja. Turunan yang lebih dalam tidak dieksekusi. Untuk melihat perbedaan antara selektor keturunan, perhatikan kode berikut:
<!doctype html>
<html>
<head>
<title>belajar css</title>
<style>
body > div{
color: yellow;
background: black;
}
</style>
</head>
<body>
<h1>selektor orangtua-anak</h1>
<div>bagian pertama</div>
<div>bagian kedua</div>
<hr>
<section>
<div>bagian pertama</div>
<div>bagian kedua</div>
</section>
</body>
</html>
Perbedaan pada contoh keturunan terletak pada tambahan >, yaitu menjadi body > div. Hasilnya menjadi seperti berikut:
F. Selektor pseudo-elemen
Selektor pseudo-elemen tidak berkaitan dengan elemen secara langsung karena elemen yang di maksud sebenarnya tidak pernah ada. CSS3 mempunyai pseudo-elemen ::first-letter dan ::first-line.
- Pseudo-elemen ::first-letter Berarti huruf pertama.
- Pseudo-elemen ::first-line Berarti baris pertama.
<!doctype html>
<html>
<head>
<title>belajar css</title>
<style>
p::first-letter{
float: left;
font-size: 5em;
line-height: 1em;
padding-right: 1em;
color: red;
}
</style>
</head>
<body>
<h1>selektor pseudo-elemen</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Hasilnya seperti berikut:
perhatikan setiap huruf pertama di setiap p (paragraf) diformat berbeda dengan lainnya.
Contoh penggunaan ::first-line adalah sebagai berikut:
<!doctype html>
<html>
<head>
<title>belajar css</title>
<style>
p::first-line{
float: left;
font-size: 5em;
line-height: 1em;
padding-right: 1em;
color: red;
}
</style>
</head>
<body>
<h1>selektor pseudo-elemen</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Hasilnya seperti berikut:
Perhatikan, setiap baris pertama di paragraf dengan tulisan merah dan besar. Hal ini efek dari
::first-line
G. Selektor universal
Selektor universal adalah selektor yang ditunjukan untuk semua elemen. Selektor ini berupa simbol *
. Contoh penggunaannya dapat dilihat di dokumen berikut:
G. Selektor universal
Selektor universal adalah selektor yang ditunjukan untuk semua elemen. Selektor ini berupa simbol *
. Contoh penggunaannya dapat dilihat di dokumen berikut:
<!doctype html>
<html>
<head>
<title>belajar css</title>
<style>
*{
color: blue;
}
</style>
</head>
<body>
<h1>selektor universal</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Hasilnya seperti berikut:
H. Selektor pengelompokan
Apabila elemen-elemen yang berbeda akan diformat dengan blok deklarasi yang sama, selektor masing-masing bisa dikelompolan menjadi satu semacam berikut:
h1, h2, h3
Dalam hal ini h1, h2, h3 adalah selektor. contoh berikut menunjukan bahwa h1 dan h2 menggunakan blok deklarasi yang sama.
<!doctype html>
<html>
<head>
<title>belajar css</title>
<style>
h1, h2, h3{
color: blue;
}
</style>
</head>
<body>
<h1>selektor pengelompokan</h1>
<h2>belajar css</h2>
<h3>contoh selektor</h3>
</body>
</html>
Hasilnya sebagai berikut:
0 comments for "BELAJAR CSS DASAR | komentar dan selektor"
Post a Comment