Top

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ü

Özellik Tanım
list-style Tüm liste özellikleri tek bir satırda tanımlanabilir
list-style-image Bir liste elemanı işaretinin resim olması için
list-style-position İçeriğe göre liste elemanı işaretinin konumlanması içeride ya da dışarıda
list-style-type Liste elemanı işaretçisinin türünü belirler

Siz neler düşünüyorsunuz? Yazımızı beğendiyseniz aşağıdaki butonlardan tavsiye edebilirsiniz, paylaşabilirsiniz veya yorumlarınızı sunabilirsiniz. Teşekkürler okuduğunuz için!

Bir önceki yazımız olan CSS Dersleri Bölüm 6 – Bağlantı(Link) Stillendirme başlıklı makalemizde Active, css ve decoration hakkında bilgiler verilmektedir. Daha fazla yazımızı görmek için HYTürkyılmaz Dijital pazarlama ve growth hacking blogu anasayfası'yı ziyaret edebilirsiniz. Yazımızı aşağıdaki paylaşım butonlarıyla paylaşarak sevginizi yayınız! Teşekkürler!

Hasan Yasin Türkyılmaz

Sosyolog, dijital stratejist. Dijital medya, reklam ve growth hacking eğitimleri ve hizmetleri sunarım. PC, konsol fark etmez. Oyun oynamayı severim.

Tüm yazıları - Websitesi

Beni takip edin!:
TwitterFacebookLinkedInPinterestGoogle PlusDiggFlickrStumbleUponYouTubeYelpRedditDelicious