HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!
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
- 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
- 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>
Son düzenleme:
Konu Sahibi
Konu Sahibi
Paylaşım için teşekkürler
Rica Ederim..Yorumlarınız için Teşekkürler..Paylaşım için teşekkürler
