11. List Style CSS
Property list -style = mengatur tampilan list pada tag <ul> dan <ol>. Beberapa property dari list-style sebagai berikut:
- List-style-type, mengatur simbol/angka yang digunakan. Nilai yang paling umum digunakan yaitu : disc, circle, square, decimal dan none (tidak ada simbol)
- List-style-position, mengatur posisi simbol/angka di luar area/di dalam list area. Nilainya berupa outset atau inside.
- ·List-style-image, mengatur gambar sebagai simbol list.
Nilai property diatas dapat digabungkan dalam property list-style dengan format sebagai berikut :
![Text Box: list-style : [list-style-type] [list-style-position] [list-style-image];](file:///C:\Users\Vita-PC\AppData\Local\Temp\msohtmlclip1\01\clip_image001.png){kind=small}
Berikut
adalah contoh penggunaan script property list-style dengan
nama file list-style.html
<html>
<head>
<title>Belajar CSS List-Style</title>
<style type="text/css">
ul {list-style: url('../gambar/aku.gif');}
</style>
</head>
<body>
<ul>
<li>Baris saru</li>
<li>Baris dua</li>
<li>Baris tiga</li>
</ul>
</body>
</html>
<head>
<title>Belajar CSS List-Style</title>
<style type="text/css">
ul {list-style: url('../gambar/aku.gif');}
</style>
</head>
<body>
<ul>
<li>Baris saru</li>
<li>Baris dua</li>
<li>Baris tiga</li>
</ul>
</body>
</html>
Pada website akan terlihat sebagai berikut :
0 Comments