Maison > Article > interface Web > Comment changer la couleur du texte sélectionné en utilisant CSS ?
Comment changer la couleur du texte sélectionné en utilisant CSS ?
- WBOYavant
- 2023-08-26 14:33:023059parcourir
Le style du texte sur un site Web est un aspect important de la conception et du développement Web. Pour cela, CSS (Cascading Style Sheets) est un outil puissant à votre disposition. CSS est un outil polyvalent qui permet de manipuler l'apparence du texte de différentes manières. L'une des techniques les plus recherchées consiste à changer la couleur du texte sélectionné. Dans cet article, nous apprendrons deux techniques pour changer la couleur du texte sélectionné à l'aide de CSS.
::Sélectionnez un pseudo-élément
Le pseudo-élément::selection est une fonctionnalité puissante qui nous permet de sélectionner et de styliser le texte actuellement mis en surbrillance par l'utilisateur. Pour changer la couleur du texte sélectionné, nous utilisons la propriété color. Par exemple, si nous voulions que le texte sélectionné apparaisse marron, nous utiliserions le CSS suivant -
::selection {
color: red;
}
Cela changera la couleur du texte sélectionné de toute la page Web en rouge.
Exemple
L'exemple suivant change la couleur du texte sélectionné en rouge et la couleur d'arrière-plan en noir.
<html >
<head>
<title>Change the color of selected text using CSS?</title>
<style>
::selection {
color: red;
background-color:black;
}
</style>
</head>
<body>
<h2>Changing the color of selected text using CSS</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting</p>
</body>
</html>
En utilisant un élément ou une classe spécifique
Nous pouvons changer la couleur et la couleur d'arrière-plan du texte sélectionné sur un élément ou une classe spécifique. Par exemple, nous pouvons changer la couleur du texte sélectionné à l'intérieur d'une balise "h1" spécifique en utilisant le CSS suivant -
h1::selection {
background: red;
color: white;
}
Cela changera la couleur du texte sélectionné dans l'élément h1 en blanc et la couleur d'arrière-plan du texte sélectionné en rouge.
Exemple
L'exemple suivant change la
couleur du texte sélectionnée en blanc et la couleur d'arrière-plan en rouge, le texte en rouge et la couleur d'arrière-plan en jaune,
le texte en bleu et la couleur d'arrière-plan en rose.
<html>
<title>Change the color of selected text using CSS</title>
<style>
h1::selection {
background: red;
color: white;
}
h2::selection {
background: yellow;
color: red;
}
p::selection {
background: pink;
color: blue;
}
</style>
</head>
<body>
<h1>Welcome to tutorialsPoint</h1>
<h2>Change the color of selected text using CSS</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting</p>
</body>
</html>
Conclusion
Changer la couleur du texte sélectionné à l'aide de CSS est une tâche simple et peut être accomplie en tirant parti du pseudo-élément ::selection. En utilisant les propriétés color et background-color, nous pouvons modifier l'apparence du texte sélectionné sur notre site Web. De plus, nous pouvons utiliser le pseudo-élément ::selection sur un élément ou une classe spécifique pour avoir un contrôle plus précis sur le style du texte sélectionné.
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!