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 -