Bagaimana Cara Terbaik Memanfaatkan Daftar CSS?



Artikel ini akan memperkenalkan Anda ke Daftar CSS dan dalam prosesnya membantu Anda memahami cara kerja gaya Daftar CSS dengan demonstrasi.

Daftar CSS sangat membantu dalam mencapai satu set poin yang diberi nomor atau poin. Artikel ini akan menunjukkan cara mengontrol tipe, posisi, gaya menggunakan CSS. Pointer berikut akan dibahas di sini,

Jadi mari kita mulai,





Daftar CSS

Properti CSS

Ada lima properti CSS berbeda yang dapat Anda gunakan untuk mengontrol daftar:

  • List-style-type: Ini memungkinkan kita untuk mengontrol bentuk atau tampilan marker.
  • List-style-position: Ini menentukan bahwa titik panjang diperlukan untuk membungkus ke baris kedua atau harus sejajar dengan baris pertama atau dimulai dengan penanda.
  • List-style-image: Ini menentukan bahwa gambar untuk penanda harus ditambahkan atau dibuat lebih menarik daripada poin atau poin bernomor.
  • List-style: Ini menunjukkan singkatan dari properti sebelumnya.
  • Marker-offset: Ini menentukan jarak antara penanda dan teks yang dimasukkan dalam daftar.

Di sini daftar yang biasa digunakan adalah: list-style-type dan list-style-position. Itu dijelaskan di bawah



dapatkan tanggal dari string java

Pindah dengan artikel ini tentang Daftar CSS

Properti tipe gaya daftar

Dalam properti tipe gaya daftar, Anda dapat mengontrol bentuk dan gaya titik-titik atau penanda dalam kasus daftar yang tidak berurutan. Dalam kasus daftar memerintahkan itu adalah karakter penomoran.

Tabel di bawah ini mewakili untuk daftar tidak berurutan:



Nilai Deskripsi
Tidak ada NA
Cakram Itu diisi dengan lingkaran. (Default)
Lingkaran Ini adalah lingkaran kosong.
Kotak Itu diisi di alun-alun.

Tabel di bawah ini mewakili untuk daftar yang dipesan:

Nilai Deskripsi Contoh
Desimal Itu adalah angka1,4,3
Nol di depan desimal 0 sebelum angka sebenarnya01, 04, 03
Alfa rendah Ini adalah karakter alfanumerik huruf kecil.a, b, c, d
Alfa atas Ini adalah karakter alfanumerik huruf besar.A, B, C, D
Romawi kecil Ini adalah angka Romawi huruf kecil.i, ii, iii, iv, v
Romawi atas Ini adalah angka Romawi huruf besar.I, II, III, IV, V
Yunani ke bawah Penanda dalam bahasa yunani rendahalpha, gamma
Latin kecil Penanda ditulis dalam huruf latin kecila, b, c, d
Latin-hulu Penanda ditulis dalam huruf latin besarA, B, C, D

Pindah dengan artikel ini tentang Daftar CSS

Daftar CSS: Program Contoh

 
  • Jawa
  • Python
  • Angular
  • Jawa
  • Python
  • Angular
  1. Jawa
  2. Python
  3. Angular
  1. Jawa
  2. Python
  3. Angular
  1. Jawa
  2. Python
  3. Angular

Keluaran

Output - Daftar CSS - Edureka

Pindah dengan artikel ini tentang Daftar CSS

Properti list-style-position

Marker Values ​​For In list-style-position property

Dalam properti posisi gaya daftar, ini menunjukkan bahwa penanda harus muncul di dalam atau di luar kotak yang berisi poin-poin. Ini dapat memiliki salah satu dari dua nilai:

Nilai Deskripsi
Tidak ada NA
Dalam Dalam kasus ini jika teks berada di baris kedua maka teks akan membungkus di bawah marker. Ini juga akan menunjukkan di mana teks akan dimulai jika daftar memiliki lembah di luar.
di luar Dalam kasus ini, jika teks masuk ke baris kedua, teks akan sejajar dengan awal baris pertama.

Contoh:

 
  • Matematika
  • Ilmu kemasyarakatan
  • Fisika
  • Matematika
  • Ilmu kemasyarakatan
  • Fisika
  1. Matematika
  2. Ilmu kemasyarakatan
  3. Fisika
  1. Matematika
  2. Ilmu kemasyarakatan
  3. Fisika

Keluaran

Ini membawa kita ke bagian akhir artikel ini tentang Daftar CSS.

Lihat kami yang dilengkapi dengan pelatihan langsung yang dipimpin instruktur dan pengalaman proyek kehidupan nyata. Pelatihan ini membuat Anda mahir dalam keterampilan untuk bekerja dengan teknologi web back-end dan front-end. Ini mencakup pelatihan tentang Pengembangan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.

Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar artikel dan kami akan menghubungi Anda kembali.