CSS kullanarak HTML listelerini biçimlendirebilir ve özelleştirebilirsiniz. İşte temel bir örnek:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liste Biçimlendirme Örneği</title>
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
section {
padding: 2em;
}
ul {
list-style-type: square; /* Liste işaretleri kare şeklinde */
}
ol {
list-style-type: decimal; /* Sıralı liste işaretleri sayı şeklinde */
}
li {
margin-bottom: 0.5em;
}
.custom-list {
list-style-type: none; /* Liste işaretleri gizle */
}
.custom-list li {
background-color: #ffecb3;
padding: 0.5em;
margin-bottom: 0.5em;
}
</style>
</head>
<body>
<section>
<h1>Liste Biçimlendirme Örneği</h1>
<h2>Normal Liste</h2>
<ul>
<li>Öğe 1</li>
<li>Öğe 2</li>
<li>Öğe 3</li>
</ul>
<h2>Sıralı Liste</h2>
<ol>
<li>Öğe 1</li>
<li>Öğe 2</li>
<li>Öğe 3</li>
</ol>
<h2>Özel Biçimlendirilmiş Liste</h2>
<ul class="custom-list">
<li>Öğe 1</li>
<li>Öğe 2</li>
<li>Öğe 3</li>
</ul>
</section>
</body>
</html>
Bu örnekte:
list-style-typeözelliği, liste işaretlerinin tipini belirler.square,decimalgibi değerler kullanılabilir.margin-bottomözelliği, her liste öğesi arasına bir boşluk ekler..custom-listsınıfı, özel bir biçimlendirilmiş liste oluşturur.
Bu stil özelliklerini kullanarak listelerin görünümünü ihtiyacınıza göre özelleştirebilirsiniz.