Maison > interface Web > tutoriel CSS > Introduction à la façon dont CSS embellit le texte sélectionné

Introduction à la façon dont CSS embellit le texte sélectionné

高洛峰
Libérer: 2017-03-08 15:20:19
original
1566 Les gens l'ont consulté

Le rôle du CSS est d'embellir le contenu ou la hiérarchie structurelle des pages Web. Nous le savons tous, n'est-ce pas ? Grâce à l'innovation et à la mise à niveau continues de la technologie CSS, nous avons acquis une plus grande capacité à contrôler les styles. Une technique peu connue consiste à embellir le style du texte sélectionné dans le navigateur. Windows lui-même offre une vilaine couleur vert foncé, tandis que les ordinateurs Apple offrent une couleur vert clair. Firefox, IE9, Opera et Google Chrome nous permettent de personnaliser la couleur du texte sélectionné. Laissez-moi vous montrer :

Code CSS

/* webkit, opera, IE9 */
::selection { background:lightblue; }   
/* mozilla firefox */
::-moz-selection { background:lightblue; }
Copier après la connexion

-moz-property le préfixe est pour Firefox, et le sélecteur de sélection de base :: est destiné à Google pour une utilisation dans le navigateur. Comme les autres sélecteurs CSS, vous pouvez les imbriquer pour afficher différentes couleurs à différents endroits :

/* webkit, opera, IE9 */
p.highlightBlue::selection { background:lightblue; }   
/* mozilla firefox */
p.highlightBlue::-moz-selection { background:lightblue; }   

/* webkit, opera, IE9 */
p.highlightPink::selection { background:pink; }   
/* mozilla firefox */
p.highlightPink::-moz-selection { background:pink; }
Copier après la connexion

Embellir le texte sélectionné avec CSS n'est qu'une technique très simple, mais celles-ci peuvent rendre les pages de votre site Web plus magnifique et coloré !

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde soutiendra le site Web PHP chinois.



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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal