Comment masquer des éléments en CSS

PHPz

Libérer： 2023-04-23 17:28:02

original

621 Les gens l'ont consulté

CSS consiste à maîtriser l'anglais dans les pages Web, donc le masquage CSS ne masque pas l'intégralité de l'élément, mais masque l'élément lors de l'impression. Lors de l’impression d’une page Web, nous devons ajuster le style pour qu’elle s’affiche correctement sur le papier. Cependant, il existe des situations dans lesquelles nous pouvons ne pas vouloir imprimer certains éléments d'une page Web. Heureusement, CSS offre un moyen de masquer ces éléments.

Étape 1 : Définissez les classes CSS pour les éléments que vous souhaitez masquer.
Tout d'abord, nous devons créer une classe CSS pour masquer l'élément que nous voulons masquer. Par exemple, si nous voulons masquer un élément div avec l'ID « header », nous pouvons créer une classe appelée « no-print » pour le masquer. Nous pouvons ajouter le style suivant au fichier CSS :

.no-print {
display: none;
}

Ce style masquera tous les éléments auxquels cette classe "no-print" est appliquée.

Étape 2 : appliquez les classes CSS aux éléments que vous souhaitez masquer
Nous devons maintenant appliquer la classe « no-print » aux éléments que nous voulons masquer.

En-tête ici

Ceci est la section d'en-tête.

L'élément div dans le code ci-dessus est visible sur la page Web, mais ne sera pas imprimé lors de l'impression car il utilise la catégorie "no-print", qui masque l'élément lors de l'impression.

Étape 3 : Testez l'effet d'impression
Nous pouvons tester si l'impression masque avec succès les éléments dans l'aperçu avant impression. Si le masquage réussit, les éléments marqués comme « non-impression » ne seront pas imprimés lors de l'impression de la page.

Il est important de noter que ce masquage n'est pas parfait, car certains utilisateurs avancés peuvent utiliser des outils de développement pour compenser nos styles cachés. Cependant, pour la plupart des utilisateurs, cette méthode reste un moyen viable de masquer des éléments de page Web.

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!