Listeler günlük yaşamın bir parçasıdır. Yapılacak iş listeleri, ne yapılacağını belirler. Gezinme rotaları, adım adım yol tarifi listeler aracılığı ile sağlanabilir. Tarifler, içerik listeleri, menüler gibi ve daha bir çok kullanım alanları vardır. Tabi ki bu popülaritesini HTML’in <li> etiketleri ile web dünyasında da bulmak mümkündür.
Bir web sitesinde bir liste kullanmak istediğimizde HTML, seçim için üç farklı tür sunar;
- Sırasız (Unordered List-ul)
- Sıralı (Ordered List-ol)
- Açıklama listeleri (Description List-dl)
Kullanılacak listenin türünü seçmek ya da bir liste kullanmak isteyip istemediğinizi seçmek, içeriğe ve içeriği görüntülemek için yapacağınız tercihlere bağlıdır.
HTML’de bulunan üç farklı türde listeyi, CSS ile stillemek için birçok yol bulunmaktadır. Örneğin, bir listede kullanılacak madde imi türünü seçebiliriz. İşaretçi, kare, yuvarlak, sayısal, alfabetik veya belki de görünmez olabilir. Ayrıca, bir listenin dikey veya yatay olarak görüntülenip görüntülenmeyeceğine karar verebiliriz. Bu seçeneklerin tümü, web sayfalarımızın şekillendirilmesinde önemli roller oynamaktadır. CSS ile listeler, sayfalarda kendilerini bambaşka görünümlerde ve oldukça fonksiyonel şekillerde sunmaktadırlar.
Şimdi CSS’i kullanarak HTML’in bu <list> öğesine neler yapabileceğimizi görelim;
Not : <ol> veya <ul> etiketine uygulanan herhangi CSS bildirimi tüm listeyi etkilerken, <li> etiketine uygulanan özellikler tek tek liste öğelerini etkiler.
list-style-type
list-style-type Özelliği liste öğesinin başında yer alan işaretçiyi (item marker) değiştirmenizi sağlar. Alabileceği CSS değerleri;
| none | Liste öğesi yok |
| disc | Dolu bir daire |
| circle | Içi boş bir daire |
| square | Dolu bir yuvarlak |
| decimal | Sayılar |
| decimal-leading-zero | İlk hanesi sıfırla başlatılan sayı |
| lower-roman | Küçük harfli romen rakamları |
| upper-roman | Büyük harfli romen rakamları |
| lower-greek | Küçük klasik Yunanca |
| lower-alpha / lower-latin | Küçük harfli ASCII karakterle |
| upper-alpha / upper-latin | Büyük harfli ASCII karakterler |
| armenian | Geleneksel Ermeni numaralandırması |
| georgian | Geleneksel Gürcüce numaralandırması |
Örnek ;
Aşağıdaki örnekte yer alan liste öğelerine değişik işaretçiler uygulanmıştır.
<!DOCTYPE html>
<html>
<head>
<style>
ul.bir {
list-style-type: circle;
}
ul.iki {
list-style-type: square;
}
ol.uc {
list-style-type: upper-roman;
}
ol.dort {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p>Sırasız Listeler</p>
<ul class="bir">
<li>Çay</li>
<li>Kahve</li>
<li>Soda</li>
</ul>
<ul class="iki">
<li>Çay</li>
<li>Kahve</li>
<li>Soda</li>
</ul>
<p>Sıralı Listeler</p>
<ol class="uc">
<li>Çay</li>
<li>Kahve</li>
<li>Soda</li>
</ol>
<ol class="dort">
<li>Çay</li>
<li>Kahve</li>
<li>Soda</li>
</ol>
</body>
</html>
list-style-type : none
list-style-type Özelliğine none değerinin verilmesi <li> öğelerinizi özelleştirmenin yolunu açar. Madde imlerini kaldırır.
Örnek ;
<!DOCTYPE html>
<html>
<head>
<style>
ul.ozel {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>Normal Liste</p>
<ul>
<li>Çay</li>
<li>Kahve</li>
<li>Soda</li>
</ul>
<p>Özel Liste</p>
<ul class="ozel">
<li>Çay</li>
<li>Kahve</li>
<li>Soda</li>
</ul>
</body>
</html>
list-style-image
list-style-image Özelliği <li> öğelerinin işaretçilerine arka plan resmi eklemeyi mümkün kılar.
Varsayılan list-style-type özellik değerlerleri sayfalarınız içinde yer alan liste öğelerinizi ifade etmede yeterince iyi olmadığını düşünebilirsiniz. Dolaysıyla liste öğe işaretçisini özelleştirmek iyi bir fikir olacaktır. Bunu yapmanın en yaygın yolu, <li> öğelerine bir arka plan resmi yerleştirmektir.
Süreç ; varsayılan “list-style-type” özellik değerlerini “none” değeri ile kaldırmayı ve <li>öğeleri için “list-style-image” özelliği ile arka plan resmi ve dolgu eklemekle gerçekleştirilir.
Örnek ;
Aşağıdaki örneğimizde her bir liste elemanımızın işaretçisi olarak 
ikonu kullanacağız.
<!DOCTYPE html>
<html>
<head>
<style>
li{
list-style-type: none;
list-style-image: url(konum.png);
padding: 10px;
}
</style>
</head>
<body>
<p>Sırasız Listeler</p>
<ul>
<li>İstanbul</li>
<li>Ankara</li>
<li>İzmir</li>
</ul>
</body>
</html>
list-style-position
list-style-position Özelliği liste öğesi işaretçilerinin içerik akışının içinde mi yoksa dışında mı görünüp görünmeyeceğini belirtir.
Örnek;
<!DOCTYPE html>
<html>
<head>
<style>
ul.bir {
list-style-position: inside;
}
ul.iki {
list-style-position: outside;
}
</style>
</head>
<body>
<p>İçerden Başlayan Liste</p>
<ul class=bir>
<li>Çay</li>
<li>Kahve</li>
<li>Soda</li>
</ul>
<p>Dışından Başlayan Liste</p>
<ul class="iki">
<li>Çay</li>
<li>Kahve</li>
<li>Soda</li>
</ul>
</body>
</html>
list-style
list-sytle Özelliği bir liste bildiriminde tüm liste özelliklerini ayarlamak için kullanılır. Bu tip kısaltma kullanırken özellik değerlerinin sırası şöyledir:
- list-style-type
- list-style-position
- list-style-image
Yukarıdaki özellik değerlerinden biri eksikse, varsa eksik özellik için varsayılan değer eklenecektir.
ul {
list-style:circle inside url(konum.png);
}Özelleştirilmiş Liste
Örnek;
Yukarıda ekran görüntüsü verilen türde bir liste için aşağıdaki CSS kodları güzel bir örnek olacaktır.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
border-left: 5px solid red;
background-color: #FFFB07;
list-style-type: none;
padding: 10px;
}
ul li{
margin : 15px;
border-bottom :2px solid green;
}
</style>
</head>
<body>
<p>Özel Görünümlü Bir Liste</p>
<ul>
<li>Çay</li>
<li>Kahve</li>
<li>Soda</li>
</ul>
</body>
</html>Örnek ;
Yukarıdaki özelleştirilmiş listenin CSS kodları nı aşağıda görebilirsiniz.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
padding: 0;
border: 1px solid #ddd;
}
ul li {
padding: 8px 16px;
border-bottom: 1px solid #ddd;
}
ul li:last-child {
border-bottom: none
}
</style>
</head>
<body>
<p>Özel Görünümlü Bir Liste</p>
<ul>
<li>Çay</li>
<li>Kahve</li>
<li>Soda</li>
</ul>
</body>
</html>
