CSS Listeleri
Sırasız Listeler:
- Kahve
- Çay
- kola
- Kahve
- Çay
- kola
Sıralı Listeler:
- Kahve
- Çay
- kola
- Kahve
- Çay
- kola
HTML Listeleri ve CSS Liste Özellikleri
HTML'de iki ana liste türü vardır:
- sırasız listeler (<ul>) - liste öğeleri madde işaretleri ile işaretlenmiştir
- sıralı listeler (<ol>) - liste öğeleri sayılar veya harflerle işaretlenmiştir
CSS listesi özellikleri şunları yapmanızı sağlar:
- Sıralı listeler için farklı liste öğesi işaretçileri ayarlayın
- Sırasız listeler için farklı liste öğesi işaretçileri ayarlayın
- Liste öğesi işaretçisi olarak bir resim ayarlayın
- Listelere ve liste öğelerine arka plan renkleri ekleyin
Farklı Liste Öğesi İşaretçileri
Özellik list-style-type, liste öğesi işaretçisinin türünü belirtir.
Aşağıdaki örnek, mevcut liste öğesi işaretlerinden bazılarını gösterir:
Örnek
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
Not: Değerlerin bazıları sırasız listeler, bazıları ise sıralı listeler içindir.
Liste Öğesi İşaretleyicisi Olarak Bir Görüntü
Özellik list-style-image, bir resmi liste öğesi işaretçisi olarak belirtir:
Örnek
ul
{
list-style-image: url('sqpurple.gif');
}
Liste Öğesi İşaretçilerini Konumlandırın
Özellik list-style-position, liste öğesi işaretçilerinin (madde işaretleri) konumunu belirtir.
"list-stil-konumu: dış;" madde işaretlerinin liste öğesinin dışında olacağı anlamına gelir. Liste öğesinin her satırının başlangıcı dikey olarak hizalanır. Bu varsayılandır:
- Kahve - Kavrulmuş kahve çekirdeklerinden hazırlanan demlenmiş bir içecek...
- Çay
- kola
"list-style-position: içeride;" madde işaretlerinin liste öğesinin içinde olacağı anlamına gelir. Liste öğesinin bir parçası olduğu için, metnin bir parçası olacak ve başlangıçtaki metni itin:
- Kahve - Kavrulmuş kahve çekirdeklerinden hazırlanan demlenmiş bir içecek...
- Çay
- kola
Örnek
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Varsayılan Ayarları Kaldır
Özellik list-style-type:none, işaretleri/madde işaretlerini kaldırmak için de kullanılabilir. Listenin ayrıca varsayılan kenar boşluğuna ve dolguya sahip olduğunu unutmayın. Bunu kaldırmak için <ul> veya <ol>'a margin:0ve ekleyin:padding:0
Örnek
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Liste - Steno özelliği
Özellik list-style, kestirme bir özelliktir. Tüm liste özelliklerini tek bir bildirimde ayarlamak için kullanılır:
Örnek
ul
{
list-style: square inside url("sqpurple.gif");
}
Steno özelliğini kullanırken, özellik değerlerinin sırası şöyledir:
list-style-type(bir liste stili görüntü belirtilmişse, görüntü herhangi bir nedenle görüntülenemiyorsa bu özelliğin değeri görüntülenecektir)list-style-position(liste öğesi işaretçilerinin içerik akışının içinde mi yoksa dışında mı görüneceğini belirtir)list-style-image(bir resmi liste öğesi işaretçisi olarak belirtir)
Yukarıdaki özellik değerlerinden biri eksikse, varsa eksik özelliğin varsayılan değeri eklenir.
Renklerle Stil Listesi
Listeleri biraz daha ilginç hale getirmek için renklerle de biçimlendirebiliriz.
<ol> veya <ul> etiketine eklenen her şey tüm listeyi etkilerken <li> etiketine eklenen özellikler tek tek liste öğelerini etkiler:
Örnek
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background:
#ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background:
#cce5ff;
margin: 5px;
}
Sonuç:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
Daha fazla örnek
Bu örnek, kırmızı sol kenarlıklı bir listenin nasıl oluşturulacağını gösterir.
Bu örnek, madde işaretleri olmadan kenarlıklı bir listenin nasıl oluşturulacağını gösterir.
Bu örnek, CSS'deki tüm farklı liste öğesi işaretçilerini gösterir.
Tüm CSS Listesi Özellikleri
| Property | Description |
|---|---|
| list-style | Sets all the properties for a list in one declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies the position of the list-item markers (bullet points) |
| list-style-type | Specifies the type of list-item marker |