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

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

WBOY

Libérer： 2023-09-10 08:21:02

avant

1008 Les gens l'ont consulté

如何使用 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 */
}

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!