CSS ile “liste” Stilleme

HTML’de sırasız listeler (<ul>) ve sıralı listeler (<ol>) olmak üzere iki tür liste bulunur. CSS ile bu listelerin ve içerisindeki öğelerin görsel özelliklerini kolayca değiştirebiliriz.

HTML’de “ul”, “unordered list” kelime grubunun kısaltması olup, Türkçede “sırasız liste” anlamına gelir. Bu listelerde yer alan öğeler önlerinde genellikle nokta işareti bulunur. Buna karşılık “ol” ise “ordered list” kelime grubunun kısaltmasıdır ve “sıralı liste” olarak adlandırılır. Bu listelerdeki öğeler genellikle sıralı bir numaralandırma yapar.

Her iki liste türü de <li> (list item) etiketi kullanılarak öğelerini tanımlar. Yani, listeye eklemek istediğiniz her öğe için bir <li> etiketi kullanmanız gerekmektedir. Örneğin:

/* ul */
<ul>
    <li>Elma</li>
    <li>Muz</li>
    <li>Çilek</li>
</ul>


/* ol */
<ol>
    <li>Elma</li>
    <li>Muz</li>
    <li>Çilek</li>
</ol>

İşte CSS ile biz listeler üzerinde çeşitli stilistik değerler yapabiliriz:

1. list-style-type: Bu özellik, liste öğelerinin önündeki işareti belirler. Örnek değerler:
   • none: İşareti kaldırır.
   • disc: Varsayılan, dolu daire işareti.
   • circle: Boş daire işareti.
   • square: Kare işareti.
   • decimal: Sayı ile.
   • lower-alpha: Küçük harfle.
   • upper-alpha: Büyük harfle.
2. list-style-position: Liste işaretçisinin metin içerisindeki pozisyonunu belirler.
   • inside: İşaretçiyi metnin içine alır.
   • outside: İşaretçiyi metnin dışına alır.
3. list-style-image: Resim kullanarak bir işaretçi belirler.
   • url('path/to/image.png'): Belirtilen yoldaki resmi işaretçi olarak kullanır.
4. padding & margin: Liste ve liste öğelerinin dış ve iç boşluklarını ayarlar.
5. color: Liste öğelerinin metin rengini belirler.
6. background-color: Liste öğelerinin arkaplan rengini belirler.
7. font-family, font-size, font-weight: Metin tipi, boyutu ve kalınlığı üzerinde değişiklik yapar.
8. border: Liste öğelerine kenarlık ekler.

Bu özellikleri kullanarak, listelerimizi özelleştirebilir ve web sayfamızın genel tasarımıyla uyumlu hale getirebiliriz. Örneğin:

See the Pen CSS liste by 1kodum (@1kodum) on CodePen.