list-style-type
Bu özellik ile listelerin başındaki numaralar ya da şekiller biçimlendirilebilir. Varsayılan değer içi dolu daire olmasına rağmen sıralı listelerde biçimlendirme yapılmazsa günlük hayatta kullandığımız rakamlar kullanılır.
Varsayılan değer içi dolu daire gösteren disc değeridir. circle değeri kullanıldığında liste elemanı başındaki işaret içi boş çember olur. square değeri de işaretin kare olmasını sağlar.
Liste elemanı sırası için kullanılabilecek olan decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-greek, upper-greek, lower-roman ve upper-roman değerleri sırasıyla Arap rakamları (günlük hayatta kullandığımız rakamlar), önüne sıfır konmuş Arap rakamları, küçük Latin harfleri, büyük Latin harfleri, küçük Yunan harfleri, büyük Yunan harfleri, küçük harflerle yazılmış Roma rakamları ve büyük harflerle yazılmış Roma rakamları manasına gelir.
Bunların dışında Ermeni rakamları için armenian, Gürcü rakamları için georgian, İbrani rakamları için hebrew, ideografik numaralandırma için cjk-ideographic, Hiragana numaralandırma sistemi için hiragana, Hiragana iroha numaralandırma sistemi için hiragana-iroha, Katakana numaralandırma sistemi için katakana ve Katakana iroha numaralandırma sistemi için katakana-iroha değerleri kullanılabilir.
Her değer her tarayıcıda çalışmadığından bu değerler kullanılırken dikkatli olunmalıdır. Ayrıca liste elemanlarının başında hiçbir işaret olmaması için none değeri de kullanılabilir. Bu özellikle yapılan biçimlendirmeler alt elemanları da etkiler.
<!DOCTYPE html>
<html>
<head>
<title>CSS Listeler</title>
<meta charset="UTF-8">
<style>
ul.ornek1{
list-style-type: disc;
}
ul.ornek2{
list-style-type: circle;
}
ul.ornek3{
list-style-type: square;
}
ol.ornek4{
list-style-type: lower-greek;
}
ol.ornek5{
list-style-type: lower-alpha;
}
ol.ornek6{
list-style-type: upper-roman;
}
</style>
</head>
<body>
<ul class="ornek1">
<li>İstanbul</li>
<li>Ankara</li>
<li>İzmir</li>
</ul><br>
<ul class="ornek2">
<li>İstanbul</li>
<li>Ankara</li>
<li>İzmir</li>
</ul><br>
<ul class="ornek3">
<li>İstanbul</li>
<li>Ankara</li>
<li>İzmir</li>
</ul><br>
<ol class="ornek4">
<li>İstanbul</li>
<li>Ankara</li>
<li>İzmir</li>
</ol><br>
<ol class="ornek5">
<li>İstanbul</li>
<li>Ankara</li>
<li>İzmir</li>
</ol><br/>
<ol class="ornek6">
<li>İstanbul</li>
<li>Ankara</li>
<li>İzmir</li>
</ol><br/>
</body>
</html>
list-style-image
Bu özellik ile liste elemanı işareti yerine bir görsel kullanılabilir. Bu özelliğin kullanım şekli şu şekildedir:
list-style-image:url("adres");
Bu özellik ile yapılan biçimlendirmeler alt elemanları da etkiler.
<!DOCTYPE html>
<html>
<head>
<title>CSS Listeler</title>
<meta charset="UTF-8">
<style>
ul.ornek{
list-style-image: url("https://dl.dropboxusercontent.com/u/53524685/list_icon.png");
}
</style>
</head>
<body>
<ul class="ornek">
<li>İstanbul</li>
<li>Ankara</li>
<li>İzmir</li>
</ul><br>
</body>
</html>
list-style-position
Bu özellik liste elemanı işaretinin içeriğin içinde mi yoksa dışında mı yer alacağını belirlemeye yarar. İçerisinde yer alması isteniyorsa inside, dışarısında yer alması isteniyorsa outside değeri kullanılmalıdır. İşaret içeriğin içerisine alındığı zaman elemanın başında fazladan bir boşluğun da oluştuğu görünecektir. Bu özellik ile yapılan biçimlendirmeler alt elemanları da etkiler.
<!DOCTYPE html>
<html>
<head>
<title>CSS Listeler</title>
<meta charset="UTF-8">
<style>
ul.ornek1{
list-style-position: inside;
}
ul.ornek2{
list-style-position: outside;
}
li{
border: 1px solid black;
}
</style>
</head>
<body>
<ul class="ornek1">
<li>İstanbul</li>
<li>Ankara</li>
<li>İzmir</li>
</ul><br>
<ul class="ornek2">
<li>İstanbul</li>
<li>Ankara</li>
<li>İzmir</li>
</ul><br>
</body>
</html>
list-style
Bu özellik tek seferde birden fazla liste biçimlendirme işlemi yapmaya yarar ve bu şekilde yapılan biçimlendirmeler alt elemanları da etkiler. Bu özelliğin kullanımı şu şekildedir:
list-style: "list-style-type değeri" "list-style-position değeri" "list-style-image değeri"
<!DOCTYPE html>
<html>
<head>
<title>CSS Listeler</title>
<meta charset="UTF-8">
<style>
ul.ornek1{
list-style: circle inside;
}
ul.ornek2{
list-style: outside url("https://dl.dropboxusercontent.com/u/53524685/list_icon.png");}
li{
border: 1px solid black;
}
</style>
</head>
<body>
<ul class="ornek1">
<li>İstanbul</li>
<li>Ankara</li>
<li>İzmir</li>
</ul><br>
<ul class="ornek2">
<li>İstanbul</li>
<li>Ankara</li>
<li>İzmir</li>
</ul><br>
</body>
</html>
Arkaplan <<<<< CSS3 >>>>> Kutu Modeli