Dalam tutorial kali ini kita masih akan belajar mengenai CSS, kita akan membahas mengenai cara mengatur tampilan List dengan CSS, untuk teman – teman yang belum mengetahui mengenai apa itu list silahkan membaca artikel warung belajar yang khusus membahas list di HTML Tutorial HTML Part 16 Cara Membuat Daftar/List di HTML.
List yang digunakan untuk menampilkan daftar atau juga bisa anda gunakan untuk membuat menu navigasi, CSS menyediakan beberapa property yang bisa digunakan untuk memanipulasi tampilan dari list yang dibuat di HTML, baik tanpa panjang lebar beberapa property tersebut antara lain :
Property List-style-type
property ini sederhananya digunakan untuk mengatur icon dari daftar, ada beberapa jenis style yang bisa anda gunakan, agar lebih memahami contohnya silahkan perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<style>
ul.satu {
list-style-type: circle;
}
ul.dua {
list-style-type: square;
}
ol.tiga {
list-style-type: upper-roman;
}
ol.empat {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p>Contoh Unordered List</p>
<ul class="satu">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
<ul class="dua">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
<p>Contoh Ordered List</p>
<ol class="tiga">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
<ol class="empat">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
</body>
</html>Semisal kita simpan dengan nama list-style-type.html, lalu silahkan dibuka di browser, maka hasilnya adalah seperti berikut ini :
penjelasannya :
- pada list pertama iconnya adalah lingkaran hal tersebut karena kita menggunakan value circle pada property list-style-type
- pada list kedua iconnya adalah kotak hal tersebut karena kita menggunakan value square pada property list-style-type
- pada list ketiga iconnya adalah huruf romawi besar hal tersebut karena kita menggunakan value upper-roman pada property list-style-type
- pada list keempat iconnya adalah huruf kecil hal tersebut karena kita menggunakan value lower-alpha pada property list-style-type
Beberapa value yang bisa anda gunakan untuk property list-style-type adalah :
| Value | Keterangan |
|---|---|
| disc | default, bertanda lingkaran berisi warna hitam penuh. |
| armenian | penomoran tradisional armenian. |
| circle | lingkaran tanpa isi. |
| cjk-ideographic | nomor ideographic. |
| decimal | nomor biasa. |
| decimal-leading-zero | desimal dengan leading angka seperti 01,02,03 dan seterusnya. |
| georgian | penomoran tradisional georgian. |
| hebrew | penomoran tradisional yahudi. |
| hiragana | penomoran tradisional hiragana. |
| hiragana-iroha | penomoran tradisional hiragana-iroha. |
| katakana | penomoran tradisional katakana. |
| katakana-iroha | penomoran tradisional katakana-iroha. |
| lower-alpha | huruf kecil biasa. |
| lower-greek | huruf kecil yunani. |
| lower-latin | huruf kecil latin. |
| lower-roman | angka romawi kecil. |
| none | tanda atau tanpa tanda list. |
| square | kotak. |
| upper-alpha | huruf besar biasa. |
| upper-latin | huruf besar latin. |
| upper-roman | angka romawi besar. |
Property list-style-image
Property ini digunakan untuk mengatur tampilan dari icon list (daftar) dengan menggunakan gambar, nah anda dapat menentukan gambar yang akan digunakan sebagai icon listnya, dalam contoh ini saya menggunakan gambar dengan format file .gif dengan ukuran 10 x 10 pixel, perhatikan skrip dibawah :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul
{
list-style-image: url('list-icon.gif');
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
</body>
</html>lalu kita simpan semisal dengan nama list-style-image.html, lalu kita buka di browser maka hasilnya adalah seperti berikut ini :
maka hasilnya adalah seperti gambar diatas, icon yang ada di list tersebut yang berwarna ungu itu adalah gambar yang kita set pada value property list-style-image
Property list-style-position
Property ini digunakan untuk mengatur posisi dari listnya apakah agak kedalam atau agak keluar, value yang bisa anda gunakan disini adalah inside ataupun outside, perhatikan contoh skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul.a
{
list-style-position: inside;
}
ul.b
{
list-style-position: outside;
}
</style>
</head>
<body>
<h3>Contoh dari List Style Position = inside</h3>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
<hr/>
<h3>Contoh dari List Style Position = Outside</h3>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
</body>
</html>lalu kita akan simpan dengan nama semisal list-style-position.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :
penjelasan :
- pada daftar pertama kita menggunakan value inside pada property list-style-position sehingga daftar ditampilkan agak kedalam.
- pada daftar kedua kita menggunakan value outside pada property list-style-position sehingga daftar ditampilkan agak keluar (posisi default).
Shorthand property
Shorthand property adalah istilah dari pemendekan perintah di CSS yang juga bisa anda gunakan pada penulisan list-style, perhatikan contoh skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul
{
list-style: square inside url('list-icon.gif');
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
</body>
</html>semisal kita simpan dengan nama list-style-shorthand.html, lalu buka di browser maka hasilnya :
Penjelasan :
- Pada list diatas kita menggunakan list-style-shorthand dengan beberapa value didalamnya.
- value pertama adalah square yang menset dari list-style-type menjadi kotak(square)
- value kedua adalah inside yang menset dari list-style-position menjadi agak kedalam (inside)
- value ketiga adalah url(‘list-icon.gif’) yang menset icon dari list daftar menggunakan gambar list-icon.gif
Setelah kita mempelajari beberapa property yang berhubungan dengan List, berikutnya kita akan mempelajari beberapa hal yang bisa anda gunakan untuk mengatur tampilan dari list dengan menggunakan CSS.
Menghapus Settingan Dasar List
Secara default list yang ditampilkan telah mengatur bagian padding, margin, dan list-style-type, nah anda bisa menggunakan perintah dibawah ini untuk menghapus settingan dasar tersebut, perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul.a
{
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
<hr/>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
</body>
</html>semisal kita simpan dengan nama setting-dasar-list.html, lalu kita buka di browser :
penjelasan :
- Pada list pertama terlihat daftar ditampilkan lebih masuk ke dalam kearah kanan, dan terdapat icon lingkaran yang merupakan default type dari list
- Pada list kedua terlihat tidak ada margin, padding, dan icon pada list, sehingga daftar ditampilkan menampel dengan ujung browser
Memberi warna pada List
Selain menghilangkan settingan default dari list, anda juga bisa memanipulasi warna dari list, dengan menggunakan beberapa property tambahan seperti background, perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
background:red;
padding: 20px;
}
ul li {
background: salmon;
margin: 5px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
<hr/>
</body>
</html>semisal kita beri nama background-list.html, lalu kita buka di browser maka hasilnya :
Penjelasan :
- Pada bagian list kita berikan background dengan warna merah, background:red; pada selector ul
- pada selector ul li kita beri background dengan warna salmon (semacam pink) dengan margin 5 pixel sehingga jarak 1 item list dengan yang lain ada jaraknya, untuk menggunakan warna lainnya bisa membuka artikel warung belajar mengenai Tutorial Belajar CSS Part 11 – Mengenal Kode Warna pada CSS
Bagaimana mudah bukan teman – teman, itu adalah beberapa hal yang bisa kita lakukan untuk List dengan menggunakan CSS, jika ada yang ingin didiskusikan silahkan di kolom komentar, baik sekian dulu teman – teman sampai jumpa di tutorial selanjutnya.