Bagaimana Menata Daftar dengan CSS

Rekap Daftar HTML

Ada dua jenis daftar utama di HTML - Berurutan dan Tidak Berurutan .

Dalam daftar Berurutan (

    ), urutan item daftar itu penting. Item dapat muncul berdasarkan nomor, angka romawi, angka alfa, atau jenis penanda lainnya. Penanda default untuk daftar terurut adalah angka (atau decimal):

    Dalam daftar tidak berurutan (

      ), urutan item daftar tidak menjadi masalah. Item muncul dalam format poin. Penanda default untuk daftar tak berurutan adalah poin berbutir bulat atau disc.

      Setiap item daftar dalam daftar dipesan atau tidak diurutkan dibuat dengan tag.

      Gaya Khusus Daftar

      Ada tiga sifat umum khusus untuk daftar styling: list-style-type, list-style-position, dan list-style-image. Ada juga properti singkatan yang mencakup ketiganya.

      list-style-type

      Penanda (atau poin peluru) yang muncul dalam daftar berurutan dan tidak berurutan dapat diberi gaya dengan berbagai cara. Properti CSS untuk menata tipe penanda adalah list-style-type. Nilai default list-style-typeuntuk daftar terurut adalah decimal, sedangkan nilai default untuk daftar tak berurutan adalah disc.

      Contoh daftar pesanan:

      /* css */ ol { list-style-type: upper-roman; }

      Contoh daftar tidak berurutan:

      /* css */ ul { list-style-type: square; }

      Tidak ada contoh penanda:

      /* css */ ul { list-style-type: none; }

      Nilai yang diterima untuk list-style-typeproperti ini meliputi:

      Tidak dipesan:

      • disk ( default )
      • lingkaran
      • kotak

      Dipesan:

      • desimal ( default )
      • desimal-nol di depan
      • romawi kecil
      • Romawi atas
      • Yunani rendah
      • huruf latin kecil
      • latin-atas
      • armenian
      • georgian
      • alfa-rendah
      • alpha atas

      Lain:

      • tidak ada

      Catatan: semua nilai properti yang tercantum di atas dapat digunakan untuk memberi gaya pada daftar terurut dan tidak berurutan (misal: daftar terurut dengan squarepenanda daftar).

      list-style-position

      list-style-positionmengontrol apakah penanda daftar muncul di dalam atau di luar setiap elemen item daftar ( ). Properti menerima dua nilai, outside(default) atau inside.

      Posisikan penanda outsideelemen item daftar, dan semua baris teks dan sub-baris dari setiap item daftar akan disejajarkan secara vertikal:

      /* css */ ul { list-style-position: outside; /* default */ }

      Posisikan penanda inside, dan baris teks pertama dari setiap item daftar akan diberi indentasi untuk memberi ruang bagi penanda. Sub-baris apa pun dari item daftar yang sama akan disejajarkan dengan penanda, bukan baris teks pertama:

      /* css */ ul { list-style-position: inside; }

      list-style-image

      The list-style-imageproperti menerima sebuah url gambar di tempat daftar penanda. Nilai default untuk properti ini adalah none.

      /* css */ ul { list-style-image: url(//url-to-image); }

      list-style Shorthand

      list-style is a shorthand property for the three style properties listed above. The order of values list-style accepts is list-style-type, list-style-position, and list-style-image. If any value is omitted, the default value for that property will be used.

      Example:

      /* css */ ul { list-style: circle inside none; }

      More List-Specific Styling

      Ordered list tags also accept attributes that control the flow, count, or specific marker values of its list items. These include the start, reversed, and value attributes. See the MDN resources listed below for further details.

      General Styling

      List content can be styled just like other p or div elements. color, font-family, margin, padding, or border are just a few examples of properties that can be added to either the ul, ol, or li elements.

      Note that any styles added to the ul or ol element will affect the entire list. Styles added directly to the li elements will affect the individual list items. In the example below, the border and background-color properties are styled differently between the list and list item elements:

      /* css */ ul { list-style-type: circle; border: 2px solid blue; background-color: lightblue; } li { margin: 5px; background-color: lightyellow; }

      List Spacing

      You may notice extra spacing in front of the list items when list-style-type is set to none. Setting padding to 0 (or whatever spacing is preferred) on the list element will override this default padding.

      /* css */ ul { list-style: none; padding: 0; } li { padding: 5px 10px; background-color: #EEEEEE; border: 1px solid #DDDDDD; }

      Sources:

      The links below were referenced in compiling information found in this article. Please visit them for further details about this topic.

      More Information:

      MDN - Styling Lists

      W3Schools - CSS Lists

      CSS Tricks - list-style