Altın Konu CSS Kodları İle Liste Yapımı..

ByESiNTi · 22 Tem 2021

Sırasız Listeler:

Kahve
Çay
Coca Cola
Kahve
Çay
Coca Cola

Sıralı Listeler:

Kahve
Çay
Coca Cola
Kahve
Çay
Coca Cola

HTML Listeleri ve CSS Liste Özellikleri

HTML'de iki ana liste türü vardır:

sırasız listeler (<ul>) - liste öğeleri madde işaretleri ile işaretlenmiştir
sıralı listeler (<ol>) - liste öğeleri sayılar veya harflerle işaretlenmiştir

CSS listesi özellikleri şunları yapmanızı sağlar:

Sıralı listeler için farklı liste öğesi işaretçileri ayarlayın
Sırasız listeler için farklı liste öğesi işaretçileri ayarlayın
Liste öğesi işaretçisi olarak bir resim ayarlayın
Listelere ve liste öğelerine arka plan renkleri ekleyin

Farklı Liste Öğesi İşaretçileri

list-style-typeMülkiyet liste öğesi işaretleyici türünü belirtir.

Aşağıdaki örnek, mevcut liste öğesi işaretlerinden bazılarını gösterir:

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}
</style>
</head>
<body>

<h2>Lists</h2>
<p>Example of unordered lists:</p>
<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>
<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

Lists

Example of unordered lists:

Coffee
Tea
Coca Cola
Coffee
Tea
Coca Cola

Example of ordered lists:

Coffee
Tea
Coca Cola
Coffee
Tea
Coca Cola

---------------------------------------------------------------------------------------------------------------------

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}
</style>
</head>
<body>

<h1>Styling Lists With Colors:</h1>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Bir örnek daha verelim....

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>

<h2>CSS Lists</h2>
<p>The list-style-image property specifies an image as the list item marker:</p>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>