Jenis - Jenis List Style di CSS

Jenis - jenis list style


List dalam css dibagi menjadi dua jenis. Pertama list tidak berurutan dan yang kedua list berurutan. Keduanya sama-sama memilki fungsi agar list data yang ditampilkan dalam html terlihat lebih rapi. Kemudian untuk penerapannya terdapat pula 3 jenis properti list style yang dapat sobat Artikel Multimedia gunakan sesuai kebutuhan, yaitu:

  1. List-style-type: untuk menentukan jenis penanda item list
  2. List-style-image: untuk menentukan gambar sebagai penanda item list
  3. List-style-position: untuk menentukan posisi penanda item list

Berikut contoh penulisan kode css-nya. 

<!DOCTYPE html>
<html>
 
<head>
    <title>List Style</title>
    <style>
        ul.a {
            list-style-type: circle;
        }
 
        ul.b {
            list-style-type: disc;
        }
 
        ul.c {
            list-style-type: square;
        }
 
        ol.d {
            list-style-type: upper-roman;
        }
 
        ol.e {
            list-style-type: lower-roman;
        }
 
        ol.f {
            list-style-type: decimal;
        }
 
        ol.g {
            list-style-type: lower-alpha;
        }
    </style>
</head>
 
<body>
    <h2>Contoh properti list-style-type</h2>
    <p>Contoh tipe list style yang tidak berurutan:</p>
    <ul class="a">
        <li>Bakso</li>
        <li>Mie Ayam</li>
        <li>Nasi Goreng</li>
        <li>Soto</li>
    </ul>
    <ul class="b">
        <li>Bakso</li>
        <li>Mie Ayam</li>
        <li>Nasi Goreng</li>
        <li>Soto</li>
    </ul>
    <ul class="c">
        <li>Bakso</li>
        <li>Mie Ayam</li>
        <li>Nasi Goreng</li>
        <li>Soto</li>
    </ul>
    <p>Contoh tipe list style yang berurutan:</p>
    <ol class="d">
        <li>Es Teh Manis</li>
        <li>Jus Alpukat</li>
        <li>Es Jeruk</li>
        <li>Es Kosong</li>
    </ol>
    <ol class="e">
        <li>Es Teh Manis</li>
        <li>Jus Alpukat</li>
        <li>Es Jeruk</li>
        <li>Es Kosong</li>
    </ol>
    <ol class="f">
        <li>Es Teh Manis</li>
        <li>Jus Alpukat</li>
        <li>Es Jeruk</li>
        <li>Es Kosong</li>
    </ol>
    <ol class="g">
        <li>Es Teh Manis</li>
        <li>Jus Alpukat</li>
        <li>Es Jeruk</li>
        <li>Es Kosong</li>
    </ol>
 
    <h2>Contoh properti list-sytle-image</h2>
    <ul style="list-style-image: url(images/bintang.png)">
        <li>Es Teh Manis</li>
        <li>Jus Alpukat</li>
        <li>Es Jeruk</li>
        <li>Es Kosong</li>
    </ul>
 
    <h2>Contoh properti list-style-position</h2>
    <ul style="list-style-position: outside">
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo
            consequat. </li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo
            consequat. </li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo
            consequat. </li>
    </ul>
    <ul style="list-style-position: inside">
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo
            consequat. </li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo
            consequat. </li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo
            consequat. </li>
    </ul>
</body>
 
</html>


Maka tampilan yang dihasilkan akan seperti gambar di bawah ini.

 

list style type

list style image and position

Sekian dulu pembahasan tentang jenis-jenis list style, jika sobat tertarik dengan pembahasan artikel multimedia lainnya silakan kunjungi postingan kami di blog ini. Terima kasih …

Tags:

Posting Komentar

0 Komentar

Terima kasih telah mengunjungi website ini semoga bermanfaat untuk anda