Utilisez jquery CSS pour contrôler l'impression style_jquery

1. Ajouter un style d'impression

1. Préparez un fichier CSS pour l'affichage et l'impression à l'écran, comme indiqué ci-dessous :
css pour l'affichage à l'écran :
css pour l'impression :

2. Méthode d'importation :

3. Écrivez directement le style d'affichage de l'écran et le style d'impression dans un fichier CSS :
@media imprimer {}{
h1 {
couleur : noir ;
>
h2 {}{
couleur : gris ;
>
>
Le contenu de @media print n'est valable que pour le contenu imprimé, et l'autre contenu est le style d'affichage à l'écran.

Autres :
Il est souvent utile de créer une feuille de style qui ne spécifie pas de type de média (ou qui utilise media="all"). Quand tu es prêt à définir quelque chose de spécial
En ce qui concerne les règles d'impression, vous pouvez simplement créer une feuille de style distincte et désactiver tous les styles qui ne semblent pas bons une fois imprimés. L'un des problèmes liés à l'utilisation de cette approche est que vous devez vous assurer que les styles d'imprimante remplacent réellement la feuille de style principale. C'est prêt à l'emploi ! important.

2. Remarques sur le style d'impression :

1. Il n'est pas recommandé d'utiliser l'arrière-plan dans les styles d'impression, car le navigateur ne peut pas imprimer le contenu de l'arrière-plan en CSS par défaut. Il ne peut être utilisé que lorsque le navigateur est
. L'arrière-plan ne peut être imprimé que lorsque l'arrière-plan peut être configuré pour être imprimé (facultatif dans les options avancées d'IE). Même si l'arrière-plan s'imprime, il peut submerger le texte qui y est superposé.
Cela est particulièrement vrai pour le texte qui contraste fortement sur un écran avec un fond coloré, mais qui se fond dans ce fond lorsqu'il est imprimé sur une imprimante noir et blanc.
arrière-plan : aucun ; supprimer l'arrière-plan
Images et couleurs.

Vous pouvez utiliser l'attribut background-color pour définir la couleur d'arrière-plan sur blanc, comme ceci : font-family: Arial; line-height: 26px;"> Vous pouvez également obtenir le même effet en utilisant le raccourci d'arrière-plan : fond : blanc. Donc comme fond : blanc ;
Une telle déclaration non seulement définit la couleur d’arrière-plan sur le blanc, mais élimine également toutes les images d’arrière-plan. Utilisez l'attribut raccourci de cet arrière-plan,
Vous obtenez deux choses : définir un arrière-plan blanc et éliminer l'image - avec très peu de code.

2. Si vous souhaitez que des images apparaissent dans le contenu imprimé, veuillez les ajouter dans le code HTML.

3. Les paramètres d'impression utilisent des unités physiques, il est donc préférable de ne pas utiliser de pixels (px) pour la taille. Vous pouvez utiliser pt ou cm ;

4. Masquez le contenu inutile ou secondaire. affichage : aucun ;

5. Essayez de ne pas laisser le contenu flotter. Certains navigateurs provoqueront des problèmes lors de l'impression de div flottants, ce qui nécessite une attention particulière.

N'utilisez pas de blocs flottants dans les feuilles de style imprimées, comme ceci : float: none;. Par exemple, un navigateur basé sur Gecko
(comme Netscape 6), lorsque l'utilisateur l'utilise pour parcourir une page d'impression, le contenu de l'élément flottant est tronqué.
Le contenu ne sera pas envoyé à l'imprimeur et il n'y en aura aucune trace sur la page suivante - il disparaîtra.

6. Faites de votre mieux pour donner la priorité au contenu important dans le code HTML, ce qui peut éviter bien des problèmes dans le style d'impression.

7. L'impression est différente des pages Web. Lors de l'impression, des marges blanches doivent être laissées et l'unité est en pouces (pouces).

8. Pour vous assurer que tout le texte de la page s'imprime en noir, utilisez un sélecteur de caractère générique (voir page 54) et !important pour créer une variable qui sépare chaque

Les tags sont tous formatés avec un seul style de texte noir :
*{ couleur : ##000# !important }

9. Afficher les informations sur l'URL du lien lors de l'impression : utilisez un sélecteur avancé : after et une propriété CSS avancée appelée content,

Imprime le texte qui n'est pas affiché à l'écran à la fin d'un élément de style.
Malheureusement, les astuces du sélecteur :after et des attributs de contenu ne fonctionnent pas sur Internet Explorer 6 ou version antérieure
(Au moment d'écrire ces lignes, cela ne fonctionne pas non plus sur IE 7). Mais cela fonctionne sur Firefox et Safari, donc vous avez au moins la clarté
Décrivez l'URL afin que les visiteurs puissent utiliser leur navigateur.

Pour ce faire, ajoutez un style à la feuille de style d'impression qui imprime l'URL après chaque lien. Vous pouvez même ajouter des éléments de texte supplémentaires

Utilisez des parenthèses pour améliorer l'apparence :
a:après {content: " (" attr(href) ") ";}

Cependant, ce CSS ne fait pas de différence entre les liens externes ou internes, il imprime donc également des informations inutiles relatives
aux autres pages du même site Web. Lien du document : "Visitez la page d'accueil (../../index.html)." Avec un peu de magie CSS 3, vous pouvez forcer ce style à taper uniquement
Imprimez les URL absolues (c'est-à-dire celles commençant par http://), comme ceci :
a[href^="http://"]:after {content: " (" attr(href) ") ";}

10. Ajoutez des sauts de page à l'impression : deux attributs largement reconnus sont le saut de page avant et le saut de page après.
page-break-before indique au navigateur Web d'insérer un saut de page avant un style spécifié. Utilisez le saut de page avant
La propriété entraîne l'impression de l'image sur une nouvelle page et son ajustement sur la page entière.
Pour qu'un élément apparaisse comme le dernier élément de la page imprimée, ajoutez page-break-after: toujours au style de cet élément.

Créez deux styles de classe, nommés comme .break_after et .break_before, comme ceci :
.break_before { page-break-before : toujours >
.break_after { page-break-after : toujours >

Vous pouvez ensuite appliquer sélectivement ces styles aux éléments qui doivent s'imprimer en haut ou en bas de la page.

3. Testez le style d'impression

Normalement, il nous est impossible d'utiliser une imprimante pour les tests. Il y a un "Aperçu avant impression" dans la barre de menu "Fichier" du navigateur IE, qui peut être utilisé
. Aperçu avant impression pour tester.