Comment changer la couleur du texte sélectionné en utilisant CSS ?

WBOY

Libérer： 2023-08-26 14:33:02

avant

3063 Les gens l'ont consulté

如何使用 CSS 更改选定文本的颜色？

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;
}

Copier après la connexion

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>

Copier après la connexion

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;
}

Copier après la connexion

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>

Copier après la connexion

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!