- Kahve
- Çay
- Coca Cola
- Kahve
- Çay
- Coca Cola
HTML Listeleri ve CSS Liste Özellikleri
HTML'de, listelerin iki ana tipi vardır:
- sırasız listeler (<ul>) - liste öğeleri mermilerle işaretlenmişlerdir
- sipariş listeleri (<ol>) - liste öğeleri sayı veya harf ile işaretlenmişlerdir
CSS liste özelliklerini size olanak tanır:
- sıralı listeler için ayarlama farklı liste öğesi belirteçleri
- sırasız listeler için ayarlama farklı liste öğesi belirteçleri
- Liste öğesi işaretleyici olarak bir resim ayarlayın
- listeleri ve liste öğelerine arka plan renklerini ekle
Farklı Liste Öğesi İşaretleyiciler
list-style-type özelliği liste öğesi işaretleyici türünü belirtir.
Aşağıdaki örnek mevcut liste öğesi belirteçlerin bazıları gösterilmektedir:
Ö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;
} Kendin dene " Not: değerlerin bazıları sırasız listeler için, bazıları sıralı listeler için.
Liste Öğesi Marker gibi bir görüntü
list-style-image özelliği liste öğesi işaretleyici olarak bir görüntüyü belirtir:
Liste Öğesi İşaretleyiciler yerleştirin
list-style-position özelliği liste maddelik belirteçleri içinde veya içerik akışı dışında görünmelidir belirtir:
Listesi - Steno mülkiyet
list-style özelliği kullanılan bir kestirme niteliktir. Biri bildiriminde tüm liste özelliklerini ayarlamak için kullanılır:
stenografi özelliğini kullanırken, mülkiyet değerlerinin sırası şunlardır:
-
list-style-type(Liste-tarzı-görüntü belirtilmediyse, bu özelliğin değeri nedense görüntü görüntülenemiyor ise görüntülenecektir) -
list-style-position(specifies whether the list-item markers should appear inside or outside the content flow) -
list-style-image(liste öğesi işaretleyici olarak bir görüntüyü belirtir)
Varsa eksik yukarıdaki özellik değerlerden biri varsa, eksik özellik için varsayılan değer, eklenecektir.
Renkler ile Şekillendirme Listesi
Ayrıca renklerle tarzı listeleri, onları biraz daha ilginç görünmesi için olabilir.
Eklenen şey <ol> veya <ul> özellikler eklendi ederken etiketi, listenin tamamını etkiler <li> etiketi bireysel liste öğeleri etkileyecektir:
Ö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
Diğer Örnekler
Tam genişlikli sınırlanmıştır listesi
Bu örnek mermiler olmadan sınırlanmıştır liste oluşturmak için nasıl kullanılacağını gösterir.
Listeler için tüm farklı liste maddelik belirteçleri
Bu örnek CSS tüm farklı liste maddelik işaretlerini göstermektedir.
Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 »
Tüm CSS Liste Özellikleri
| özellik | Açıklama |
|---|---|
| list-style | tek bildiriminde listesi için tüm özelliklerini belirler |
| list-style-image | Liste maddelik işaretleyici olarak bir görüntüyü belirtir |
| list-style-position | Liste maddelik belirteçleri içinde veya içerik akışı dışında görünmelidir belirtir eğer |
| list-style-type | Liste maddelik işaretleyici türünü belirtir |