CodeBlanks Logo Icon CodeBlanks

Sayfa numarası

CSS kursu · İleri seviye · Ders 41/52

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

  1. 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.

  2. Sayfa numarasını alt ortaya koy

    @page {
      @bottom-center {
        content: ____;
      }
    }
    Cevabı göster
    @page {
      @bottom-center {
        content: counter(page);
      }
    }
  3. 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.

  4. Her parçayı anlamına eşle

    counter(page)
    Sayfa numarası
    counter-reset
    Sayacı sıfırla
    @bottom-center
    Alt orta kutusu

İleri seviye bölümündeki tüm dersler