CSS - Daftar
Daftar sangat membantu dalam menyampaikan satu set poin bernomor atau peluru. Bab ini mengajarkan Anda cara mengontrol jenis daftar, posisi, gaya, dll., Menggunakan CSS.
Kami memiliki lima properti CSS berikut, yang dapat digunakan untuk mengontrol daftar -
Itu list-style-type memungkinkan Anda mengontrol bentuk atau tampilan marker.
Itu list-style-position menentukan apakah titik panjang yang membungkus ke baris kedua harus sejajar dengan baris pertama atau dimulai di bawah awal penanda.
Itu list-style-image menentukan gambar untuk penanda daripada poin atau angka peluru.
Itu list-style berfungsi sebagai singkatan dari properti sebelumnya.
Itu marker-offset menentukan jarak antara penanda dan teks dalam daftar.
Sekarang, kita akan melihat bagaimana menggunakan properti ini dengan contoh.
Properti tipe gaya daftar
The list-style-type properti memungkinkan Anda untuk mengontrol bentuk atau gaya poin-poin (juga dikenal sebagai penanda) dalam kasus daftar unordered dan gaya penomoran karakter dalam daftar memerintahkan.
Berikut adalah nilai yang dapat digunakan untuk daftar tidak berurutan -
| Sr.No. | Nilai & Deskripsi |
|---|---|
| 1 | none NA |
| 2 | disc (default) Lingkaran yang terisi |
| 3 | circle Lingkaran kosong |
| 4 | square Kotak yang terisi |
Berikut adalah nilainya, yang dapat digunakan untuk daftar terurut -
| Nilai | Deskripsi | Contoh |
|---|---|---|
| desimal | Jumlah | 1,2,3,4,5 |
| desimal-nol di depan | 0 sebelum nomor | 01, 02, 03, 04, 05 |
| alfa-rendah | Karakter alfanumerik huruf kecil | a, b, c, d, e |
| alpha atas | Karakter alfanumerik huruf besar | A, B, C, D, E |
| romawi kecil | Angka Romawi huruf kecil | i, ii, iii, iv, v |
| Romawi atas | Angka Romawi huruf besar | I, II, III, IV, V |
| Yunani rendah | Penandanya adalah bahasa Yunani-rendah | alfa, beta, gamma |
| huruf latin kecil | Penandanya adalah huruf latin kecil | a, b, c, d, e |
| latin-atas | Penanda menggunakan huruf latin besar | A, B, C, D, E |
| Ibrani | Penandanya adalah penomoran Ibrani tradisional | |
| armenian | Penandanya adalah penomoran tradisional Armenia | |
| georgian | Penandanya adalah penomoran tradisional Georgia | |
| cjk-ideografik | Penanda adalah nomor ideografik biasa | |
| hiragana | Penandanya adalah hiragana | a, i, u, e, o, ka, ki |
| katakana | Penandanya adalah katakana | A, I, U, E, O, KA, KI |
| hiragana-iroha | Penandanya adalah hiragana-iroha | i, ro, ha, ni, ho, he, to |
| katakana-iroha | Penandanya adalah katakana-iroha | I, RO, HA, NI, HO, HE, TO |
Ini contohnya -
<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 daftar-gaya-posisi menunjukkan apakah penanda harus muncul di dalam atau di luar kotak yang berisi poin-poin. Itu dapat memiliki satu dari dua nilai -
| Sr.No. | Nilai & Deskripsi |
|---|---|
| 1 | none NA |
| 2 | inside Jika teks masuk ke baris kedua, teks akan membungkus di bawah penanda. Ini juga akan muncul menjorok ke tempat teks akan dimulai jika daftar memiliki nilai di luar. |
| 3 | outside Jika teks masuk ke baris kedua, teks akan diratakan dengan awal baris pertama (di sebelah kanan poin). |
Ini contohnya -
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-stlye-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-stlye-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 gambar gaya daftar
Gambar -gaya-daftar memungkinkan Anda untuk menentukan gambar sehingga Anda dapat menggunakan gaya peluru Anda sendiri. Sintaksnya mirip dengan properti gambar latar belakang dengan url huruf memulai nilai properti diikuti dengan URL dalam tanda kurung. Jika tidak menemukan gambar yang diberikan maka peluru default digunakan.
Ini contohnya -
<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 bergaya daftar
Gaya daftar memungkinkan Anda menentukan semua properti daftar ke dalam ekspresi tunggal. Properti ini dapat muncul dalam urutan apa pun.
Ini contohnya -
<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
Properti marker-offset memungkinkan Anda menentukan jarak antara marker dan teks yang berkaitan dengan marker itu. Nilainya harus panjang seperti yang ditunjukkan pada contoh berikut -
Sayangnya, properti ini tidak didukung di IE 6 atau Netscape 7.
Ini contohnya -
<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 -