Sayfa numarası

CSS ile sayfa numarası eklemeyi öğrenirsin.

Sayfa numarası sayaçları

Yazdırırken her sayfanın numarasını göstermek için CSS sayaçlarından yararlanırsın. counter(page) ifadesi o an bulunan sayfanın numarasını verir. @page bildirimi içindeki bir kenar kutusunda content özelliğine yerleştirilir.

Örnek: @page { @bottom-center { content: counter(page); } }. Bu, her sayfanın alt ortasına numara yazar. @bottom-left, @top-right gibi başka kutular da vardır.

Sayfa numarası biçimleri

Sayfa numarasını başka biçimlerde de gösterebilirsin. counter(page, upper-roman) büyük Romen rakamlarıyla (I, II, III) yazar. counter(page, lower-alpha) harflerle (a, b, c) yazar.

İki sayacı yan yana da birleştirebilirsin: content: "Sayfa " counter(page). Böylece altta "Sayfa 1", "Sayfa 2" dizisi çıkar. İçeriği dilediğin gibi biçimlendirirsin.

Uygulama Sayfa numarasını alt ortaya koy

Bir @page bildirimi yaz. İçinde @bottom-center kutusu tanımla ve content: counter(page) bildirimi ekle. Aynı @page bloğunda margin: 2cm da tanımlansın.

Örnek çözümü göster

/* sayfa numarasını alt ortaya koy */
@page {
  margin: 2cm;
  @bottom-center {
    content: counter(page);
  }
}

Kendini test et

counter(page) ifadesi ne verir?
```
@page { @bottom-center { content: counter(page); } }
```
- Toplam öğe sayısını
- Sayfa kenar boşluğunu
- Yazdırma tarihini
- Bulunan sayfanın numarasını
Cevabı göster

Bulunan sayfanın numarasını — Doğru. counter(page) o an bulunan sayfanın numarasını verir.

Sayfa numarasını alt ortaya koy

@page {
  @bottom-center {
    content: ____;
  }
}

Cevabı göster

@page {
  @bottom-center {
    content: counter(page);
  }
}

counter-reset: page ne yapar?
```
h1 { counter-reset: page; }
```
- Sayacı sıfırdan başlatır
- Sayacı bir azaltır
- Sayacı tamamen siler
- Sayacı gizler
Cevabı göster

Sayacı sıfırdan başlatır — Doğru. counter-reset: page sayacı sıfırdan başlatır.
Her parçayı anlamına eşle

counter(page)

Sayfa numarası
counter-reset

Sayacı sıfırla
@bottom-center

Alt orta kutusu

Sıradaki ders: Özet - Yazdırılabilir rapor

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler