CSS Dersleri Bölüm 7 – Listeleri Stillendirme

CSS Dersleri Bölüm 7 – Listeleri Stillendirme

Css’in liste özelliği size şunları verir:

• Sıralı liste elemanları için farklı işaretler,
• Sırasız liste elemanları için farklı işaretler,
• liste elemanı işareti için resim atama

List

HTML’de iki tip listeleme vardır:

• sırasız listeler- dairelerle işaretlenmişlerdir tıpkı soldakiler gibi
• sıralı listeler – sayılar ile işaretlenmişlerdir.

CSS’le, listeler de şekillendirilebilir ve resimler de liste işaretçilerinin yerine kullanılabilir.

Farklı liste elemanı işaretçileri

list-style-type özelliği ile işaretçinin tanımlanması:

Ö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;}
 Kendiniz deneyin! »

Bir kısmı sırasız liste için bir kısmı sıralı liste için.

Liste elemanı işareti olarak resimler

Bunun için list-style-image özelliği kullanılır:

Örnek

ul
 {
 list-style-image: url('sqpurple.gif');
 }
 Kendiniz deneyin »

Yukarıdaki örnek tüm tarayıcılarda düzgün gözükmemekte. IE ve Opera; Firefox, Chrome ve Safari’dekilerden biraz daha büyük gösterecektir resmi.

Tüm tarayıcılarda düzgün gözükmesini istiyorsanız aşağıdaki çözümü uygulamanız gerekmekte.

Crossbrowser(tarayıcılar arası) Çözümü

Tüm tarayıcılarda resimli işaret düzgünce gözükecektir:

Örnek

ul
 {
 list-style-type: none;
 padding: 0px;
 margin: 0px;
 }
 li
 {
 background-image: url(sqpurple.gif);
 background-repeat: no-repeat;
 background-position: 0px 5px;
 padding-left: 14px;
 }
 Kendiniz deneyin »

Örneğin açıklaması:

•  ul ‘un:
  • list-style-type ‘ı none olarak yazmak liste elemanı işaretini kaldıracaktır
  • padding ve margin ‘i 0px yapmak (cross-browser(tarayıcılar arası) uyumluluk)
•  li’nin:
  • URL’yi belirtin yani resime ait olan,  tekrar ettirmeyin (no-repeat)
  • Resmin konumunu ayarlayın nerede olmasını istiyorsanız (sol 0px ve aşağı 5px)
  • padding-left ile yazının konumunu belirleyin

List – Kısayazım özelliği

Tüm liste özelliklerini tek bir satırda tanımlamak mümkün. Buna kısayazım özelliği denir.

list-style özelliğinde kısayazım özelliği kullanılabilir:

Örnek

ul
 {
 list-style: square url("sqpurple.gif");
 }
 Kendiniz deneyin »

Kısa yazım özelliği kullanılırken list-style’da, sıralama değerleri aşağıdaki gibidir:

• list-style-type
• list-style-position (tanımlamak için aşağıdaki tabloya bakmanız yeterli)
• list-style-image

Yukarıdaki değerlerden birisinin olmaması önemli değil yukarıdaki sıraya bağlı kalındığı müddetçe.

Daha fazla örnek

Listeler için tüm liste elemanı işaretleri
Bu uygulama CSS’teki diğer tüm liste elemanı işaretlerini göstermekte

CSS Liste Özelliklerinin Tümü