HTML CSS JAVASCRIPT ANGULAR

CSS Liste


  1. İstanbul
  2. Ankara
  3. İzmir
  • Kahve
  • Çay
  • Su

HTML ile Listeler Oluşturmak ve CSS List Özellikleri

HTML'de iki tür liste vardır:

  • Sıralı liste (<ol>) - bu liste türünde yukarıdaki ilk örnekte olduğu gibi liste elemanlarının başında numaralar vardır.
  • Sırasız liste (<ul>) -bu liste türünde yukarıdaki ilk örnekte olduğu gibi liste elemanlarının başında nokta simgesi vardır.

CSS liste özellikleri ile listeler üzerinde pek çok görsel değişiklik yapmak mümkündür:

  • Sıralı listeler için listeleme sırasında farklı simgeler kullanılabilir
  • Sırasız listeler için listeleme sırasında farklı simgeler kullanılabilir
  • Bir resim sıralanan elemanların başında listeleme simgesi olarak kullanılabilir
  • Listenin kendine ve listenen elemanlara zemin rengi uygulanabilir

CSS list-style-type Özelliği - Farklı Simgeler Kullanarak Listeleme

CSS list-style-type özelliği ile liste maddelerinin başındaki işaretçi değiştirilebilir.

Ö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 »

Liste Madde İşaretcisini Kaldırmak:

list-style-type:none özelliği liste madde işaretçisinin tamamen kaldırılmasını sağlar.

Liste sadece elinizde madde madde listelenecek veri olduğunda kullanılmaz.

Listeler çoğu zaman web sitelerinde menü oluşturmak için kullanılır. Bu durumda liste madde işaretçisini kaldırmak gerekir.


CSS list-style-image Özelliği - Liste Madde İşaretcisi Olarak Resim Kullanımı

CSS list-style-image özelliği ile liste madde işaretçisi olarak resim kullanabilirsiniz.

Örnek

ul {
    list-style-image: url('/img/kedi.png');
}

Kendin Dene »


CSS list-style-position Özelliği

CSS list-style-position özelliği liste madde işaretçisinin içeriğe göre içerde mi yoksa dışarda mı olacağını belirler.

Örnek

ul {
    list-style-position: inside;
}

Kendin Dene »


CSS list-style Özelliği - List Özelliğinin Kısa Yazımı

Yukarıdaki pek çok özellik kısaca list-style özelliği ile yazılabilir.

Örnek

ul {
    list-style: square inside url("/img/kedi.png");
}

Kendin Dene »

List özelliği kısa yazıldığında sırası ile şu özellikler yazılmalıdır:

  • list-style-type Eğer list-style-image kullanışmışsa ve bir sebepten burada belirtilen resim görüntülenmiyorsa buradaki simge gösterilir.
  • list-style-position Liste madde işaretçisinin konumunu belirler.
  • list-style-image Liste madde işaretçisi olarak buraya verilen resim görüntülenir.

Eğer bu üçlü özellikten biri eksik yazılırsa, eksik olan özelliğin varsayılan değeri kullanılır.


Listenin Renkler ile Stillendirilmesi

Liste diğer CSS özellikleri kullanılarak stillendirilebilir.

Özellikle renk verilerek çok iyi sonuçlar elde edilebilir.

<ul> ve <ol> etiketlerine verilen özellikler tüm  liste maddelerini etkilerken, <li> etiketine verilen özellikler bireysel olarak o maddeleri 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;
}

Kendin Dene »


Anlamadığınız bir konu mu var?

Konu ile ilgili sorunuzu uzmanim.net'e sorabilirsiniz: uzmanim.net'e sor!