recherche

Maison  >  Article  >  interface Web  >  Comment créer une page Web imprimable à l'aide de requêtes multimédia CSS ?

Comment créer une page Web imprimable à l'aide de requêtes multimédia CSS ?

WBOY
WBOYavant
2023-09-10 08:21:02996parcourir

如何使用 CSS 媒体查询创建可打印的网页？

Nous pouvons créer une page Web imprimable et utiliser la propriété d'impression de la requête multimédia CSS @media print pour contrôler le style dans l'aperçu avant impression de la page. @media print est une requête multimédia CSS qui nous permet d'ajouter des styles de page à la page d'aperçu avant impression de n'importe quelle page Web. En utilisant cette fonctionnalité, nous pouvons créer des pages Web imprimables en spécifiant la « visibilité » des éléments HTML comme « visible » ou « masqué » en fonction d'une requête multimédia, nous pouvons également ajouter ce que nous voulons dans l'écran d'aperçu avant impression. Tout autre style de requête d'impression @media .

Grammaire

@media print {
   /* CSS Styles here */
}

Ici, @media print est la requête multimédia CSS que nous utiliserons pour ajouter des styles à la page d'aperçu avant impression.

Exemple 1

Dans cet exemple, nous afficherons le contenu de la balise "p" dans l'aperçu avant impression de la page Web en définissant la "visibilité" sur "visible" dans la requête CSS @media print. 

<html lang="en">
<head>
   <title>How to create printable webpage using CSS media queries?</title>
   <style>
      @media print {
         p {
            visibility: visible;
         }
      }
   </style>
</head>
<body>
   <h3>How to create printable webpage using CSS media queries?</h3>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil et rem quasi, iusto expedita modi saepe libero voluptatum. Alias explicabo cum et vel pariatur numquam facere fugiat consequatur necessitatibus laudantium!</p>
</body>
</html>

Exemple 2

Dans cet exemple, nous masquerons le contenu de la balise "p" dans l'aperçu avant impression de la page Web en définissant la "Visibilité" sur "Masquer" dans la requête CSS @media print. 

<html lang="en">
<head>
   <title>How to create printable webpage using CSS media queries?</title>
   <style>
      @media print {
         p {
            visibility: hidden;
         }
      }
   </style>
</head>
<body>
   <h3>How to create printable webpage using CSS media queries?</h3>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil et rem quasi, iusto expedita modi saepe libero voluptatum. Alias explicabo cum et vel pariatur numquam facere fugiat consequatur necessitatibus laudantium!</p>
</body>
</html>

Conclusion

Dans cet article, nous avons découvert la requête multimédia CSS @media print et l'avons utilisée pour créer une page Web imprimable à l'aide de deux exemples différents. Dans le premier exemple, nous affichons le contenu de la balise "p" dans la page d'aperçu avant impression, et dans le deuxième exemple, nous masquons le contenu de la balise "p" dans la page d'aperçu avant impression.

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!

css html print
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment changer la couleur des liens en CSS ?Article suivant：Comment changer la couleur des liens en CSS ?

Articles Liés

Voir plus