CSS Listeleme Özellikleri Nelerdir ve Nasıl Uygulanırlar?
CSS listeleme özellikleri listelerin genel görsel biçimi ayarlamamızı sağlar. İlk olarak listeleme amaçlı kullanılsa da artık günümüzde menü yapımında kullanımı son derece yaygındır.
Liste İmleyici Tipi (list-style-type )
Yapısı: list-style-type: <deger>
Aldığı Değerler: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Başlangıç Değeri: disc
Uygulanabilen elemanlar: Display değeri list-item alan elemanlar
Kalıtsallık: Var
ul
{
list-style-type: circle;
}
list-style-type özelliği list-item işaretinin tipini belirler. list-style-images özelliği none değeri aldığında veya resim görüntülenemediğinde kullanılır. Şekiller disc (içi dolu daire), circle (içi bos daire) ve square (kare) değerleriyle belirtilirler. Şekillerin yorumlanışı kullanıcı arayüzüne bağlıdır.
Numaralama sistemleri söyle belirtilir:
decimal: Onluk tabandaki sayılar 1’den baslar.
decimal-leading-zero: Önlerine sıfır konmuş onluk tabandaki sayılar (01, 02, 03, …, 98, 99 gibi).
lower-roman: Küçük harflerle romen rakamları (i, ii, iii, iv, v, vs.).
upper-roman: Büyük harflerle romen rakamları (I, II, III, IV, V, vs.).
hebrew: Geleneksel _branice numaralama (Alef, Bet, … Tet Vav, Tet Zayin, … Yod Tet, Kaf …).
georgian: Geleneksel Gürcüce numaralama (an, ban, gan, …, he, tan, in, in-an, …).
armenian: Geleneksel Ermenice numaralama.
cjk-ideographic: Düz sembolik (Çince/Japonca) numaralama
hiragana: a, i, u, e, o, ka, ki, …
katakana: A, I, U, E, O, KA, KI, …
hiragana-iroha: i, ro, ha, ni, ho, he, to, …
katakana-iroha: I, RO, HA, NI, HO, HE, TO, …
Alfabetik sistemler söyle belirtilir:
lower-latin , lower-alpha: Küçük ascii harfleri (a, b, c, … z).
upper-latin , upper-alpha: Büyük ascii harfleri (A, B, C, … Z).
lower-greek: Küçük Yunan harfleri (l, m, n, …)
Internet Explorer 7 ve alt sürümlerinde armenian, decimal-leadingzero, georgian ve lower-greek değerlerini desteklemiyor. lower-latin ve upper-latin yerine lower-alpha ve upper-alpha değerlerini destekliyor.
Liste İmleyici Resmi (list-style-image)
Yapısı: list-style-image: <deger>
Aldığı Değerler: <url> | none | inherit
Başlangıç Değeri: none
Uygulanabilen elemanlar: Display değeri list-item alan elemanlar
Kalıtsallık: Var
ul
{
list-style-image: url('resim.png');
}
list-style-image özelligi list-style işaretinin yerine resim koymak için kullanılır.
Internet Explorer 7 ve alt sürümlerinde float uygulanmış liste elemanının list-style-image ile atanmış işaretleri görünmez.
Liste İmleyici Konumu (list-style-position)
Yapısı: list-style-position: <deger>
Aldığı Değerler: inside | outside | inherit
Başlangıç Değeri: outside
Uygulanabilen elemanlar: Tüm elemanlar
Kalıtsallık: Yok
ul
{
list-style-position:outside;
}
list-style-position özelliği list-item işaretlerin metnin içinden (inside) veya soldan dışında (outside) mı olacağını belirler.
Liste Biçemi (list-style)
Yapısı: list-style: <deger>
Aldığı Değerler: <list-style-type> |<list-style-position> | <url>
Başlangıç Değeri: 0
Uygulanabilen elemanlar: Display degeri list-item alan elemanlar
Kalıtsallık: Var
ul
{
list-style: circle outside;
list-style özelligi list-style-type, list-style-position ve list-style-image özelliklerinin kısa yoludur.
Yukarıdaki özellikler genel bir bilgi vermesi açısından anlatılmıştır. Günümüzde listeleme elemanları listeleme, menü veya değişik amaçlarla kullanılırken yukarıdaki imleyici özelliklerinden yararlanılmamaktadır. Genel kullanım liste imleyici özelliklerini kaldırıp onun yerine artalan resmi kullanılması seklindedir. Buradaki amaç liste özelliklerinin bize sağlayamadığı yetenekleri arkalan özelliği ile erişebilmemizdir.
CSS listeleme özellikleri konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
