Liste stili - CSS Hileleri

Anonim

list-styleTesiste stenografi özelliği olduğunu bir beyanında üç farklı liste ile ilgili özellikler için takımlar değerler:

ul ( list-style: || || ; )

İşte sözdizimine bir örnek:

ul ( list-style: square outside none; )

Hangisi, aşağıdaki uzun el versiyonu ile aynı olacaktır:

ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )

Stenoda, herhangi bir değer atlanırsa, başlangıç ​​durumlarına geri döneceklerdir.

İçin değerler list-style-type

list-style-typeMülkiyet listesinde, her işaretleyici veya merminin içeriğini ayarlayarak listesinin türünü tanımlar. Aşağıdakiler için kabul edilebilir anahtar kelime değerleri list-style-type:

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • armenian
  • georgian
  • lower-alpha
  • upper-alpha
  • none

MDN'nin daha eksiksiz bir listesi var. Anahtar kelime olmayan değerler CSS3'te tanıtıldı ve aşağıdaki gibi bazı destek görmeye başladı:

ul ( list-style-type: "→"; )

Aşağıdaki demo, her bir anahtar kelime değerini göstermek için bir grup sırasız liste içerir:

list-style-typeMülkiyet tüm listelere ve ayarlandığında herhangi elemanı için de geçerlidir display: list-item.

Liste işaretçisinin rengi, öğenin hesaplanan rengi ne olursa olsun olacaktır ( colorözellik aracılığıyla ayarlanır ).

İçin değerler list-style-position

list-style-positionÖzelliği tanımlar burada liste işaretleyici konumlandırmak için ve bu iki değerden birini kabul eder: insideveya dışında. Bunlar padding, listelerden kaldırılmış ve sol kırmızı kenarlık eklenmiş olarak aşağıda gösterilmiştir :

İçin değerler list-style-image

list-style-imageÖzellik listesi işaretleyici bir görüntü ile ayarlanmış olup olmadığını belirler ve “hiçbiri” veya resme puan o bir URL değerini kabul eder:

ul ( list-style-image: url(images/bullet.png.webp); )

Diğer Demolar

Tarayıcı Desteği

Krom Safari Firefox Opera IE Android iOS
İşler İşler İşler İşler İşler İşler İşler

IE6 / 7, için tüm anahtar kelime değerlerini desteklemez list-style-typeve ayrıca kayan liste öğelerinin liste işaretçilerini göstermemesine neden olan bir hata içerir. Bu, list-style-imageliste öğelerinde bir arka plan görüntüsü (yerine ) kullanılarak çözülür .