CSS Dilinde CSS Listeler Kullanımı

CSS, web sayfalarında listelerin görünümünü kontrol etmek için güçlü araçlar sunar. Bu makale, sıralı (ordered) ve sırasız (unordered) listelerin varsayılan stillerini nasıl değiştireceğinizi, özel işaretleyiciler (marker) atayacağınızı ve liste öğeleri arasındaki boşlukları nasıl yöneteceğinizi detaylı bir şekilde açıklayacaktır. Amacımız, listelerinizi web tasarımınıza mükemmel bir şekilde entegre etmek için gerekli tüm bilgileri sağlamaktır.

Sözdizimi

CSS'te listelerle çalışırken en sık kullanılan özellikler list-style-type, list-style-position ve list-style-image'dir. Bu özellikler genellikle list-style kısayol özelliği ile birleştirilebilir.

ul {
  list-style-type: disc; /* veya square, circle, none, decimal, lower-alpha vb. */
  list-style-position: inside; /* veya outside */
  list-style-image: url('marker.png'); /* özel bir görsel kullanmak için */
}

/* Kısayol (shorthand) kullanımı */
li {
  list-style: square inside url('marker.png');
}

Detaylı Açıklama

CSS listelerinin görünümünü kontrol eden temel özellikler şunlardır:

• list-style-type: Liste işaretleyicisinin (marker) türünü belirler. Sırasız listeler için disc (varsayılan), circle, square, none gibi değerler alabilir. Sıralı listeler için decimal (varsayılan), decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman gibi değerler kullanılabilir. none değeri, işaretleyiciyi tamamen kaldırır.

• list-style-position: Liste işaretleyicisinin liste öğesi kutusunun içinde mi yoksa dışında mı konumlanacağını belirler. outside (varsayılan) değeri, işaretleyiciyi öğe kutusunun solunda, metinle hizalı olarak konumlandırır. inside değeri ise işaretleyiciyi öğe kutusunun içine, metnin bir parçasıymış gibi yerleştirir.

• list-style-image: Varsayılan işaretleyici yerine özel bir görsel kullanmanızı sağlar. Değer olarak bir görselin URL'sini alır, örneğin url('resim.svg'). Eğer görsel yüklenemezse veya bu özellik belirtilmezse, list-style-type özelliği devreye girer.

• list-style: Yukarıdaki üç özelliği tek bir kısayol özelliğiyle birleştirmek için kullanılır. Değerler herhangi bir sırada yazılabilir, ancak list-style-image özelliği varsa list-style-type'ın yerine geçer (görsel yüklenemezse geri dönüş olarak kullanılır). Örnek: list-style: square inside url('marker.png');

Pratik Kullanım Örnekleri

Aşağıdaki örnekler, farklı list-style özelliklerinin nasıl uygulandığını göstermektedir.

Örnek 1: Temel Sırasız Liste Stilini Değiştirme

Bu örnekte, sırasız bir listenin (

) işaretleyicisini daire (circle) olarak ayarlayacağız ve metin hizalamasını değiştireceğiz.

/* HTML */

  
Öğe Bir
  
Öğe İki
  
Öğe Üç


/* CSS */
.liste-daire {
  list-style-type: circle;
  list-style-position: inside;
  padding-left: 0; /* Tarayıcı varsayılan padding'ini sıfırlama */
}

softmush.com

Örnek 2: Özel Görsel Kullanımı




Bu örnek, bir listenin işaretleyicisi olarak özel bir görselin nasıl kullanılacağını gösterir. list-style-image özelliği ile bir görsel belirtilirken, görselin yüklenmemesi durumunda bir geri dönüş olarak list-style-type da tanımlanabilir.

/* HTML */

  
Görsel İşaretli Öğe Bir
  
Görsel İşaretli Öğe İki


/* CSS */
.liste-gorsel {
  list-style-image: url('https://via.placeholder.com/15x15/0000FF/FFFFFF?text=%2B'); /* Mavi bir artı işareti görseli */
  list-style-type: square; /* Görsel yüklenmezse kare göster */
  padding-left: 20px; /* Görsel için yeterli boşluk */
}

softmush.com

Örnek 3: Numaralı Liste Stillerini Ayarlama




Sıralı listeler (

) için farklı numaralandırma stilleri kullanmak mümkündür, örneğin küçük harfler veya Roma rakamları.

/* HTML */

  
İlk Adım
  
İkinci Adım
  
Üçüncü Adım



  
Bölüm I
  
Bölüm II


/* CSS */
.liste-harf {
  list-style-type: lower-alpha;
}

.liste-roma {
  list-style-type: upper-roman;
}

softmush.com

Önemli Notlar




• Varsayılan Boşluklar: Tarayıcılar

  ve
  etiketlerine varsayılan olarak padding ve margin değerleri uygular. Bu boşlukları kontrol etmek için padding-left: 0; ve margin: 0; gibi CSS kurallarını kullanmanız gerekebilir.

  1. list-style: none; Kullanımı: İşaretleyicileri tamamen kaldırmak için list-style-type: none; veya kısayol olarak list-style: none; kullanın. Bu genellikle özel işaretleyiciler oluşturmak veya listeleri menü gibi farklı bir amaçla stilize etmek için yapılır.

  2. Erişilebilirlik: Görsel işaretleyicileri kaldırdığınızda, liste öğelerini okunabilir ve erişilebilir tutmak için alternatif görsel ipuçları veya anlamsal yapıları korumaya dikkat edin.

  3. Özel İşaretleyiciler ve Kontrol: list-style-image özelliği, işaretleyicinin boyutunu veya konumunu doğrudan kontrol etme konusunda sınırlıdır. Daha gelişmiş kontrol için, işaretleyiciyi ::before sözde-elemanı (pseudo-element) ile oluşturup content özelliği ve diğer CSS özellikleriyle stilize etmek daha esnek bir yaklaşımdır.

  4. Kısayol Özelliği: list-style kısayol özelliği, okunabilirliği artırır ve daha az kod yazmanızı sağlar. Ancak, değerlerin sırası önemli değildir, tarayıcı bunları doğru şekilde ayrıştırır. Yine de, standart bir sıra (type position image) izlemek iyi bir uygulamadır.

  Yayınlanma Tarihi: 2025-10-17 18:00:44