CSS Memiliki kemampuan untuk memanipulasi atau mengubah list HTML . CSS sangat berguna ketika anda inginkan membuat daftar list dengan model tertentu mislya list yang berbentuk angaka , titik , angka romawi dan lainya . Dengan mengunakan CSS kita dapat memanipulasi list HTML dengan mengubah bentuk tanda listnya untuk mengubah list HTML dengan CSS kita bisa mrnggunkan property "list-style-type" yang berarti tipe gaya list .
Untuk mengubah list HTML dengan CSS perhatikan contoh berikut ini .
list.php
<!DOCTYPE html>
<html>
<head>
<title>List CSS</title>
<link rel="stylesheet" type="text/css" href="style-list.css">
</head>
<body>
<h1>Mengubah List dengan CSS</h1>
<ul class="makanan">
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Sate</li>
<li>Rujak</li>
</ul>
<ul class="minuman">
<li>es tea</li>
<li>es jeruk</li>
<li>Kopi</li>
<li>Susu</li>
</ul>
<ol class="alamat">
<li>Madiun</li>
<li>Jakarta</li>
<li>Kalten</li>
<li>Mejayan</li>
</ol>
<ol class="mobil">
<li>sedan</li>
<li>Mini Bus</li>
<li>Truk</li>
<li>Pick Up</li>
</ol>
</body>
</html>
h1{
text-align: center;
}
ul.makanan{
list-style-type: square; /* list dengan bentuk square */
}
ul.minuman{
list-style-type: circle; /* list dengan bentuk lingkaran */
}
ol.alamat{
list-style-type: upper-alpha; /* list dengan bentuk alpha */
}
ol.mobil{
list-style-type: upper-roman; /* list dengan bentuk romawi */
}
Belajar CSS Mengubah List Dengan CSS . dapat di lihat pada contoh di atas bahwa untuk membuat list dengan bentuk square bisa menggunakan property dan value css:
list-style-type: square; /* list dengan bentuk square */untuk membuat list dengan bentuk lingkaran kecil bisa menggunakan property dan value css:
list-style-type: circle; /* list dengan bentuk list */untuk membuat list dengan bentuk alphabet bisa menggunakan property dan value CSS:
list-style-type: upper-alpha; /* list dengan bentuk plphabet */untuk membuat list dengan bentuk romawi bisa mengunakakn property dan value css:
list-style-type: upper-roman; /* list dengan bentuk romawi */
sedikit tambahan untuk menghilangkan tandan list andan bisa menggunakan property dan value sebagai berikut :
list-style-type: none; /* list dengan bentuk list */
Kesimpulan :
List atau daftar menu biasanya default icon titik besar , kelihatan nya tidak bagus jika di gunakan untuk list siswa sekolah , maka di sini di beri kan untuk mengenal list .
Refrensi
W3Schools.com
No comments:
Post a Comment