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 tercihlere bağ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.


<!DOCTYPE html>
<html>
<head>
<style>
    ul.bir {
        list-style-type: circle;
    }

    ul.iki {
        list-style-type: square;
    }

    ol.uc {
        list-style-type: upper-roman;
    }

    ol.dort {
        list-style-type: lower-alpha;
    }
</style>
</head>
<body>

    <p>Sırasız Listeler</p>
    <ul class="bir">
      <li>Çay</li>
      <li>Kahve</li>
      <li>Soda</li>
    </ul>

    <ul class="iki">
      <li>Çay</li>
      <li>Kahve</li>
      <li>Soda</li>
    </ul>

    <p>Sıralı Listeler</p>
    <ol class="uc">
      <li>Çay</li>
      <li>Kahve</li>
      <li>Soda</li>
    </ol>

    <ol class="dort">
      <li>Çay</li>
      <li>Kahve</li>
      <li>Soda</li>
    </ol>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

ul.bir {

list-style-type: circle;

}

ul.iki {

list-style-type: square;

}

ol.uc {

list-style-type: upper-roman;

}

ol.dort {

list-style-type: lower-alpha;

}

</style>

</head>

<body>

<p>Sırasız Listeler</p>

<li>Kahve</li>

</ul>

<li>Kahve</li>

</ul>

<p>Sıralı Listeler</p>

<li>Kahve</li>

</ol>

<li>Kahve</li>

</ol>

</body>

</html>

list-style-type : none

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

Örnek ;


<!DOCTYPE html>
<html>
<head>
<style>
    ul.ozel {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
</style>
</head>
<body>

<p>Normal Liste</p>
<ul>
  <li>Çay</li>
  <li>Kahve</li>
  <li>Soda</li>
</ul>

<p>Özel Liste</p>
<ul class="ozel">
  <li>Çay</li>
  <li>Kahve</li>
  <li>Soda</li>
</ul>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

ul.ozel {

list-style-type: none;

margin: 0;

padding: 0;

}

</style>

</head>

<body>

<p>Normal Liste</p>

<ul>

<li>Kahve</li>

</ul>

<p>Özel Liste</p>

<li>Kahve</li>

</ul>

</body>

</html>

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.


<!DOCTYPE html>
<html>
<head>
<style>
    li{
        list-style-type: none;
        list-style-image: url(konum.png);
        padding: 10px;
    }
</style>
</head>
<body>

    <p>Sırasız Listeler</p>
    <ul>
      <li>İstanbul</li>
      <li>Ankara</li>
      <li>İzmir</li>
    </ul>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

li{

list-style-type: none;

list-style-image: url(konum.png);

padding: 10px;

}

</style>

</head>

<body>

<p>Sırasız Listeler</p>

<ul>

<li>İstanbul</li>

<li>Ankara</li>

<li>İzmir</li>

</ul>

</body>

</html>

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;


<!DOCTYPE html>
<html>
<head>
<style>
    ul.bir {
        list-style-position: inside;        
    }
    ul.iki {
        list-style-position: outside;        
    }
</style>
</head>
<body>

    <p>İçerden Başlayan Liste</p>
    <ul class=bir>
      <li>Çay</li>
      <li>Kahve</li>
      <li>Soda</li>
    </ul>

    <p>Dışından Başlayan Liste</p>
    <ul class="iki">
      <li>Çay</li>
      <li>Kahve</li>
      <li>Soda</li>
    </ul>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

ul.bir {

list-style-position: inside;

}

ul.iki {

list-style-position: outside;

}

</style>

</head>

<body>

<p>İçerden Başlayan Liste</p>

<li>Kahve</li>

</ul>

<p>Dışından Başlayan Liste</p>

<li>Kahve</li>

</ul>

</body>

</html>

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.


ul {
        list-style:circle inside url(konum.png);        
    }

ul {

list-style:circle inside url(konum.png);

}

Ö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.


<!DOCTYPE html>
<html>
<head>
<style>
    ul {
        border-left: 5px solid red;    
        background-color: #FFFB07;
        list-style-type: none;
        padding: 10px;
    }
    ul li{
        margin : 15px;
        border-bottom :2px solid green;
    }
</style>
</head>
<body>

<p>Özel Görünümlü Bir Liste</p>
    <ul>
      <li>Çay</li>
      <li>Kahve</li>
      <li>Soda</li>
    </ul>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

ul {

border-left: 5px solid red;

background-color: #FFFB07;

list-style-type: none;

padding: 10px;

}

ul li{

margin : 15px;

border-bottom :2px solid green;

}

</style>

</head>

<body>

<p>Özel Görünümlü Bir Liste</p>

<ul>

<li>Kahve</li>

</ul>

</body>

</html>

Örnek ;

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


<!DOCTYPE html>
<html>
<head>
<style>
    ul {
        list-style-type: none;
        padding: 0;
        border: 1px solid #ddd;
    }

    ul li {
        padding: 8px 16px;
        border-bottom: 1px solid #ddd;
    }

    ul li:last-child {
        border-bottom: none
    }
</style>
</head>
<body>

<p>Özel Görünümlü Bir Liste</p>
    <ul>
      <li>Çay</li>
      <li>Kahve</li>
      <li>Soda</li>
    </ul>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

padding: 0;

border: 1px solid #ddd;

}

ul li {

padding: 8px 16px;

border-bottom: 1px solid #ddd;

}

ul li:last-child {

border-bottom: none

}

</style>

</head>

<body>

<p>Özel Görünümlü Bir Liste</p>

<ul>

<li>Kahve</li>

</ul>

</body>

</html>

1 Yorum

Yorum Yap X

list-style-type

list-style-type : none

list-style-image

list-style-position

list-style

Özelleştirilmiş Liste

Bunu paylaş:

İlgili

İlginizi Çekebilir

1 Yorum

Yorum Yap X