Tutorial CSS kali ini menjelaskan Pengaturan List HTML dengan CSS. List sangat membantu dalam menyampaikan satu set baik poin bernomor atau bullet.
Tutorial CSS kali ini menjelaskan Pengaturan List HTML dengan CSS. List sangat membantu dalam menyampaikan satu set baik poin bernomor atau bullet. Bab ini mengajarkan Anda bagaimana untuk mengontrol daftar jenis, position, style, dll, menggunakan CSS.
Kita memiliki berikut lima properti CSS, yang dapat digunakan untuk mengontrol list:
- List-style-type memungkinkan Anda untuk mengontrol bentuk atau penampilan penanda.
- List-style-position menentukan apakah titik panjang yang membungkus ke baris kedua harus sejajar dengan baris pertama atau mulai di bawah awal penanda.
- List-style-image menentukan gambar untuk penanda daripada titik peluru atau nomor.
- List-style berfungsi sebagai singkatan untuk sifat sebelumnya.
- marker-offset menentukan jarak antara penanda dan teks dalam daftar.
Sekarang, kita akan melihat bagaimana menggunakan properti ini dengan contoh-contoh
Properti list-style-type
List-style-type memungkinkan Anda untuk mengontrol bentuk atau style poin-poin (juga dikenal sebagai marker) dalam kasus list unordered dan gaya penomoran karakter dalam list ordered.
Berikut adalah nilai-nilai yang dapat digunakan untuk daftar unordered -
| Value | Deskripsi |
|---|---|
| none | NA |
| disc (default) | A filled-in circle |
| circle | An empty circle |
| square | A filled-in square |
Berikut adalah nilai-nilai, yang dapat digunakan untuk daftar ordered -
| Value | Deskripsi | Contoh |
|---|---|---|
| decimal | Nomor | 1,2,3,4,5 |
| decimal-leading-zero | 0 sebelum nomor | 01, 02, 03, 04, 05 |
| lower-alpha | karakter alfanumerik huruf kecil | a, b, c, d, e |
| upper-alpha | karakter alfanumerik huruf besar | A, B, C, D, E |
| lower-roman | angka Romawi huruf kecil | i, ii, iii, iv, v |
| upper-roman | angka Romawi huruf besar | I, II, III, IV, V |
| lower-greek | Penanda lower-greek | alpha, beta, gamma |
| lower-latin | Penanda lower-latin | a, b, c, d, e |
| upper-latin | Penanda upper-latin | A, B, C, D, E |
| hebrew | penanda merupakan penomoran Ibrani tradisional | |
| armenian | penanda adalah penomoran tradisional Armenia | |
| georgian | penanda tradisional penomoran Georgia | |
| cjk-ideographic | penanda merupakan nomor ideografik polos | |
| hiragana | penanda merupakan hiragana | a, i, u, e, o, ka, ki |
| katakana | penanda merupakan katakana | A, I, U, E, O, KA, KI |
| hiragana-iroha | penanda merupakan hiragana-iroha | i, ro, ha, ni, ho, he, to |
| katakana-iroha | penanda merupakan katakana-iroha | I, RO, HA, NI, HO, HE, TO |
Berikut adalah contoh -
<html> <head> </head> <body> <ul style="list-style-type:circle;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ul style="list-style-type:square;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol style="list-style-type:decimal;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> <ol style="list-style-type:lower-alpha;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> <ol style="list-style-type:lower-roman;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> </body> </html>
Ini akan menghasilkan hasil sebagai berikut:
Properti list-style-position
Properti list-style-position menunjukkan apakah penanda akan muncul di dalam atau di luar kotak yang berisi poin-poin. Hal ini dapat memiliki satu dua nilai -
| Value | Deskripsi |
|---|---|
| none | NA |
| inside | Jika teks berjalan ke baris kedua, teks akan membungkus bawah penanda. Hal ini juga akan muncul menjorok ke mana teks akan dimulai jika daftar memiliki nilai luar. |
| outside | Jika teks berjalan ke baris kedua, teks akan disesuaikan dengan dimulainya baris pertama (di sebelah kanan peluru). |
Berikut adalah Contohnya :
<html> <head> </head> <body> <ul style="list-style-type:circle; list-style-position:outside;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ul style="list-style-type:square;list-style-position:inside;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol style="list-style-type:decimal;list-style-position:outside;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> <ol style="list-style-type:lower-alpha;list-style-position:inside;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> </body> </html>
Ini akan menghasilkan hasil sebagai berikut:
Properti List-style-image
List-style-image memungkinkan Anda untuk menentukan sebuah gambar sehingga Anda dapat menggunakan bullet style. sintaks mirip dengan properti background-image dengan huruf URL memulai nilai properti diikuti oleh URL dalam kurung. Jika tidak menemukan gambar diberikan maka peluru standar yang digunakan.
<html> <head> </head> <body> <ul> <li style="list-style-image: url(/images/bullet.gif);">Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol> <li style="list-style-image: url(/images/bullet.gif);">Maths</li> <li>Social Science</li> <li>Physics</li> </ol> </body> </html>
Ini akan menghasilkan hasil sebagai berikut:
Properti list-style
List-style memungkinkan Anda untuk menentukan semua properti daftar ke ekspresi tunggal. Sifat-sifat ini dapat muncul dalam urutan apapun.
Berikut adalah contoh :
<html> <head> </head> <body> <ul style="list-style: inside square;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol style="list-style: outside upper-alpha;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> </body> </html>
Ini akan menghasilkan hasil sebagai berikut:
Properti marker-offset
The marker-offset property allows you to specify the distance between the marker and the text relating to that marker. Its value should be a length as shown in the following example :
Unfortunately, this property is not supported in IE 6 or Netscape 7.
Here is an example :
<html> <head> </head> <body> <ul style="list-style: inside square; marker-offset:2em;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol style="list-style: outside upper-alpha; marker-offset:2cm;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> </body> </html>
Ini akan menghasilkan hasil sebagai berikut:
COMMENTS