CSS Academy · Ders

::before ile CSS Sayaçları

CSS sayaçlarını ve counter() işlevini kullanarak otomatik numaralandırma sistemleri oluşturun.

::before ile CSS Sayaçları, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

CSS Sayaçları Nedir

CSS sayaçları, değerleri artırılabilen ve oluşturulan içerikte görüntülenebilen, CSS tarafından tutulan değişkenlerdir. JavaScript kullanmadan veya HTML'de numaraları elle yönetmeden otomatik numaralandırma sağlarlar.

counter-reset

counter-reset bir sayacı başlatır veya sıfırlar. Bunu sayılacak öğeleri içeren öğeye yerleştirin.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

counter-increment

counter-increment, her uygulandığında sayacı 1 artırır (varsayılan değer). Bunu tekrarlanan öğelere yerleştirin.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

content İçinde counter() İşlevi

Geçerli sayaç değerini, bir sözde öğenin content özelliğinde counter(name) kullanarak görüntüleyin.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Biçimlendirilmiş Adım Sayacı

JavaScript kullanmadan oluşturulmuş eksiksiz bir numaralı adım bileşeni:

<div class="steps">
  <div class="step">Create an account</div>
  <div class="step">Verify your email</div>
  <div class="step">Start your first project</div>
</div>

Sayacın Başlangıç Değeri

counter-reset içinde özel bir başlangıç numarası ayarlayın:

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
</ul>

Sayaç Stilleri

Bir liste stili türü belirtmek için counter() işlevine ikinci bir bağımsız değişken verin:

<ul class="list" style="list-style:none;padding-left:0;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

counters() ile İç İçe Sayaçlar

counters(name, separator) (sonundaki “s” ile birlikte), “1.1”, “1.2”, “2.1” gibi iç içe numaralandırma oluşturur:

<ol>
  <li>Chapter one
    <ol>
      <li>Intro</li>
      <li>Details</li>
    </ol>
  </li>
  <li>Chapter two
    <ol>
      <li>Overview</li>
    </ol>
  </li>
</ol>

İç İçe Listelerde Sıfırlama

İç içe yerleştirilmiş her ol, sayaç kapsamını devralır. counters() işlevi sayaç zincirinin tamamını otomatik olarak kullanır.

Bölüm Numaralandırması

Uzun belgelerde başlıkları otomatik olarak numaralandırın:

<h2>Getting Started</h2>
<h3>Installation</h3>
<h3>Configuration</h3>
<h2>Advanced Usage</h2>
<h3>Plugins</h3>

Sayaçlarla İçindekiler

CSS sayaçları geçmişte içindekiler ve biçimlendirilmiş belgeler için kullanılırdı. Günümüzde bu işlem çoğunlukla JavaScript çerçeveleriyle gerçekleştirilir, ancak CSS sayaçları yalnızca CSS kullanan bir seçenek olmaya devam eder.

Hızlı Kontrol

Eşleşen her öğede bir CSS sayacını hangi özellik artırır?

Özet

CSS sayaçları JavaScript kullanmadan otomatik numaralandırma sağlar. Kapsayıcıda counter-reset, tekrarlanan öğelerde counter-increment kullanın ve değeri bir sözde öğenin content özelliğinde counter(name) ile görüntüleyin. counters(), ayırıcılarla birlikte iç içe numaralandırmayı yönetir.

Sıkça Sorulan Sorular

“::before ile CSS Sayaçları” dersi ücretsiz mi?

Evet — “::before ile CSS Sayaçları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“::before ile CSS Sayaçları” dersinde ne öğreneceğim?

CSS sayaçlarını ve counter() işlevini kullanarak otomatik numaralandırma sistemleri oluşturun. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“::before ile CSS Sayaçları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön