paramètres d'impression CSS

Avec le développement continu et les progrès du développement front-end, CSS3 est progressivement devenu un élément indispensable du développement Web moderne. Cependant, CSS3 n'est pas seulement adapté au rendu des navigateurs sur le Web, mais peut également être utilisé dans des scénarios non Web tels que l'impression et le PDF. Par conséquent, dans cet article, nous nous concentrerons sur l’explication des paramètres d’impression CSS afin qu’ils puissent être mieux appliqués dans le travail quotidien.

Avant de commencer à discuter des paramètres d'impression CSS, nous devons d'abord comprendre un terme : « requête multimédia ». La requête multimédia est un module important dans CSS3. Elle peut s'adapter à différents styles en fonction des caractéristiques de l'écran de l'appareil ou du périphérique de sortie pour obtenir un design réactif. En termes simples, les requêtes multimédias nous indiquent quel type de contenu le navigateur génère actuellement. Et cette information est également très importante pour notre impression.

Ensuite, nous le diviserons en trois sections pour développer les connaissances pertinentes sur les paramètres d'impression CSS.

1. Comment spécifier les styles d'impression

En CSS3, nous pouvons utiliser @media print pour spécifier un ensemble spécifique de styles d'impression. Dans cette media query, nous pouvons utiliser toutes les propriétés CSS pour spécifier le style souhaité du document lors de son impression.

L'utilisation spécifique est la suivante :

@media print {
/ Style d'impression /
}

Vous pouvez également utiliser la balise de lien pour charger la feuille de style d'impression spécifiée en tête du document :

< ;link rel="stylesheet" type="text/css" media="print" href="Print style.css" />

Notez que lors de la définition du style d'impression d'un document, vous ne devez pas utiliser l'affichage : aucun attribut, car cela entraînerait que l'élément ne s'affiche pas lors de l'impression. Nous devrions utiliser visibilité:hidden pour masquer des éléments, afin que cela n'affecte pas le formatage et la pagination du document.

2. Aperçu des paramètres d'impression courants

Certains contenus Web ne peuvent pas être imprimés directement sur papier lors de l'impression. À l'heure actuelle, nous avons besoin de ces paramètres d'impression courants.

2.1 Sauts de page

L'utilisation de CSS pour implémenter des sauts de page nous permet de mieux contrôler l'endroit où les pages sont interrompues. CSS fournit deux propriétés, page-break-before et page-break-after. Les valeurs de ces deux propriétés peuvent être automatiques, toujours, évitées ou héritées.

2.2 Impression horizontale

Parfois, nous devons imprimer des tableaux ou des graphiques plus larges horizontalement. Dans ce cas, nous devons utiliser l'attribut rotate dans CSS3. L'attribut de rotation peut faire pivoter un élément d'un certain angle autour d'un point central, et des valeurs négatives peuvent être utilisées pour réaliser une impression horizontale.

@media print {
body {

transform:rotate(-90deg);
transform-origin:top left;

}
}

2.3 Ajuster la taille de la page

La taille de page par défaut pour HTML et CSS est le format A4, mais sur certaines imprimantes, des pages plus petites ou plus grandes peuvent être requises. Dans ce cas, nous pouvons utiliser l'attribut page en CSS3 :

@media print {
@page {

size: A5 landscape;

}
}

Ici, nous définissons la taille de la page sur du papier A5 en orientation paysage.

3. Techniques d'optimisation de l'impression

Dans le processus de développement réel, afin d'améliorer l'effet d'impression, vous pouvez utiliser certaines techniques d'optimisation de l'impression :

3.1 Utilisation du texte

Lors de l'impression, nous. Certains textes peuvent être utilisés à la place d'icônes ou d'autres éléments graphiques. Bien que ce type de texte ne soit pas aussi intuitif qu’une icône, il peut améliorer l’impression en noir et blanc.

3.2 Supprimer les éléments redondants

Il y a généralement des éléments inutiles en tête ou à la fin du document, tels que les menus de navigation, les pieds de page, etc. Ces éléments sont susceptibles d’avoir un impact négatif sur l’esthétique du style de la page à l’impression. Par conséquent, lors de l’impression, nous devons supprimer ces éléments redondants.

3.3 Zoom sur la page

Parfois, nous devons réduire la page afin de pouvoir mettre plus d'informations sur une seule page. En fonctionnement réel, nous pouvons utiliser CSS pour réaliser la mise à l'échelle des pages.

@media print {
body {

zoom: 0.8;

}
}

En définissant la valeur de l'attribut zoom, vous pouvez zoomer sur la page.

Ici, nous répertorions uniquement quelques paramètres d'impression CSS et techniques d'optimisation couramment utilisés. Dans le développement réel, nous devons également mener une série de tentatives et de pratiques en fonction des besoins. De manière générale, maîtriser la méthode de paramétrage d'impression CSS peut nous rendre plus à l'aise dans le développement Web et mieux nous adapter aux besoins en constante évolution des utilisateurs.

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!