CSS Dizelge (Liste)
Markanız için 300X300 alan.
Dizelgeler (listeler) sıralı (<ol> etiketi) ya da sırasız (<ul> etiketi) olabillir. list-style özelliği, CSS'in dizelgelere özel olarak kullanıma sunduğu özelliklerden yalnızca biri.
Bir önceki bölümden hatırlarsanız etiketlerden önce ya da sonra CSS ile içerik eklenebiliyordu. İçerik ile list-style özelliği yerine kendi içeriğinizi ya da list-style-image özelliği ile kendi görsellerinizi kullanabilirsiniz.
Sırasız Dizelge (Liste)
<ul>
<li style="list-style-type: disc;">list-style-type: disc;</li>
<li style="list-style-type: circle;">list-style-type: circle;</li>
<li style="list-style-type: square;">list-style-type: square;</li>
</ul>list-style-type: disc;list-style-type: circle;list-style-type: square;
Sıralı Dizelge (Liste)
<ol style="margin: 0 0 0 29px;">
<li style="list-style-type: decimal;">list-style-type: decimal;</li>
<li style="list-style-type: lower-roman;">list-style-type: lower-roman;</li>
<li style="list-style-type: upper-roman;">list-style-type: upper-roman;</li>
<li style="list-style-type: lower-latin;">list-style-type: lower-latin;</li>
<li style="list-style-type: upper-latin;">list-style-type: upper-latin;</li>
</ol>list-style-type: decimal;- rakamlist-style-type: lower-roman;- küçük Roma rakamlarılist-style-type: upper-roman;- büyük Roma rakamlarılist-style-type: lower-latin;- küçük Latin harflerilist-style-type: upper-latin;- büyük Latin harfleri
<ol> etiketi ve <ul> etiketi dizelgelerindeki desenleri (list-style özelliği) gösterildiği gibi kullanmanız salık edilir. Yine de tasarım olarak ters bir biçimde de kullanabilirsiniz.
Tarayıcılar, dizelge öğeleri için farklı desenler kullanabilirler.
list-style özelliği ile ilgili daha fazla ayrıntıyı list-style sayfasında bulabilirsiniz.
CSS ile Sayaçlar - Counters
Sayaçlar yalnızca dizelgelere değil HTML etiketlerine uygulanabilir.
body {counter-reset: numara;} //Sayaçlar oluşturulur.
h2.sayaç:before {
content:counter(numara) ": ";
counter-increment: numara;
color: #f00;
} // Özellikleri belirlenir.
// CSS işini yapar...<h2 class="sayaç">h2 Başlık 1</h2>
<h2 class="sayaç">h2 Başlık 2"</h2>
<h2 class="sayaç">h2 Başlık 3"</h2>
<h2 class="sayaç">h2 Başlık 4"</h2>h2 Başlık 1
h2 Başlık 2
h2 Başlık 3
h2 Başlık 4
Geliştirici aracını açıp başlıkları incelediğinizde kırmızıyla yazılmış olan 1., 2. gibi numaraları göremezsiniz. Daha önce öğrendiğiniz gibi content özelliği, yani içerik (CSS ile gelen içerik), DOM'un bir parçası değildir. DOM'da yoktur. Geliştirici aracı bu yüzden bu numaraları DOM'da göremez !
Her tarayıcı desteklemeyebilir. Buraya bir göz atmak isteyebilirsiniz.
Bazı öğelerde sayacı kullanmadan önce sayacı sıfırlamanız yani yeniden başlatarak ilk durumuna döndürmeniz gerekir: counter-reset: sayaçAdı;
Bu işlemi kesinlikle sayacı kullanan etiketin en azından atası ile yapmalısınız. Atayı sınıf ve kimlikle seçemiyorsanız, daha büyük atayı ya da <body> etiketi'ni kullanabilirsiniz.
Ben örnekte <body> etiketi'ni kullandım.
Daha karmaşık şekilde kullanılabilirler. Ayrıntılar için burayı tıklayabilirsiniz.