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!
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
CSS sayaçları, değerleri CSS kuralları tarafından artırılabilen (kaç kez kullanıldıklarını izlemek için) CSS tarafından sağlanan "değişkenlerdir". Sayaçlar, içeriğin görünümünü belgedeki yerleşimine göre ayarlamanıza olanak tanır.
Sayaçlı Otomatik Numaralandırma
CSS sayaçları "değişkenler" gibidir. Değişken değerleri CSS kurallarıyla artırılabilir (bu, kaç kez kullanıldığını izleyecektir).CSS sayaçlarıyla çalışmak için aşağıdaki özellikleri kullanacağız:
- counter-reset - Bir sayaç oluşturur veya sıfırlar
- counter-increment - Bir sayaç değerini artırır
- content - Oluşturulan içeriği ekler
- counter()veya counters()işlev - Bir öğeye bir sayacın değerini ekler
Aşağıdaki örnek, sayfa için bir sayaç oluşturur (gövde seçicide), ardından her <h2> öğesi için sayaç değerini artırır ve her <h2> öğesinin başına "Bölüm < sayacın değeri >:" ekler :
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Using CSS Counters:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
</body>
</html>Yerleştirme Sayaçları
Aşağıdaki örnek, sayfa (bölüm) için bir sayaç ve her <h1> öğesi (alt bölüm) için bir sayaç oluşturur. "Bölüm" sayacı, "Bölüm < bölüm sayacının değeri >." ile her <h1> öğesi için sayılır ve " bölüm sayacının değeri " ile her <h2> öğesi için "alt bölüm" sayacı sayılır. >.< alt bölüm sayacının değeri >":
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>HTML tutorials:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials:</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
</html>Bir sayaç, alt öğelerde otomatik olarak yeni bir sayaç örneği oluşturulduğundan, anahatlı listeler yapmak için de yararlı olabilir. Burada, counters()farklı iç içe sayaç seviyeleri arasına bir dize eklemek için işlevi kullanıyoruz :
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
<ol>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>CSS Sayacı Özellikleri
| Property | Description |
|---|---|
|
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
| Used with the ::before and ::after pseudo-elements, to insert generated content |
|
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
| Increments one or more counter values |
|
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
| Creates or resets one or more counters |
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
