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:

  1. Elma
  2. Portakal
  3. Kiraz

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:

  • Muz
  • Portakal
  • Kiraz

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 liste

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);}

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

5207

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.