Belajar CSS (9. List)

Akhi Syabab

Styling List Menggunakan CSS

Apa itu list HTML?

Diskripsi : List artinya daftar. Pada HTML, terdapat dua jenis tipe list yaitu <ul> (daftar ditandai dengan bullet) dan <ol>(daftar ditandai dengan nomor dan huruf) . Dengan sentuhan CSS maka kita dapat mengedit seperti memberi warna bacground list, mengatur foto sebagai penanda list, dan lainya.

Property yang terkait dengan list yaitu list-style, list-style-image, list-style-position, dan list-style-type

1. List-style-image
Diskripsi: digunakan untuk pengganti item penanda list dengan gambar
Value : none, url
ex. 

<!DOCTYPE html>
<html>
<head>
	<style>
		ul {
	    	list-style: square inside url("lilchick.gif");
		}
	</style>
</head>
<body>
	<ul>
	  <li>satu</li>
	  <li>dua</li>
	  <li>tiga</li>
	</ul>
</body>
</html>

kami sudah menyediakan gambar bernama lilchick.gif dalam satu folder bersama file html diatas. hasilnya sebagai berikut:
hasil

2. List-Style-Position
Diskripsi : properti yang digunakan untuk menentukan apakah list/daftar berada di dalam atau di luar content
Value : Inside, outside.
ex.

<!DOCTYPE html>
<html>
<head>
	<style>
		ul.a {	
	    	list-style-position: inside;
		}
		ul.b {
	    	list-style-position: outside;
		}
		li {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<p>The following list has list-style-position: inside:</p>
	<ul class="a">
	  <li>Earl Grey Tea - A fine black tea</li>
	  <li>Jasmine Tea - A fabulous "all purpose" tea</li>
	  <li>Honeybush Tea - A super fruity delight tea</li>
	</ul>
	<p>The following list has list-style-position: outside:</p>
	<ul class="b">
	  <li>Earl Grey Tea - A fine black tea</li>
	  <li>Jasmine Tea - A fabulous "all purpose" tea</li>
	  <li>Honeybush Tea - A super fruity delight tea</li>
	</ul>
	<p>"list-style-position: outside" is the default setting.</p>
</body>
</html>

hasil

3. List-Style-Type
Diskripsi : properti ini duganakan untuk menentukan jenis item sebagai penanda list
Value : disc, armenian, circle, cjk-ideographic, decimal, decimal-leading-zero, georgian, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha, lower-alpha, lower-greek, lower-latin, lower-roman, none, square, upper-alpha, upper latin, upper-roman. untuk penjelasan fungsinya ada di contoh kode berikut:

<!DOCTYPE html>
<html>
<head>
	<style>
		ul.a {list-style-type: circle;}
		ul.b {list-style-type: disc;}
		ul.c {list-style-type: square;}

		ol.d {list-style-type: armenian;}
		ol.e {list-style-type: cjk-ideographic;}
		ol.f {list-style-type: decimal;}
		ol.g {list-style-type: decimal-leading-zero;}
		ol.h {list-style-type: georgian;}
		ol.i {list-style-type: hebrew;}
		ol.j {list-style-type: hiragana;}
		ol.k {list-style-type: hiragana-iroha;}
		ol.l {list-style-type: katakana;}
		ol.m {list-style-type: katakana-iroha;}
		ol.n {list-style-type: lower-alpha;}
		ol.o {list-style-type: lower-greek;}
		ol.p {list-style-type: lower-latin;}
		ol.q {list-style-type: lower-roman;}
		ol.r {list-style-type: upper-alpha;}
		ol.s {list-style-type: upper-latin;}
		ol.t {list-style-type: upper-roman;}

		ol.u {list-style-type: none;}
		ol.v {list-style-type: inherit;}
	</style>
</head>
<body>

	<ul class="a">
		  <li>Circle type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ul>

	<ul class="b">
		  <li>Disc type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ul>

	<ul class="c">
		  <li>Square type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ul>
	<ol class="d">
		  <li>Armenian type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ol>

	<ol class="e">
		  <li>Cjk-ideographic type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ol>

	<ol class="f">
		  <li>Decimal type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ol>

	<ol class="g">
		  <li>Decimal-leading-zero type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ol>

	<ol class="h">
		  <li>Georgian type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ol>

	<ol class="i">
		  <li>Hebrew type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ol>
	<ol class="j">
		  <li>Hiragana type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ol>

	<ol class="k">
		  <li>Hiragana-iroha type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ol>

	<ol class="l">
		  <li>Katakana type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ol>

	<ol class="m">
		  <li>Katakana-iroha type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ol>

	<ol class="n">
		  <li>Lower-alpha type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ol>

	<ol class="o">
		  <li>Lower-greek type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ol>

	<ol class="p">
		  <li>Lower-latin type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ol>

	<ol class="q">
		  <li>Lower-roman type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ol>

	<ol class="r">
		  <li>Upper-alpha type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ol>

	<ol class="s">
		  <li>Upper-latin type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ol>

	<ol class="t">
		  <li>Upper-roman type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ol>

	<ol class="u">
		  <li>None type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
		</ol>

	<ol class="v">
		  <li>inherit type</li>
		  <li>Tea</li>
		  <li>Coca Cola</li>
	</ol>

</body>
</html>

hasil

Semoga bermanfaat. Sampai jumpa di postingan selanjutnya.

Written by @akhi_syabab