Css listeler ile Html listeleme dersinde öğrenmiş olduğunuz listeleme etiketlerine stil vermek için kullanılmaktadır. Css listeler :
Css sıralı listelere stil vermek için list-style-type özelliği kullanılmaktadır. List-style-type özelliğinin alabildiği değerler:
<style type="text/css">
ol{
list-style-type: siralı_liste_icin_değer;
}
</style>
<style type="text/css">
ol{
list-style-type: decimal;
}
</style>
<style type="text/css">
ol{
list-style-type: decimal-leading-zero;
}
</style>
<style type="text/css">
ol{
list-style-type: lower-alpha;
}
</style>
<style type="text/css">
ol{
list-style-type: upper-alpha;
}
</style>
<style type="text/css">
ol{
list-style-type: lower-latin;
}
</style>
<style type="text/css">
ol{
list-style-type: upper-latin;
}
</style>
<style type="text/css">
ol{
list-style-type: lower-roman;
}
</style>
<style type="text/css">
ol{
list-style-type: upper-roman;
}
</style>
Css sıralı listelere stil vermek için sıralı listelerde olduğu gibi list-style-type özelliği kullanılmaktadır. Sırasız listelerde List-style-type özelliğinin alabildiği değerler:
<style type="text/css">
ul{
list-style-type: sırasız_liste_icin_değer;
}
</style>
<style type="text/css">
ul{
list-style-type: none;
}
</style>
<style type="text/css">
ul{
list-style-type: disc;
}
</style>
<style type="text/css">
ul{
list-style-type: circle;
}
</style>
<style type="text/css">
ul{
list-style-type: square;
}
</style>
Css dilinde resimli madde imi ile liste oluşturmak için list-style-image özelliği kullanılmaktadır. İstediğimiz bir resmi madde imi olarak kullanabilmekteyiz. Boyutları ayarlandığında güzel bir görüntü oluşturmaktadır. Örneğin: Genişliği ve yüksekliği 10 pixel olan resim ekleyebilirsiniz.
<style type="text/css">
ol{
list-style-image: url("resim_adresi");
}
</style>
<html>
<head>
<title> Resimli madde imi liste css</title>
<style type="text/css">
.resimlimaddeimi{
list-style-image: url("maddeimi.png");
}
</style>
</head>
<body>
<ol class="resimlimaddeimi">
<li>Madde 1</li>
<li>Madde 2</li>
<li>Madde 3</li>
<li>Madde 4</li>
<li>Madde 5</li>
</ol>
</body>
</html>
Önceki Ders: Css Tablolar | Sonraki Ders: Css Konumlandırma |