CSS Liste Düzenleme

Konuyu Okuyanlar (0 kayıtlı üye )

sdkbyrm

olwα.ɴeт
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Puanı
3
Ticaret: 0 / 0 / 0
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;

noneListe öğesi yok
discDolu bir daire
circleIçi boş bir daire
squareDolu bir yuvarlak
decimalSayılar
decimal-leading-zeroİlk hanesi sıfırla başlatılan sayı
lower-romanKüçük harfli romen rakamları
upper-romanBüyük harfli romen rakamları
lower-greekKüçük klasik Yunanca
lower-alpha / lower-latinKüçük harfli ASCII karakterle
upper-alpha / upper-latinBüyük harfli ASCII karakterler
armenianGeleneksel Ermeni numaralandırması
georgianGeleneksel Gürcüce numaralandırması
Örnek ;

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



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<!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>

1608735795156.png
 
Üst Alt