CSS Sayaç Oluşturucu Özel numaralandırılmış listeler için çeşitli stiller ve iç içe geçme ile CSS sayaçları oluşturun.

🎨

CSS Sayaç Oluşturucu

Özel numaralandırılmış listeler için çeşitli stiller ve iç içe geçme ile CSS sayaçları oluşturun.

Sayacı yapılandır

Sayaç adını, stilini (onluk, roma, alfabetik), ön ek ve son eklerini ayarlayın.

İç içe geçme özelliğini etkinleştir

İsteğe bağlı olarak özel ayırıcı karakterlerle iç içe geçmiş sayaçları etkinleştirin.

CSS'yi kopyalayın

Numaralı listeyi önizleyin ve tam sayaç CSS'sini kopyalayın.

Loading tool...

What Is CSS Sayaç Oluşturucu?

CSS Sayaç Oluşturucu, CSS counter-reset, counter-increment ve content özelliklerini kullanarak özel numaralı listeler oluşturur. CSS sayaçları, standart <ol> liste numaralandırmasından daha esnek olup çeşitli numaralandırma stillerini, özel ön ek ve son ekleri, iç içe numaralandırmayı ve liste-stil-tipinden bağımsız stillemeyi destekler. Bu araç, sayaç adını yapılandırmanıza, on farklı numaralandırma stili (onluk, öndeki sıfır olan onluk, alt/üst alfabematik, alt/üst roma rakamı, Yunan ve daha fazlası) arasından seçim yapmanıza, özel ön ek ve son ek metinleri ayarmanıza ve isteğe bağlı olarak iç içe sayaçları yapılandırılabilir bir ayırıcı ile etkinleştirmenize olanak tanır. Ön izleme, gerçekçi içerikli bir örnek liste上的 sayaçı gösterir ve oluşturulan CSS, tüm gerekli sayaç özelliklerini içerir.

Why Use CSS Sayaç Oluşturucu?

Onluk, roma ve alfabetik dahil on sayı stili
Sayaç değerleri etrafında özel ön ek ve son ek metni
İç içe geçmiş sayaç desteği ile yapılandırılabilir ayırıcılar
Gerçekçi liste içeriğiyle önizleme

Common Use Cases

Hukuki Belgeler

Hukuki ve teknik belgeler için iç içe geçmiş numaralı bölümler (1.1, 1.2, 2.1) oluşturun.

Adım Adım Rehberler

Tutorials için stilize sayaçlarla özel numaralı adımlar oluşturun.

İçindekiler Tablosu

Belge içindekiler tablosu için hiyerarşik numaralama oluşturun.

Özel Sıralı Listeler

Varsayılan liste numaralandırmasını stilize özel sayaçlarla değiştirin.

Technical Guide

CSS sayaçları üç ana özelliğini kullanır: counter-reset, bir üst öğede bir sayaç başlatır; counter-increment, alt öğelerde sayaç artırır ve content özelliği veya counters() işlevi ile ::before pseudo-elementinde değer gösterilir. counter-reset özelliği yeni bir sayaç örneği oluşturur: counter-reset: bölüm. counter-increment bunu artırır: counter-increment: bölüm. ::before pseudo-elementindeki content özelliği, sayaçı gösterir: content: counter(bölüm). counter() işlevi isteğe bağlı bir stil argümanını kabul eder: counter(bölüm, üst-roma). İç içe sayaçlar için her düzey kendi alt-sayağını sıfırlar. counters() işlevi (birden fazla 's' harfi) iç içe kapsamları yönetir: counters(bölüm, ".") "1.2.3" notasını üretir. Kullanılabilen liste-stil-tipleri arasında onluk, öndeki sıfır olan onluk, alt alfa, üst alfa, alt roma rakamı, üst roma rakamı, alt yunan ve daha fazlası bulunur. Birden fazla sayaç tanımlanabilir ve bağımsız olarak kullanılabilir.

Tips & Best Practices

1
Üst öğe üzerinde counter-reset, çocuklar üzerinde counter-increment kullanın
2
İç içe geçmiş numaralama için counters() ile bir ayırıcı dizesi kullanın (1.1.1 gibi)
3
Özel ön ek ve son ek metni, sayaçları hukuki belgeler için uygun hale getirir
4
CSS sayaçları yalnızca listelerle değil, herhangi bir öğeyle çalışır

Related Tools

CSS Tablo Oluşturucu

Özelleştirilebilir renkler, çizgiler ve hover efektleri ile güzel bir şekilde stilize edilmiş HTML tablolar oluşturun.

🎨 CSS & Design

Tipografi Ölçeği Oluşturucu

Özelleştirilebilir temel boyut, oran ve birimlerle modüler bir tipografik ölçek oluşturun.

🎨 CSS & Design

CSS Değişken Oluşturucu

Renkler, boşluklar ve tipografi için özel CSS özelliklerini (değişkenleri) oluşturun.

🎨 CSS & Design

Yazdırma Stil Sayfası Oluşturucu

@media yazdırma stil sayfalarını, öğeleri gizleme, metni stilendirme ve sayfa kesintilerini kontrol etme seçenekleriyle oluşturun.

🎨 CSS & Design

Frequently Asked Questions

Q counter() ve counters() arasındaki fark nedir?

counter() tek bir sayaç değerini gösterir. counters() iç içe geçmiş sayaç değerlerini ayırıcı dizesiyle gösterir.

Q CSS sayaçlarını herhangi bir öğede kullanabilir miyim?

Evet, CSS sayaçları yalnızca <ol> veya <li> öğeleri değil, herhangi bir öğeyle çalışır.

Q Sayaçı nasıl sıfırlayabilirim?

Üst öğe üzerinde counter-reset uygulayın. Sayaç 0'dan başlar (ilk artma 1 yapar).

Q Belirli bir numaradan saymaya başlayabilir miyim?

Evet, sayaçı 5'ten başlatmak için counter-reset: section 5 kullanın (ilk görüntüleme 6 olur).

Q CSS sayaçları erişilebilir mi?

::before içeriğindeki CSS sayaçları çoğu ekran okuyucu tarafından okunur ancak tutarlı olmayabilir. Mümkünse anlamsal HTML listeleri kullanın.

About This Tool

CSS Sayaç Oluşturucu is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.