CSS Listeler

CSS liste özellikleri, liste elemanı işaretlerini yerleştirmenizi, değiştirmenizi veya resimleri liste elemanı işaretleri olarak kullanmanızı sağlar.

CSS Listeler

Bir şekilde, tanımlayıcı olmayan her içerik listesi olarak görülebilir. Nüfus sayımı, güneş sistemi, aile ağacı, ziyaret menüsü, hatta tüm arkadaşlarınız listesi veya listelerin listesi olarak temsil edilebilir.

Listeler bu kadar çeşitli olduğundan, bu liste oldukça önemlidir ve bu nedenle, CSS'te liste stilleri nispeten zengin olmamak gerçekten büyük bir eksiklik.

Liste Türleri

Listenin tarzını etkilemek için en basit (en tam olarak desteklenen) yöntem, işaret türünü değiştirmektir.

Örneğin, bir sırasız listede, liste elemanı işareti (marker) her liste elemanının yanında bulunan noktadır. Sıralı listede, işaretler harf, rakam veya başka bir sayılandırma sistemindeki bir sembol olabilir.

Liste elemanı işaret türünü değiştirmek için özelliği kullanabilirsiniz list-style-type:

ul {list-style-type : square}

Yukarıdaki açıklama, sırasız listedeki liste elemanı işaretini kare olarak ayarlar.

Liste Elemanı Resmi

Bazen, standart işaretler yeterli değildir. İşaretlere bir resim kullanmak isteyebilirsiniz, bu list-style-image Özelliği yapar:

ul li {list-style-image : url(xxx.gif)}

Sadece bir url() değeri kullanarak, resimleri işaret olarak kullanabilirsiniz.

Liste İşareti Konumu

CSS2.1, işaretlerin liste elemanı içi veya dışında出现是可以确定的。这是通过 list-style-position Tamamlandı.

Kısaltılmış Liste Tarzı

Basitlik için, yukarıdaki 3 liste tarzı özelliğini daha uygun bir özelliğe birleştirebilirsiniz:list-styleYukarıdaki gibi:

li {list-style : url(example.gif) square inside}

list-style değerleri herhangi bir sırayla sıralanabilir ve bu değerler göz ardı edilebilir. Bir değer sağlandığında, diğerleri varsayılan değerleri dolduracaktır.

CSS Listesi Örneği:

Sırasız listelerdeki farklı türdeki liste işaretleri
Bu örnek, CSS'te farklı türdeki liste öğesi işaretlerini gösterir.
Sıralı listelerde farklı türdeki liste elemanları işaretleri
Bu örnek, CSS'te farklı türdeki liste öğesi işaretlerini gösterir.
Tüm liste tarzı türleri
Bu örnek, CSS'te farklı türdeki liste öğesi işaretlerini gösterir.
Görseli liste öğesi işareti olarak kullanma
Bu örnek, nasıl görseli liste öğesi işareti olarak kullanılacağını gösterir.
Liste işaretlerini yerleştirme
Bu örnek, liste işaretlerinin nerede yerleştirileceğini gösterir.
Tüm liste özelliklerini bir ifadede tanımlar
Bu örnek, tüm liste özelliklerini bir kısa özellikte ayarlamayı gösterir.

CSS Listesi Özellikleri(list)

Özellik Açıklama
list-style Kısa Özellik. Tüm liste özelliklerini bir ifadede ayarlamak için kullanılır.
list-style-image Görseli liste öğesi işareti olarak ayarlar.
list-style-position Listede liste öğesi işaretinin konumunu ayarlar.
list-style-type Liste öğesi işaretinin türünü ayarlar.
marker-offset