CSS를 사용하여 내 웹사이트의 인쇄 출력에 페이지 번호를 어떻게 추가할 수 있습니까?

CSS/HTML로 페이지 번호 인쇄

웹사이트를 인쇄할 때 페이지 머리글과 바닥글에 페이지 번호를 추가하면 문서의 가독성을 높일 수 있습니다. 그리고 조직. 이를 달성하기 위해 CSS는 인쇄된 출력을 사용자 정의할 수 있는 강력한 솔루션을 제공합니다.

페이지 머리글과 바닥글을 추가하려면 @bottom-right 속성과 함께 @page 규칙을 사용할 수 있습니다. 예를 들어, 다음 CSS 선언은 인쇄된 각 페이지의 오른쪽 하단에 페이지 번호를 추가합니다.

@page {
  @bottom-right {
    content: counter(page) " of " counter(pages);
  }
}

이 선언에서:

• counter(page)는 현재 페이지를 나타냅니다. 페이지 번호.
• counter(pages)는 총 페이지 수를 나타냅니다.

By 콘텐츠 속성을 이러한 카운터와 결합하면 총 페이지 수 중 현재 페이지 번호를 동적으로 표시할 수 있습니다.

브라우저 지원

@page 규칙에는 다양한 브라우저가 있습니다. 속성에 따라 지원됩니다. Chrome 및 Firefox와 같은 브라우저는 페이지 번호에 대해 @bottom-right를 완벽하게 지원합니다. Internet Explorer에서 이 기능을 구현하려면 shim이 필요합니다. 특정 정보는 최신 브라우저 지원 문서를 확인하는 것이 좋습니다.

추가 자료

자세한 정보와 예는 다음 리소스를 참조하세요.

• W3C CSS 페이지 모듈: http://www.w3.org/TR/css3-page/
• CSS 페이지 속성을 사용하여 페이지 번호 추가: http://www.intelligrape.com/blog/2010/08/20/add- page-number-using-page-property-of-css/
• Prince XML의 페이지 번호: http://www.princexml.com/doc/6.0/page-numbers/

위 내용은 CSS를 사용하여 내 웹사이트의 인쇄 출력에 페이지 번호를 어떻게 추가할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!