CSS Web Tasarım

CSS Liste Düzenleme

Listeler günlük yaşamın bir parçasıdır. Yapılacak iş listeleri, ne yapılacağını belirler.

Gezinme rotaları, adım adım yol tarifi listeler aracılığı ile sağlanabilir. Tarifler, içerik listeleri, menüler gibi ve daha bir çok kullanım alanları vardır. Tabi ki bu popülaritesini HTML’in <li> etiketleri ile web dünyasında da bulmak mümkündür.

Bir web sitesinde bir liste kullanmak istediğimizde HTML, seçim için üç farklı tür sunar;

  • Sırasız (Unordered List-ul)
  • Sıralı (Ordered List-ol)
  • Açıklama listeleri (Description List-dl)

Kullanılacak listenin türünü seçmek ya da bir liste kullanmak isteyip istemediğinizi seçmek, içeriğe ve içeriği görüntülemek için yapacağınız tercihlerebağlıdır.

HTML’de bulunan üç farklı türde listeyi, CSS ile stillemek için birçok yol bulunmaktadır. Örneğin, bir listede kullanılacak madde imi türünü seçebiliriz. İşaretçi, kare, yuvarlak, sayısal, alfabetik veya belki de görünmez olabilir. Ayrıca, bir listenin dikey veya yatay olarak görüntülenip görüntülenmeyeceğine karar verebiliriz. Bu seçeneklerin tümü, web sayfalarımızın şekillendirilmesinde önemli roller oynamaktadır. CSS ile listeler, sayfalarda kendilerini bambaşka görünümlerde ve oldukça fonksiyonel şekillerde sunmaktadırlar.

Şimdi CSS’i kullanarak HTML’in bu <list> öğesine neler yapabileceğimizi görelim;

Not : <ol> veya <ul> etiketine uygulanan herhangi CSS bildirimi tüm listeyi etkilerken, <li> etiketine uygulanan özellikler tek tek liste öğelerini etkiler.

list-style-type

list-style-type Özelliği liste öğesinin başında yer alan işaretçiyi (item marker) değiştirmenizi sağlar. Alabileceği CSS değerleri;

none Liste öğesi yok
disc Dolu bir daire
circle Içi boş bir daire
square Dolu bir yuvarlak
decimal Sayılar
decimal-leading-zero İlk hanesi sıfırla başlatılan sayı
lower-roman Küçük harfli romen rakamları
upper-roman Büyük harfli romen rakamları
lower-greek Küçük klasik Yunanca
lower-alpha / lower-latin Küçük harfli ASCII karakterle
upper-alpha / upper-latin Büyük harfli ASCII karakterler
armenian Geleneksel Ermeni numaralandırması
georgian Geleneksel Gürcüce numaralandırması

Örnek ; 

Aşağıdaki örnekte yer alan liste öğelerine değişik işaretçiler uygulanmıştır.

list-style-type : none

list-style-type Özelliğine none değerinin verilmesi <li> öğelerinizi özelleştirmeninyolunu açar. Madde imlerini kaldırır.

Örnek ;

list-style-image

list-style-image Özelliği <li> öğelerinin işaretçilerine arka plan resmi eklemeyi mümkün kılar.

Varsayılan list-style-type özellik değerlerleri sayfalarınız içinde yer alan liste öğelerinizi ifade etmede yeterince iyi olmadığını düşünebilirsiniz. Dolaysıyla liste öğe işaretçisini özelleştirmek iyi bir fikir olacaktır. Bunu yapmanın en yaygın yolu, <li> öğelerine bir arka plan resmi yerleştirmektir.

Süreç ; varsayılan “list-style-type” özellik değerlerini “none” değeri ile kaldırmayı ve <li>öğeleri için “list-style-image” özelliği ile arka plan resmi ve dolgu eklemekle gerçekleştirilir.

Örnek ;

Aşağıdaki örneğimizde her bir liste elemanımızın işaretçisi olarak  ikonu kullanacağız.

list-style-position

list-style-position Özelliği liste öğesi işaretçilerinin içerik akışının içinde mi yoksa dışında mı görünüp görünmeyeceğini belirtir.

Örnek;

list-style

list-sytle Özelliği bir liste bildiriminde tüm liste özelliklerini ayarlamak için kullanılır. Bu tip kısaltma kullanırken özellik değerlerinin sırası şöyledir:

  • list-style-type
  • list-style-position
  • list-style-image

Yukarıdaki özellik değerlerinden biri eksikse, varsa eksik özellik için varsayılan değer eklenecektir.

Özelleştirilmiş Liste

Örnek;

Yukarıda ekran görüntüsü verilen türde bir liste için aşağıdaki CSS kodları güzel bir örnek olacaktır.

Örnek ;

Yukarıdaki özelleştirilmiş listenin CSS kodlarını aşağıda görebilirsiniz.

1 Yorum

Yorum yap

Web Tasarım & Programlama sitesinden daha fazla şey keşfedin

Okumaya devam etmek ve tüm arşive erişim kazanmak için hemen abone olun.

Okumaya Devam Edin