Maison >interface Web >tutoriel CSS >Comment puis-je ajouter des numéros de page à la sortie d'impression de mon site Web à l'aide de CSS ?

Comment puis-je ajouter des numéros de page à la sortie d'impression de mon site Web à l'aide de CSS ?

Linda Hamilton
Linda Hamiltonoriginal
2024-11-29 08:48:09937parcourir

How Can I Add Page Numbers to My Website's Print Output Using CSS?

Impression des numéros de page avec CSS/HTML

Lors de l'impression d'un site Web, l'ajout d'un en-tête et d'un pied de page avec des numéros de page peut améliorer la lisibilité du document et l'organisation. Pour y parvenir, CSS fournit une solution puissante qui permet de personnaliser la sortie imprimée.

Pour ajouter un en-tête et un pied de page, vous pouvez utiliser la règle @page avec la propriété @bottom-right. Par exemple, la déclaration CSS suivante ajoutera des numéros de page dans le coin inférieur droit de chaque page imprimée :

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

Dans cette déclaration :

  • counter(page) représente le courant numéro de page.
  • counter(pages) représente le nombre total de pages.

En combinant la propriété content avec celles-ci compteurs, vous pouvez afficher dynamiquement le numéro de page actuel sur le nombre total de pages.

Support du navigateur

La règle @page a une prise en charge variable du navigateur en fonction de ses propriétés. Les navigateurs comme Chrome et Firefox prennent entièrement en charge @en bas à droite pour les numéros de page. Internet Explorer nécessite une cale pour implémenter cette fonctionnalité. Il est recommandé de consulter la dernière documentation de support du navigateur pour obtenir des informations spécifiques.

Lectures complémentaires

Pour des informations plus détaillées et des exemples, reportez-vous aux ressources suivantes :

  • Module de page CSS W3C : http://www.w3.org/TR/css3-page/
  • Ajouter Numéros de page utilisant la propriété de page CSS : http://www.intelligrape.com/blog/2010/08/20/add-page-number-using-page-property-of-css/
  • Numéros de page dans Prince XML : http://www.princexml.com/doc/6.0/page-numbers/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn