Maison interface Web js tutoriel Utilisez jquery CSS pour contrôler l'impression style_jquery

Utilisez jquery CSS pour contrôler l'impression style_jquery

May 16, 2016 pm 04:22 PM
css 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.

Déclaration de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser Bootstrap en Vue Comment utiliser Bootstrap en Vue Apr 07, 2025 pm 11:33 PM

L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.

Les rôles de HTML, CSS et JavaScript: responsabilités de base Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Comment écrire des lignes fendues sur bootstrap Comment écrire des lignes fendues sur bootstrap Apr 07, 2025 pm 03:12 PM

Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.

Comprendre HTML, CSS et JavaScript: un guide pour débutant Comprendre HTML, CSS et JavaScript: un guide pour débutant Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

Comment redimensionner le bootstrap Comment redimensionner le bootstrap Apr 07, 2025 pm 03:18 PM

Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-

Comment utiliser le bouton bootstrap Comment utiliser le bouton bootstrap Apr 07, 2025 pm 03:09 PM

Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton

Comment configurer le cadre de bootstrap Comment configurer le cadre de bootstrap Apr 07, 2025 pm 03:27 PM

Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.

Comment insérer des photos sur bootstrap Comment insérer des photos sur bootstrap Apr 07, 2025 pm 03:30 PM

Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.

See all articles