Sebagaimana sudah saya sampaikan sebelumnya, materi belajar css style berikutnya adalah membuat daftar CSS atau CSS List. Dengan CSS list kita bisa mengatur penanda yang berbeda pada baik pada ordered list (ditandai menggunakan angka atau huruf) maupun unordered list (ditandai menggunakan bullet) serta mengatur gambar sebagai penanda daftar / list.
Perhatikan contoh dibawah ini :
1
2
3
4
5
6
7
8
9
| 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;} |
Kode dari nilai diatas adalah unordered list dan yang lainnya ordered list.
Untuk menggunakan gambar sebagai penanda list, gunakan list-style-image-property
1
2
3
4
5
6
7
| ul{list-style-image: url('sqpurple.gif');} |
Dalam css list juga memungkinkan untuk menuliska semua property dalam satu yang disebut shortand-list. Seperti contoh kode dibawah ini :
1
2
3
4
5
6
7
| ul{list-style: square url("sqpurple.gif");} |
Berikut ini adalah daftar dari list property:
- List style : mengatur semua property dalam satu deklarasi
- List style image : menentukan gambar sebagai penanda list
- List style position : menentukan posisi didalam atau diluar konten
- List style type : menentukan jenis / gaya list
Masih ada 1 macam css style yang perlu dipelajari yaitu css table yang akan saya sampaikan dalam tutorial belajar css berikutnya. Selamat belajar!
0 comments:
Post a Comment