CSS3 Ve HTML Dersleri | Liste Özellikleri

CSS Listeler

Bu konumuzda CSS ile liste stil atamalarını göreceğiz. HTML derslerimizden hatırlarsak kullandığımız 3 çeşit liste etiketi bulunuyordu.

• Sayılabilen Listeler (Ordered Lists <ol>)
• Sayılamayan Listeler (Unoredered Lists <ul>)
• Açıklama Listeleri (Description Lists <dl>)

Açıklama listelerinin çok fazla kullanılmamasına rağmen sayılabilen veya sayılamayan listeler HTML tasarımlarında çokça kullanılırlar. Sadece liste olarak düşünmeyin CSS ile bir navbar yapımında dahi unordered (sayılamayan) listeler kullanılmaktadır. Navbar yapımına ilerideki derslerde değineceğiz.

list-style-type: özelliği bize liste başındaki karakterlerin tipini belirlemekte kullanılır. Mantıken <ol> (ordered lists) etiketi seçicisinde bu özelliğin alması gereken değer bir sayıyı ve ardışık gelen farklı alfabe harflerini işaret etmelidir. Alfabelerin büyük veya küçük olmalarını başına aldığı upper (büyük) veya lower (küçük) değerleri belirlemektedir. List-style-type özelliği eğer bir <ol> etiketini seçerken kare (square), daire (circle) veye disc gibi değerler alması mantıken yanlış olacaktır fakat tarayıcınız bu listenin başındaki sayı veya ardışık harflerin yerine bu şekilleri kullanacaktır. Mantıken kullanılması gereken yer <ul> etiketleridir. Bu özelliğin alacağı none değeri liste başındaki karakterin olmamasını sağlar.

List-style-type özelliğinin alabileceği bazı değerler;

• disc
• armenian
• circle
• cjk-earthly-branch
• decimal
• decimal-leading-zero
• georgian
• hebrew
• hiragana
• katakana
• lower-alpha
• upper-alpha
• lower-greek
• square
• none

List-style-type özelliğinin yaptığı işleme benzer bir işlemi de CSS’de içerik ekleme metodu ile gerçekleştirebiliriz. Bunu yapmak için pseudo elementlerini kullanmak gerekir. Pseudo element ve sınıflarını ayrı bir ders konusunda inceleyeceğiz.

ul li::before{ content: "+"; }

Yukarıdaki örnekte <ul> altında bulunan <li> etiketinin öncesini seç anlamına gelen li::before pseudo elementi kullanılmıştır. Buradaki uygulanacak stil özellikleri <li> etiketinin hemen önüne gelecektir. Deklarasyon içinde content özelliğine “+” string bir değer verilmiştir.  <ul> etiketi altındaki her bir <li> etiketinin önüne artı işareti (+) konulacaktır.

List-style-type özelliği ile sayılabilir listelerde kullanılmak üzere belirlediğimiz madde imlerini (rakam, küçük harf, büyük harf, roma rakamları gibi) istediğimiz sayıdan başlatmak için HTML dosyasındaki <ol> etiketi içerisine start özelliği eklememiz ile gerçekleşecektir. Eğer madde imlerin diziliş şeklini büyükten küçüğe sıralayabilmek için yine <ol> etiketine ayrı bir değer olarak reversed eklenmelidir. Unutulmamalıdır ki sıralı listelerde madde imi olarak küçük, büyük harfler veya büyük küçük roma rakamları kullanılıyorsa start değerine verilmiş olan değer, alfabede kaçıncı harfe işaret ediyorsa o harften başlayacak anlamına gelir.

<ol start="11" reversed=""> <li>Motorsiklet</li> <li>Traktör</li> <li>Araba</li> <li>Kamyonet</li>

Örnekte start özelliği için verilen 11 değeri alfabedeki “K” harfine işaret etmekte ve madde imi K harfinden başlamaktadır. Eğer reversed özelliği eklenmemiş olsaydı madde imleri L,M,N…. şeklinde gidecekken eklenmesi sebebiyle J,I,H,G,F şeklinde geriye veya başka bir tabirle alfabenin başına doğru devam etmektedir.

list-style-image: özelliği, listelerin başındaki karakterlere istediğimiz uygun resimleri vermemizi sağlar. Bunun için web sunucunuzda veya internet üzerindeki başka bir kaynaktaki resim dosyasını kullanabilirsiniz. Kullanım şekli;

ul li{ /*web sunucunuzdaki bir dosya*/ list-style-image: url("iconBlueStar_25x25.gif"); /*uzak sunucudaki bir dosya*/ list-style-image: url("https://static.getjar.com/icon-50x50/16/277484_thm.png"); }

list-style-position: özelliğinin aldığı inside ve outside değeri ile <li> etiketinin başına gelecek harf, sayı, şekil veya resimlerin <li> etiketi sınırları içinde mi, yoksa dışında mı yer alacağı belirlenir. Anlam olarak alacağı inside değeri ile içeride, outside değeri ile dışında gözükecektir. Eğer bu özellik girilmemiş ise varsayılan değer outside olarak uygulanacaktır.

List-style Kısa Kullanımı

Yazım şekli <ul> etiketi seçilerek  list-style: list-style-type list-style-position list-style-image şeklinde belirtilecektir. Örnek olarak;

ul{ list-style: square inside url("iconBlueStar_25x25.gif"); }

Yukarıdaki örnekte kısa yazım metodu ile list-style özelliğine değer 3 argüman şeklinde verilmiştir. List-style-type değeri olaral square (kare), list-style-position değeri olarak inside ve son argüman, list-style-image değeri olarak örnekteki kendi web sunucumuzdaki bir dosya ismi ve yolu verilerek belirtilmiştir.

Genel bir örnek olarak aşağıdaki HTML (index.html) dosyasını ve CSS (style.css) dosyalarını kopyalayarak kendi tarayıcınızda sonuçları gözlemleyebilirsiniz.

<!DOCTYPE html> <html> <head> <title>Liste Özellikleri</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!-- Sayılabilen (Ordered Lists) Listeler --> <ol start="11" reversed=""> <li>Motorsiklet</li> <li>Traktör</li> <li>Araba</li> <li>Kamyonet</li> <li>Otobüs</li> <li>Tır</li> </ol> <hr> <!-- Sayılamayan (Unordered Lists) Listeler --> <ul> <li>Motorsiklet</li> <li>Traktör</li> <li>Araba</li> <li>Kamyonet</li> <li>Otobüs</li> <li>Tır</li> </ul> <hr> <!-- Anlatım Listeleri --> <dl> <dt>Açıklama Satırı</dt> <dd>Açıklama içeriği1</dd> <dd>Açıklama içeriği2</dd> <dd>Açıklama içeriği3</dd> <dt>Açıklama Başlığı 2</dt> <dd>Açıklama içeriği1</dd> <dd>Açıklama içeriği2</dd> <dd>Açıklama içeriği3</dd> </dl> </body> </html> /*Ordered List*/ ol{ background-color: lightgray; list-style-position: outside; } ol li{ list-style-type: lower-alpha; background-color: pink; margin-top:5px; } /*Unordered List*/ ul{ background-color: pink; } ul li{ /*list-style-type: decimal-leading-zero;*/ list-style-image: url("https://static.getjar.com/icon-50x50/16/277484_thm.png"); background-color: blue; color:white; margin-top: 5px; list-style-position: inside; } ul li::before{ content: "+"; } /* Anlatım Listeleri */ dl{ background-color: lightgreen; padding: 20px; } dt{ color: gray; padding: 10px; margin-left: -20px; } dd{ background-color: blue; color: white; padding: 10px; }

Bir önceki “Hyperlink ve Bağlantılar” adlı yazıma ulaşmak için tıklayınız…

Temel HTML Dersleri yazılarıma ulaşmak için tıklayınız.