CSS Liste
- Önceki Sayfa CSS Bağlantı
- Sonraki Sayfa CSS Tablo
Unordered list:
- Kahve
- Çay
- Coca Cola
- Kahve
- Çay
- Coca Cola
Ordered list:
- Kahve
- Çay
- Coca Cola
- Kahve
- Çay
- Coca Cola
HTML list and CSS list properties
In HTML, there are mainly two types of lists:
- Unordered list (<ul>) - list items are marked with bullet markers
- Ordered list (<ol>) - list items are marked with numbers or letters
CSS list properties allow you to:
- Set different list item markers for ordered lists
- Set different list item markers for unordered lists
- Set image as list item marker
- Add background color to the list and list items
Different list item markers
list-style-type Property specifies the type of list item marker.
The following example shows some available list item markers:
Ö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;
}
Note:Some values are used for unordered lists, while some values are used for ordered lists.
Image as list item marker
list-style-image Property specifies the image as the list item marker:
Örnek
ul {
list-style-image: url('sqpurple.gif');
}
Positioning list item marker
list-style-position Property specifies the position of the list item marker (bullet).
"list-style-position: outside;" list item point will be outside the list item. The beginning of each line of the list item will be vertically aligned. This is the default:
- Kahve - Pişirilmiş kahve fasulyelerinden yapılmış demlenmiş içecek
- Çay
- Coca-cola
"list-style-position: inside;" Bu,项目符号将在列表项内表示。Çünkü o, liste öğesi parçasıdır, bu yüzden metnin bir parçası olarak olur ve metni başında açar:
- Kahve - Pişirilmiş kahve fasulyelerinden yapılmış demlenmiş içecek
- Çay
- Coca-cola
Örnek
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Varsayılan ayarları silme
list-style-type:none Bu özellikler, etiketleri veya işaretleri silebilir. Lütfen dikkat edin, listeler, varsayılan的外边距和内边距。Bu içeriği silmek için <ul> veya <ol> ekle: margin:0 ve padding:0 :
Örnek
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Liste - Kısaltma Özelliği
list-style Bu özellik, bir ifade içinde tüm liste özelliklerini ayarlamak için kullanılan kısaltma özelliğidir:
Örnek
ul {
list-style: square inside url("sqpurple.gif");
}
Kısaltma özelliklerini kullanırken, öznitelik değerlerinin sırası şu şekildedir:
list-style-type(List-style-image belirtilmişse ve resim görüntülenemiyorsa, bu öznitelik değerini görüntüler)list-style-position(Liste öğesi işaretinin içeride mi yoksa içeride mi görüneceğini belirtme)list-style-image(Liste öğesi işaretini resim olarak belirtme)
Yukarıdaki özelliklerden biri eksikse, eksik olan özelliğin varsayılan değerini (varsa) ekler:
Liste renk stilleri ayarlanması
Ayrıca, listelerin stilini renk ayarları ile daha ilginç hale getirebiliriz.
Herhangi bir <ol> veya <ul> etiketine eklenen herhangi bir stil, tüm listeyi etkiler, <li> etiketine eklenen özellikler ise her bir liste öğesini 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ç:
- Kahve
- Çay
- Coca Cola
- Kahve
- Çay
- Coca Cola
Daha fazla örnek
- Kırmızı sol çerçeve ile özelleştirilmiş liste
- Bu örnek, kırmızı sol çerçeve ile listeler nasıl oluşturulduğunu gösterir.
- Tam ekran genişliğinde çerçeve listesi
- Bu örnek,项目符号没有的带边框列表的创建方法进行演示。
- Tüm liste的不同列表项标记
- Bu örnek, CSS'teki tüm farklı liste elemanı işaretlerini gösterir.
Tüm CSS liste özellikleri
| Özellik | Açıklama |
|---|---|
| list-style | Kısa özellik. Tüm listelerin özelliklerini bir açıklamada ayarlar. |
| list-style-image | Liste elemanı işaretini belirlemek için bir görsel belirtir. |
| list-style-position | Liste elemanı işaretinin (puantı) konumunu belirtir. |
| list-style-type | Liste elemanı işaret türünü belirler. |
- Önceki Sayfa CSS Bağlantı
- Sonraki Sayfa CSS Tablo
