CSS Sayaçları

ByESiNTi · 23 Tem 2021

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

Bir CSS sayacı kullanmak için önce counter-reset.

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