CSS LİSTELER

HTML içerisinde iki türlü liste özelliği bulunmaktadır ; madde imlerinden oluşan sırasız liste ve rakamlar veya harflerden oluşan sıralı listeler. CSS liste özelliği, sıralı ve sırasız listlere stil vermek için list-style-type özelliğini kullanacağız. Bu özellik için aşağıdaki değerleri kullanabiliriz.

CSS SIRALI LİSTE İÇİN DEĞERLER (OL)

---

DEĞER	AÇIKLAMA
decimal	Normal Numaralandırma
decimal-leading-zero	Sayının Önüne Sıfır Koyarak Artar. (01, 02, 03, vb.)
lower-alpha	Küçük Harflerden Oluşan Alfabe (a, b, c, d, e, vb.)
lower-greek	Küçük Harflerden Oluşan Yunan Alfabesi (alpha, beta, gamma, vb.)
lower-latin	Küçük Harflerden Oluşan Latin Alfabesi (a, b, c, d, e, vb.)
lower-roman	Küçük Harflerden Oluşan Roman Alfabesi (i, ii, iii, iv, v,vb.)
upper-alpha	Büyük Harflerden Oluşan Alfabe (A, B, C, D, E, vb.)
upper-latin	Büyük Harflerden Oluşan Latin Alfabesi (A, B, C, D, E, vb.)
upper-roman	Büyük Harflerden Oluşan Roman Alfabesi (I, II, III, IV, V, vb.)

Örnek:

   
   ol {list-style-type: lower-alpha;}
  
   

ÇIKTI:

CSS SIRASIZ LİSTE İÇİN DEĞERLER (UL)

---

DEĞER	AÇIKLAMA
none	Liste ikonunu kaldırır.
disc	Madde başlarında siyah yuvarlak ikon çıkarır. Varsayılan.
circle	Madde başlarında siyah yuvarlak içi boş ikon çıkarır.
square	Madde başlarında siyah kare ikon çıkarır.

Örnek:

   
   ul {list-style-type: sguare;}
   
   

CSS LİSTELERE MADDE GÖRSELİ EKLEME

---

List-style-image özelliği : Madde imi olarak resim eklemek istendiğinde kullanılır. Aşağıdaki örnekte sırasız listenin öğelerine resim eklenmiştir

   
   ul {list-style-image: url(agac.png);
   
   

ÇIKTI:

CSS LİSTELERİN KONUMU

---

List-style-position özelliği : Bu özellik ile listelerin konumunu metin akışına göre düzenlenebilir. Inside (içeride), outside (dışarıda) ve inherit değerlerini alır. Inside değeri listelerin metin akışına göre içeride konumlanmasını sağlarken outside değeri ise dışarıda konumlanmasını sağlar. Inherit değeri ise ana öğenin özelliğini kalıtsal olarak alır.

ÖRNEK KULLANIMLARI

ul{list-style-position:inside;} 

ul{list-style-position:outside;} 

ÇIKTI:

CSS LİSTE KISA KOD KULLANIMI

---

Tüm liste özelliğini tek bir satırda belirleyebiliriz. Kısaltma özelliği kullanıldığında değerlerin sırası list-style-type ,list-style-position ve list-style-image biçimindedir. Eğer bu değerlerden biri eksik yazılırsa diğer özellikler belirtilen sırada verildiği sürece tarayıcı sorun vermez.

ul {list-style: inside url(agac.png);}

6964

Gönder