Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial Belajar CSS Bagian 54 : Cara Menggunakan Property Text Shadow di CSS. Pada tutorial ini kita akan belajar tentang cara menggunakan property list di CSS.
Pada list berurutan, penandaan item list dilakukan dengan alfabet dan angka, sedangkan pada list tidak berurutan, item list ditandai dengan poin.
Kita dapat menata listnya menggunakan CSS. Property list CSS memungkinkan kita untuk :
- Atur jarak antara teks dan penanda dalam list.
- Menggunakan icon/gambar untuk penanda daripada menggunakan angka atau poin-poin.
- Kontrol tampilan dan bentuk penanda.
- Tempatkan penanda di luar atau di dalam kotak yang berisi item list.
- Atur warna latar belakang untuk mencantumkan item dan list.
Property CSS untuk menata list diberikan sebagai berikut:
| Nilai | Deskripsi |
| list-style-type | Property ini bertanggung jawab untuk mengontrol tampilan dan bentuk penanda. |
| list-style-image | Ini menetapkan gambar untuk penanda, bukan angka atau poin-poin. |
| list-style-position | Ini menentukan posisi penanda. |
| list-style | Ini adalah property singkatan dari property di atas. |
| marker-offset | Digunakan untuk menentukan jarak antara teks dan marker. Ini tidak didukung di IE6 atau Netscape 7. |
Mari kita pahami property di atas secara detail, beserta contohnya masing-masing.
Property list-style-type
Property ini memungkinkan kita untuk mengubah tipe list penanda default ke tipe lain seperti persegi, lingkaran, angka romawi, huruf latin, dan banyak lagi.
Secara default, item list yang diurutkan diberi nomor dengan angka Arab (1, 2, 3, dst.), dan item dalam list yang tidak diurutkan ditandai dengan poin bulat (•).
Jika kita menyetel nilainya ke none, ini akan menghilangkan penanda/peluru.
Catatan: List ini juga menyertakan padding dan margin default. Untuk menghapus ini, kita perlu menambahkan padding:0 dan margin:0 ke <ol> dan <ul>.
Contoh penggunaan property ini diberikan sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>CSS Lists</title>
<style>
.num{
list-style-type:decimal;
}
.alpha{
list-style-type:lower-alpha;
}
.roman{
list-style-type:lower-roman;
}
.circle{
list-style-type:circle;
}
.square{
list-style-type:square;
}
.disc{
list-style-type:disc;
}
</style>
</head>
<body>
<h1>
Selamat datang di Mbah WP
</h1>
<h2>
Ordered Lists
</h2>
<ol class="num">
<li>satu</li>
<li>dua</li>
<li>tiga</li>
</ol>
<ol class="alpha">
<li>satu</li>
<li>dua</li>
<li>tiga</li>
</ol>
<ol class="roman">
<li>satu</li>
<li>dua</li>
<li>tiga</li>
</ol>
<h2>
Unordered lists
</h2>
<ul class="disc">
<li>satu</li>
<li>dua</li>
<li>tiga</li>
</ul>
<ul class="circle">
<li>satu</li>
<li>dua</li>
<li>tiga</li>
</ul>
<ul class="square">
<li>satu</li>
<li>dua</li>
<li>tiga</li>
</ul>
</body>
</html> Property list-style-position
Property ini mewakili apakah kemunculan penanda berada di dalam atau di luar kotak yang berisi poin-poin. Ini terdiri dari 2 nilai.
inside: Artinya poin-poinnya akan ada di item list. Dalam hal ini, jika teks berada di baris kedua, maka teks tersebut akan dibungkus di bawah penanda.
outside: Ini menyatakan bahwa poin-poin akan berada di luar item list. Ini adalah nilai default.
Contoh berikut menjelaskannya dengan lebih jelas.
<!DOCTYPE html>
<html>
<head>
<title>CSS Lists</title>
<style>
.num{
list-style-type:decimal;
list-style-position:inside;
}
.roman{
list-style-type:lower-roman;
list-style-position:outside;
}
.circle{
list-style-type:circle;
list-style-position:inside;
}
.square{
list-style-type:square;
}
.disc{
list-style-type:disc;
list-style-position:inside;
}
</style>
</head>
<body>
<h1>
Selamat datang di Mbah WP
</h1>
<h2>
Ordered Lists
</h2>
<ol class="num">
<li>INSIDE</li>
<li>dua</li>
<li>tiga</li>
</ol>
<ol class="roman">
<li>OUTSIDE</li>
<li>dua</li>
<li>tiga</li>
</ol>
<h2>
Unordered lists
</h2>
<ul class="disc">
<li>INSIDE</li>
<li>dua</li>
<li>tiga</li>
</ul>
<ul class="circle">
<li>INSIDE</li>
<li>dua</li>
<li>tiga</li>
</ul>
<ul class="square">
<li>DEFAULT</li>
<li>dua</li>
<li>tiga</li>
</ul>
</body>
</html>Property list-style-image
Ini menentukan gambar/icon sebagai penanda. Dengan menggunakan property ini, kita dapat mengatur poin gambar. Sintaksnya mirip dengan property background-image. Jika tidak menemukan gambar yang sesuai, poin default akan digunakan.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>CSS Lists</title>
<style>
.order{
list-style-image: url(https://img.icons8.com/bubbles/30/chevron-right.png);
}
.unorder{
list-style-image: url(https://img.icons8.com/color/30/pdf.png);
}
</style>
</head>
<body>
<h1>
Selamat datang di Mbah WP
</h1>
<h2>
Ordered Lists
</h2>
<ol class="order">
<li>satu</li>
<li>dua</li>
<li>tiga</li>
</ol>
<h2>
Unordered lists
</h2>
<ul class="unorder">
<li>satu</li>
<li>dua</li>
<li>tiga</li>
</ul>
</body>
</html>Property list-style
Ini adalah shorthand property yang digunakan untuk mengatur semua property list dalam satu ekspresi.
Urutan nilai property ini adalah type, position dan image. Namun jika ada nilai property yang hilang, maka nilai default akan dimasukkan.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>CSS Lists</title>
<style>
.order{
list-style: lower-alpha inside url(https://img.icons8.com/color/30/pdf.png);
}
.unorder{
list-style: disc outside;
}
</style>
</head>
<body>
<h1>
Selamat datang di Mbah WP
</h1>
<h2>
Ordered Lists
</h2>
<ol class="order">
<li>satu</li>
<li>dua</li>
<li>tiga</li>
</ol>
<h2>
Unordered lists
</h2>
<ul class="unorder">
<li>satu</li>
<li>dua</li>
<li>tiga</li>
</ul>
</body>
</html> List Style Dengan Warna
Untuk membuat list lebih atraktif dan menarik, kita dapat menata list dengan warna. Penambahan apapun pada tag <ul> atau <ol> akan mempengaruhi keseluruhan list, sedangkan penambahan pada tag <li> individual akan mempengaruhi item dalam list yang bersangkutan.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>CSS Lists</title>
<style>
.order{
list-style: upper-alpha;
background: pink;
padding:20px;
}
.order li{
background: lightblue;
padding:10px;
font-size:20px;
margin:10px;
}
.unorder{
list-style: square inside;
background: cyan;
padding:20px;
}
.unorder li{
background: green;
color:white;
padding:10px;
font-size:20px;
margin:10px;
}
</style>
</head>
<body>
<h1>
Selamat datang di Mbah WP
</h1>
<h2>
Ordered Lists
</h2>
<ol class="order">
<li>SATU</li>
<li>DUA</li>
<li>TIGA</li>
</ol>
<h2>
Unordered lists
</h2>
<ul class="unorder">
<li>SATU</li>
<li>DUA</li>
<li>TIGA</li>
</ul>
</body>
</html>Semoga tutorial property list ini membantu Anda untuk memahami cara membuat daftar urutan list dengan lebih menarik di website Anda.
