Bu öğreticide gösterilen CSS özellikleriyle listeler oluşturabilirsiniz. Bu bilgiler, ul ve ol HTML öğelerine odaklanmaktadır. Yani sıralı ve sırasız listelerinizi isteğinize göre özelleştirebilirsiniz.
Liste Hakkında Genel Bilgiler
list-style özelliği, aşağıdaki üç özelliğin bir özetidir:
• list-style-type
• list-style-position
• list-style-image
list-style ile liste öğelerinin önündeki yuvarlakların ve liste öğelerinin girintisinin görünümü etkilenebilir. Bahsedilen bilgiler virgülle ayrılmıştır ve sırası önemli değildir. Ayrıca her özellik için bir değer belirtilmesi zorunlu değildir.
Bir örnek:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul {
list-style:square;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Tarayıcıda aşağıdaki gibi görünür:
Grafik Simgeler
Kendi grafik simgesini belirleyebilirsiniz. Bunun için list-style-image özelliği kullanılır. Şu değerler mümkündür:
• url – grafik dosyasının adı ve gerekirse yolu
• none – hiçbir grafik gösterilmez.
Bir örnek:
ul {
list-style-image: url(bullet.gif);
}
URL'de belirtilen grafik yoluna dikkat edin.
Yanlış bir yol belirtildiğinde tarayıcılar standart bir yuvarlağa dönecektir.
Yuvarlakların Pozisyonu
list-style-position ile numaralandırmaların veya yuvarlakların girintisinin nasıl davranacağı belirlenir.
• inside – ilk satır, yuvarlak ve liste öğesi soldan hizalanacak şekilde girintilendirilir.
• outside – yuvarlak, liste öğesinin solunda durur.
Aşağıdaki örnekte inside ve outside değerleri kullanılmaktadır.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-position:inside;
}
ul.b {
list-style-position:outside;
}
</style>
</head>
<body>
<p>Bir içeride liste:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Bir dışarıda liste:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Bu şekilde bu iki değerin gerçekte ne gibi farklı etkilere sahip olduğunu direkt olarak görebilirsiniz.
Yuvarlakların Görünümünü Belirleme
Yuvarlak veya sıralı listelerin işaretleri görünümünü açıkça belirleyebilirsiniz. Ayrıca numaralı listelerin görünümü de etkilenebilir. Bunun için list-style-type özelliği kullanılır. Bu özellik için şu değerler geçerlidir:
• decimal – ol-Listeler için: Numaralandırma 1, 2, 3 vb.
• lower-roman – ol-Listeler için: Numaralandırma i., ii., iii. vb.
• upper-roman – ol-Listeler için: Numaralandırma I., II., III., IV. vb.
• lower-alpha veya lower-latin – ol-Listeler için: Numaralandırma I., II., III., IV. vb.
• upper-alpha veya upper-latin – ol-Listeler için: Numaralandırma A., B., C., D. vb.
• disc – ul-Listeler için: fillCircle dolu daire olarak işaret
• circle – ul-Listeler için: boş daire olarak işaret
• square – ul-Listeler için: dikdörtgen olarak işaret
• none – Ne işaret ne numaralandırma
• lower-greek – ol-Listeler için: Yunan alfabesiyle numaralandırma
• hebrew – ol-Listeler için: İbranice karakterlerle numaralandırma
• decimal-leading-zero – ol-Listeler için: Önce sıfırlı numaralandırma 0: 01., 02., 03., 04. vb.
• cjk-ideographic – ol-Listeler için: İdeografik karakterlerle numaralandırma
• hiragana – ol-Listeler için: Japon numaralandırma (küçük harfle)
• katakana – ol-Listeler için: Japon numaralandırma (büyük harfle)
• hiragana-iroha – ol-Listeler için: Japon numaralandırma (küçük harfle)
• katakana-iroha – ol-Listeler için: Japon numaralandırma (büyük harfle)
Aşağıdaki örnekte listelenen varyantlardan bazıları kullanılmaktadır.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<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>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol class="c">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol class="d">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>Tarayıcıda şu görüntü oluşur:
Sayacı
ol-listeleriyle içerikler numaralandırılabilir. Ancak daha karmaşık uygulamalarda bu numaralandırma şekli pek uygun değildir. CSS bu durum için sayıcılarla bir alternatif sunar.
Aşağıda, sayıcıları nasıl kullanabileceğinizi göstereceğim.
Öncelikle body öğesi için yeni bir sayıcı oluşturuyorum.
body {
counter-reset: kapitel;
}Bu tanım sayesinde, belgede "kapitel" adında bir sayıcı oluşturulur. Bu sayıcı şimdi kullanılabilir.
h1 {
counter-increment: kapitel;
}
Gösterilen sözdizimi kullanılarak, bir yeni h1-öğesi belirdiğinde sayacı otomatik olarak 1 değeri kadar artar. Ancak şu anda numaralandırma henüz görünmüyor. Bu durumu, yalancı elemanların kullanımıyla kolayca değiştirebiliriz.
h1::before {
content: counter(kapitel) ". ";
}
Tam bir uygulama şu şekilde olabilir:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset: kapitel;
}
h1 {
counter-increment: kapitel;
}
h1::before {
content: counter(kapitel) ". ";
}
</style>
</head>
<body>
<h1>Kapitel</h1>
<h1>Kapitel</h1>
</body>
</html>Tarayıcıdaki sonuç şöyle görünür:
Görüldüğü gibi, ::before ile her h1-öğesinin başında ilgili numara gösterilir. Rakamın başlık metninin hemen yanında durmaması için rakamın ardından bir nokta ve bir boşluk eklenir.
content: counter(kapitel) ". "
Yerleşik numaralandırmalar da mümkündür. Bunun için sayacı, sonunda tekrar sıfırdan başlaması gereken yerde tanımlanır.
h1 {
counter-increment: kapitel;
counter-reset: unterkapitel;
}Bu örnekte, her yeni h1-öğesi belirdiğinde sayacın sıfırlanması sağlanır. Aşağıdaki örnek, iç içe sayaçlar için tipik bir uygulamayı göstermektedir.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset:kapitel;
}
h1 {
counter-reset:unterkapitel;
}
h1:before {
counter-increment:kapitel;
content: counter(kapitel) ". ";
}
h2:before {
counter-increment:unterkapitel;
content:counter(kapitel) "." counter(unterkapitel) " ";
}
</style>
</head>
<body>
<h1>Kapitel</h1>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h1>Kapitel</h1>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
</body>
</html>Tarayıcıda görülen şu şekildedir:
Örnekler, ne kadar güçlü sayıcılar olduğunu göstermiştir.
