Listeleme Ozellikleri
Listeleme ÖzellikleriListeleme Özellikleri
Listelerin genel görsel biçimini ayarlamamızı sağlar.. Sırayla listeleme özelliklerini inceleyelim;
Liste imleyici tipi (list-style-type)
Bu özellikle list-item işaretimizin tipini belirliyoruz.. Alabileceği değerler;
* disc - içi dolu daire
* circle - içi boş daire
* square - kare
Numaralandırma;
* decimal - 10'luk tabandaki sayılar 1'den başlarak sıralanır
* lower-roman - Küçük harflerle roman rakamı
* upper-roman - Büyük harflerle roman rakamı
* lower-alpha - Küçük harflerle harfler
* upper-alpha - Büyük harflerle harfler
Örnek kullanımları aşağıdaki gibidir..
ul {list-style-type: dics}
ul {list-style-type: circle}
ul {list-style-type: square}
ul {list-style-type: decimal}
ul {list-style-type: lower-roman}
ul {list-style-type: upper-roman}
ul {list-style-type: lower-alpha}
ul {list-style-type: upper-alpha}
ul {list-style-type: circle}
ul {list-style-type: square}
ul {list-style-type: decimal}
ul {list-style-type: lower-roman}
ul {list-style-type: upper-roman}
ul {list-style-type: lower-alpha}
ul {list-style-type: upper-alpha}
Liste imleyici resmi (list-style-image)
Bu özelliği list-style işaretinin yerine resim koymak için kullanırız.. Örnek kullanım aşağıdaki gibidir..
ul {list-style-image: url(icon.png)}
Liste imleyici konumu (list-style-position)
Bu özellik ile list-item işaretlerini metnin içinden mi veya sol dışındanmı olacağını belirleriz.. Alabileceği değerler 2 tanedir..
* inside - metnin içinden
* outside - metnin dışından
Örnek kulalnımı aşağıdaki gibidir..
ul {list-style-position: inside}
ul {list-style-position: outside}
ul {list-style-position: outside}
Liste biçimi (list-style)
Yukarıdaki 3 özelliği kısa yol olarak kullanmak istersek aşağıdaki sıralamaya göre kullanabiliriz..
list-style-type > list-style-position > list-style-image
Örnek kullanımı aşağıdaki gibidir..
ul {list-style: disc inside url(icon.png)}