Dengan properti CSS yang ditunjukkan dalam tutorial ini, Anda dapat mendesain daftar. Informasi tersebut berlaku untuk elemen HTML ul dan ol. Jadi, Anda dapat menyesuaikan daftar terurut dan tidak terurut sesuai keinginan Anda.
Informasi Umum tentang Daftar
Pada list-style merupakan ringkasan dari tiga properti berikut:
• list-style-type
• list-style-position
• list-style-image
Melalui list-style, Anda dapat mempengaruhi cara representasi grafis bullets sebelum daftar dan indentasi mereka. Informasi yang disebutkan dipisahkan oleh koma. Urutannya tidak penting. Selain itu, tidak perlu memberikan nilai untuk setiap properti.
Sebagai contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul {
list-style:square;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Tampilan di peramban akan terlihat seperti ini:
Tanda Bullets Grafis
Anda dapat menentukan gambar khusus sebagai tanda bullets. Properti yang digunakan adalah list-style-image. Nilai berikut mungkin digunakan:
• url – nama file dan mungkin jalur gambar
• none – tidak ada gambar yang ditampilkan.
Sebagai contoh:
ul {
list-style-image: url(bullet.gif);
}
Pastikan jalur ke gambar yang diberikan pada URL sesuai.
Jika jalur yang salah diberikan, peramban harus menggunakan tanda bullets default.
Posisi Tanda Bullets
Melalui list-style-position, ditentukan bagaimana numerasi atau tanda bullets harus berperilaku dalam hal penyusunan.
• inside – baris pertama diindentasi sehingga tanda bullets dan entri daftar berbunyi rata kiri.
• outside – tanda bullets berada di sebelah kiri entri daftar.
Pada contoh berikut, dua nilai inside dan outside digunakan.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-position:inside;
}
ul.b {
list-style-position:outside;
}
</style>
</head>
<body>
<p>Daftar inside:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Daftar outside:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Dengan demikian, Anda bisa langsung melihat perbedaan efek yang dihasilkan oleh kedua nilai tersebut.
Mengatur Penampilan Tanda Bullets
Anda dapat menentukan penampilan tanda bullets atau daftar secara eksplisit. Demikian pula, Anda dapat mempengaruhi tampilan daftar terurut. Untuk itu digunakan properti list-style-type. Nilai-nilai yang diizinkan dalam properti ini adalah sebagai berikut:
• decimal – untuk daftar ol: Penomoran 1, 2, 3 dll.
• lower-roman – untuk daftar ol: Penomoran i., ii., iii. dll.
• upper-roman – untuk daftar ol: Penomoran I., II., III., IV dll.
• lower-alpha atau lower-latin – untuk daftar ol: Penomoran I., II., III., IV. dll.
• upper-alpha atau upper-latin – untuk daftar ol: Penomoran A., B., C., D. dll.
• disc – untuk daftar ul: lingkaran terisi sebagai tanda bullets
• circle – untuk daftar ul: lingkaran kosong sebagai tanda bullets
• square – untuk daftar ul: persegi sebagai tanda bullets
• none – tidak ada tanda bullets atau penomoran
• lower-greek – untuk daftar ol: Penomoran dengan huruf Yunani
• hebrew – untuk daftar ol: Penomoran dengan huruf Ibrani
• decimal-leading-zero – untuk daftar ol: Penomoran dengan nol terkemuka 0: 01., 02., 03., 04. dll.
• cjk-ideographic – untuk daftar ol: Penomoran dengan karakter ideografis
• hiragana – untuk daftar ol: penomoran Jepang (dengan huruf kecil)
• katakana – untuk daftar ol: penomoran Jepang (dengan huruf kapital)
• hiragana-iroha – untuk daftar ol: penomoran Jepang (dengan huruf kecil)
• katakana-iroha – untuk daftar ol: penomoran Jepang (dengan huruf kapital)
Pada contoh berikut, beberapa variasi yang terdaftar digunakan.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-type:circle;
}
ul.b {
list-style-type:square;
}
ol.c {
list-style-type:upper-roman;
}
ol.d {
list-style-type:lower-alpha;
}
</style>
</head>
<body>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol class="c">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol class="d">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>Pada browser, gambaran berikut akan muncul:
Pencacah
Melalui daftar ol, isinya dapat diurutkan. Namun, dalam aplikasi yang lebih kompleks, metode pengurutan ini tidaklah praktis. CSS menyediakan alternatifnya dengan penghitung (counter).
Berikut saya tunjukkan bagaimana menggunakan counter.
Pertama, saya inisialisasikan counter baru untuk elemen body.
body {
counter-reset: kapitel;
}Berkat definisi ini, counter kapitel ada dalam dokumen. Counter ini dapat digunakan sekarang.
h1 {
counter-increment: kapitel;
}
Dengan sintaks yang diperlihatkan, pencacah akan otomatis ditambahkan dengan nilai 1 setiap kali elemen h1 baru muncul. Namun, saat ini angka pencacah belum terlihat. Ini dapat diubah dengan menggunakan pseudo elemen dengan mudah.
h1::before {
content: counter(kapitel) ". ";
}
Contoh penerapannya dapat terlihat sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset: kapitel;
}
h1 {
counter-increment: kapitel;
}
h1::before {
content: counter(kapitel) ". ";
}
</style>
</head>
<body>
<h1>Capítulo</h1>
<h1>Capítulo</h1>
</body>
</html>Dan inilah hasilnya di browser:
Pada contoh tersebut, angka di awal elemen h1 ditampilkan melalui ::before. Agar angka tidak melekat langsung pada teks judul, titik dan spasi ditambahkan setelah angka.
content: counter(kapitel) ". "
Penghitungan yang bersarang juga dimungkinkan. Untuk melakukan ini, counter harus diatur ulang di titik di mana ia akan dimulai dari awal lagi.
h1 {
counter-increment: kapitel;
counter-reset: unterkapitel;
}Dengan contoh ini, pencacah akan diatur ulang setiap kali elemen h1 baru muncul. Contoh berikut menunjukkan penggunaan pencacah bersarang yang khas.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset:kapitel;
}
h1 {
counter-reset:unterkapitel;
}
h1:before {
counter-increment:kapitel;
content: counter(kapitel) ". ";
}
h2:before {
counter-increment:unterkapitel;
content:counter(kapitel) "." counter(unterkapitel) " ";
}
</style>
</head>
<body>
<h1>Capítulo</h1>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h1>Capítulo</h1>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
</body>
</html>Di browser, tampilan lengkapnya akan seperti ini:
Contoh-contoh tersebut menunjukkan seberapa kuat penggunaan counter.
