Définir l'impression CSS

SET PRINT CSS

Avec l'avènement de l'ère Internet, les documents papier ont progressivement été remplacés par des documents électroniques, mais dans certaines situations particulières, comme les examens scolaires, l'approbation de documents officiels, etc. , les documents papier jouent toujours un rôle important. Dans ce cas, nous devons réfléchir à la manière de présenter le contenu Web de manière élégante sur des documents papier, et ce processus doit suivre certaines règles, à savoir l'impression de feuilles de style CSS.

La feuille de style CSS est un ensemble de règles utilisées pour définir l'apparence, la position et le comportement des éléments HTML dans différents états, y compris les feuilles de style d'écran et les feuilles de style d'impression. Une feuille de style d'impression est une feuille de style spécialement conçue pour l'impression. Elle permet de mieux contrôler la taille, la position et la disposition des éléments sur la page imprimée, afin que les documents papier soient mieux présentés.

Alors comment mettre en place la feuille de style CSS d'impression ? Ci-dessous, je vais le présenter sous les trois aspects suivants :

1. Paramètres de base

Lors de la configuration de l'impression CSS, nous devons prendre en compte les points suivants :

# 🎜 🎜#

Les feuilles de style d'impression doivent être définies dans des fichiers HTML.
1. Les feuilles de style d'impression doivent être définies après les feuilles de style d'écran.
2. Les feuilles de style d'impression doivent être définies à l'aide de @media print.

Le modèle de base est le suivant :

@media print {

/

Définissez ici le style d'impression# 🎜🎜# /}

S'il existe plusieurs exigences de style d'impression, vous pouvez utiliser les règles @page pour les définir. Par exemple, si vous devez définir l'en-tête de la page sur le nom de l'entreprise, vous pouvez utiliser le code suivant :

@page {

@top {#🎜🎜 #

content : "Nom de l'entreprise" ;

}

}

2. Disposition des éléments de la page

#🎜 🎜#Pour les documents papier Autrement dit, la disposition des éléments de la page est très importante. Nous devons garantir la lisibilité et l’esthétique des documents papier. Pour les feuilles de style CSS à imprimer, les points suivants doivent être notés :

Le mélange du chinois et de l'anglais doit être traité

en chinois et Anglais Dans le cas d'une mise en page mixte, nous devons faire attention aux différentes tailles de polices chinoises et anglaises. Habituellement, définir la police anglaise sur la moitié de la police chinoise peut rendre la page plus propre.
1. body {

font-family: Arial, Helvetica, sans-serif;

}

body.zh {

font-family: "宋体", Arial, Helvetica, sans-serif;

}

body.zh p {#🎜🎜 #

line-height: 1.6em;

}

body.en {

font-size: 12px;#🎜🎜 #

}

body.en p {

line-height: 1.2em;

}

#🎜🎜 #

La largeur de la page doit tenir compte de la taille du papier

Pour l'impression, nous devons ajuster la largeur de la page pour l'adapter au papier, généralement du papier A4 d'une largeur de 210 mm , alors définissez la page. Une largeur d'environ 200 mm est le meilleur choix.

Essayez d'éviter la troncature du texte

Lors de l'impression, si une ligne de texte est trop longue, une troncature se produira afin d'éviter cela. Dans cette situation, nous pouvons utiliser l'attribut word-break pour envelopper automatiquement le texte.

p {

3. word-break: break-all;

}

3. Cacher et afficher des éléments # 🎜🎜#

Dans les pages web, on utilise généralement l'attribut display pour définir le mode d'affichage des éléments, mais pour l'impression, l'affichage de certains éléments nécessite un traitement particulier. Les éléments suivants doivent être masqués ou affichés :

Masquer la barre de navigation de la page et la mention de copyright en bas de la page

@ impression multimédia {#🎜 🎜#

.navbar,

.navbar-default,

1. .navbar-right,

.footer {

affichage : aucun ; 🎜🎜#Nous utilisons généralement des icônes pour représenter les liens sur les pages Web, mais lors de l'impression, ces icônes ne sont pas faciles à afficher, vous pouvez donc utiliser a::after pour remplacer le texte .

a[href]:after {

content: "(" attr(href) ")";

}

# 🎜🎜#

Afficher le sous-titre

Lors de l'impression, le sous-titre de l'article est généralement affiché sous le titre principal.

h2 {

display: block;
2. position: static;

page-break-after: toujours;

}

Pour résumer, le paramétrage de l'impression de la feuille de style CSS contribue non seulement à la beauté et à la lisibilité des documents papier, mais est aussi une expression à la mode. Pour les développeurs front-end, la maîtrise de la configuration des feuilles de style CSS d’impression est une compétence très nécessaire. J'espère que cet article vous a inspiré.

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!