Daftar CSS properti memungkinkan Anda untuk:
- Set spidol item daftar yang berbeda untuk daftar memerintahkan
- Set spidol item daftar yang berbeda untuk daftar unordered
- Mengatur foto sebagai penanda item daftar
Daftar
Dalam HTML, ada dua jenis list:
- daftar unordered (<ul>) - daftar item ditandai dengan peluru
- daftar ordered (<ol>) - daftar item ditandai dengan angka atau huruf
Dengan CSS, list bisa ditata lebih lanjut, dan gambar dapat digunakan sebagai penanda item daftar.
Daftar Penanda berbeda
Jenis item daftar penanda ditetapkan dengan properti list-style-type:
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;
}
Beberapa nilai-nilai untuk daftar unordered, dan beberapa untuk daftar ordered.
Menggunakan Gambar:
Untuk menentukan gambar sebagai penanda daftar item, menggunakan properti list-style-image:
ul {
list-style-image: url('spinner.gif');
}
Contoh di atas tidak menampilkan sama di semua browser. IE dan Opera akan menampilkan gambar-penanda sedikit lebih tinggi dari Firefox, Chrome, dan Safari.
Jika Anda ingin image-marker untuk ditempatkan merata di semua browser, solusi crossbrowser dijelaskan di bawah ini.
Crossbrowser Solusi
Contoh berikut menampilkan image-marker sama di semua browser:
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li{
background-image('spinner.gif');
background-repeat: no-repeat;
background-position: 0px center;
padding-left: 15px;
}
Contoh menjelaskan:
- Untuk <ul>:
- Mengatur gaya-jenis daftar ke none untuk menghapus penanda item daftar
- Set kedua padding dan margin untuk 0px (untuk kompatibilitas cross-browser)
- Untuk semua <li> di <ul>:
- Mengatur URL gambar, dan menunjukkan hanya sekali (no-repeat)
- Posisi gambar di mana Anda inginkan (0px kiri dan nilai vertikal: center)
- Posisikan teks dalam daftar dengan padding-left
Daftar - Properti Singkatan
Properti list-style adalah properti singkatan. Hal ini digunakan untuk mengatur semua properti dalam satu daftar deklarasi:
ul {
list-style: square inside url("spinner.gif");
}
Bila menggunakan properti singkatan, urutan nilai properti adalah:
- list-style-type (jika list-style-image yang ditentukan, nilai properti ini akan ditampilkan jika gambar untuk beberapa alasan tidak dapat ditampilkan)
- list-style-position (menentukan apakah penanda daftar-item akan muncul di dalam atau di luar aliran konten)
- list-style-image (menentukan gambar sebagai penanda daftar item)
Jika salah satu dari nilai properti tidak lengkap, nilai default untuk properti yang hilang akan dimasukkan, jika ada.
0 komentar:
Posting Komentar