Couleur de sélection CSS
Syntaxe
:: Sélection// Déclaration CSS
Exemple n ° 1: Modification de la couleur du texte sur la sélection
Nous devons écrire du code HTML pour modifier la couleur ou la couleur d'arrière-plan du texte lorsque le texte est sélectionné. Ici, pour effectuer ces exemples, nous utilisons le code Visual Studio. En conséquence, nous ouvrons le nouveau fichier dans ce logiciel et choisissons la langue «HTML», résultant en un fichier HTML. Ensuite, nous commençons à coder dans ce fichier. Dans notre fichier HTML, nous créons un «div» nommé «D1», puis nous avons une rubrique et un paragraphe dans ce «div», comme indiqué ci-dessous. Maintenant, nous nous concentrons sur la modification de la couleur du texte sélectionné à l'aide du sélecteur de «sélection», donc pour cela, nous allons passer au code CSS où nous utilisons ce sélecteur de «sélection» et vérifiez son travail dans la sortie.
Nous utilisons ici le sélecteur de «sélection», tout comme quelques changements dans la couleur du texte. Nous allons suivre la syntaxe de ce sélecteur de «sélection», et ici vous pouvez voir que nous utilisons deux colons avant le sélecteur de sélection et placer «H1» au début, car nous voulons appliquer la couleur donnée sur le cap lorsque le Le texte de l'en-tête est sélectionné par l'utilisateur. Ici, nous utilisons «H1» puis plaçons deux colons «::» et après cela, nous utilisons «Sélection».
Maintenant, à l'intérieur, nous utilisons la propriété de CSS, qui est la propriété «couleur», et cette propriété modifiera la couleur du texte lors de sa sélection. Ainsi, nous modifions le texte sélectionné «Couleur» en «bleu» pour le titre 1. Après cette rubrique, nous avons également un paragraphe, nous voulons donc également changer la «couleur» du texte du paragraphe sur la sélection. Nous mettons «P» ici, et encore une fois, nous utilisons le sélecteur «sélection» pour changer le texte de couleur en une couleur «rouge» lorsqu'il est sélectionné.
Vérifions comment cela fonctionne et la couleur du texte change sur la sélection dans les sorties ci-dessous. Dans la première sortie, vous pouvez voir que la couleur de texte sélectionnée de l'en-tête apparaît en bleu lorsque nous la réglons dans le sélecteur de sélection ci-dessus dans le code CSS.
Vient maintenant la deuxième sortie, et ici vous pouvez voir la couleur du texte du paragraphe sélectionné qui apparaît «rouge» ici. Le texte noir est converti en rouge lorsque nous sélectionnons le texte de ce paragraphe.
Exemple n ° 2: Modification de la couleur d'arrière-plan du texte sur la sélection
Nous utilisons le même code HTML dans cet exemple, mais ici dans le CSS, nous allons changer la couleur de l'arrière-plan du texte lorsqu'il est sélectionné. Nous allons également utiliser le sélecteur de «sélection» dans cet exemple.
Nous utilisons «H1» puis placons «::» et le sélecteur «sélection». Comme, ici, nous devons modifier la couleur d'arrière-plan du texte sur la sélection, nous utilisons donc la propriété «fond de fond» ici. Lorsque nous utilisons cette propriété à l'intérieur du sélecteur de sélection, il modifiera la couleur d'arrière-plan du texte en fonction de la couleur que nous avons sélectionnée ici. Dans le code, vous pouvez voir que nous utilisons «jaune» comme couleur d'arrière-plan du texte sélectionné pour la tête. Ensuite, nous allons modifier la couleur du fond du paragraphe. Ainsi, nous utilisons à nouveau le sélecteur «sélection» avec «P» et déclarons la propriété «Color d'arrière-plan» et choisissons la couleur «gris» pour l'arrière-plan de texte de ce paragraphe.
La couleur d'arrière-plan du texte d'en-tête est visible ici dans la sortie ci-dessous. Lorsque nous sélectionnons l'en-tête, la couleur de fond passe du blanc au jaune. Ce changement est juste à cause du sélecteur de «sélection» que nous avons utilisé.
Le changement dans la couleur d'arrière-plan du texte sélectionné dans le paragraphe est illustré ci-dessous, et vous pouvez remarquer que sa couleur d'arrière-plan se transforme en couleur «gris» lorsque ce texte est sélectionné.
Exemple n ° 3
Ici, nous avons fait une rubrique, un paragraphe et une div dans cet exemple et nous allons appliquer la même couleur d'arrière-plan et la couleur du texte lorsque nous sélectionnons tout texte dans tous ces éléments.
Dans cet exemple, nous n'avons donné aucun nom de sélecteur avant le double côlon «::» du sélecteur «sélection» parce que nous voulons donner la même couleur de texte et la même couleur d'arrière-plan à tous ces textes lorsqu'il est sélectionné, qu'il s'agisse d'un rupture ou paragraphe. Nous mettons simplement le «::» et le sélecteur «sélection», puis utilisons deux propriétés ici.
La sortie montre que les deux couleurs changent sur la sélection du texte. La couleur d'arrière-plan apparaît jaune et la couleur du texte apparaît rouge lorsque nous sélectionnons le texte. Aussi, la même dans le cas de la tête.
Exemple n ° 4
Dans le code ci-dessous, nous créons plusieurs paragraphes en utilisant différents noms, puis appliquant différentes couleurs de l'arrière-plan ou du texte à chaque paragraphe lorsque nous sélectionnons tout texte du paragraphe. Tous ces styles seront effectués dans CSS.
Le ".P1 ”est utilisé ici, qui définit le nom du paragraphe, puis nous utilisons le sélecteur de« sélection »avec ce. Nous changeons la couleur de la police de «P1» en «bleu», donc il devient bleu lorsqu'il est sélectionné. Ensuite, nous avons «P2», et nous changeons sa «couleur d'arrière-plan» en «jaune» lorsque le texte est sélectionné. Vient maintenant «P3», nous utilisons à nouveau le sélecteur de «sélection» et changeons son «arrière-plan» en «rouge."
Après cela, «P4» est mentionné avec le sélecteur de «sélection», et nous changeons la «couleur arrière-plan» ainsi que la «couleur» de la police à «violet» et «blanc», respectivement. Nous changeons le «Text-shadow» de «P5» en «1px 1px rouge». Il créera une ombre de couleur «rouge» lorsque nous sélectionnons le texte de «P5». Ensuite, nous utilisons «P6» avec ce sélecteur de «sélection» et utilisons «l'arrière-plan», qui modifie son arrière-plan et y établit le noir apparaîtra «noir» lorsque son texte est sélectionné. Nous stylisons également tous ces paragraphes sans sélection, nous utilisons donc le «corps» et toutes les propriétés que nous utilisons ici seront appliquées à tous les paragraphes et en titres. Nous utilisons la «Font-Family» et la définissons sur «Sans-Serif», donc tout le texte apparaît dans ce format. Nous avons réglé sa «hauteur de ligne» sur «1.45 ”et« Color en arrière-plan »à« Pink Light.«Nous utilisons également« rembourrage »ici, qui est sélectionné comme« 1EM ». La «taille de police» pour tous les paragraphes est «20px», ainsi.
Nous montrons ici deux ou trois captures d'écran de sortie, et vous pouvez remarquer le changement dans la couleur de la police et la couleur d'arrière-plan lorsque le texte est sélectionné. Tout cela est dû au sélecteur de «sélection».
Conclusion
Dans ce guide, nous avons exploré le concept du sélecteur de «sélection». Comme nous avons discuté que ce sélecteur de «sélection» est utilisé pour modifier la couleur de la police et également la couleur d'arrière-plan lorsque l'utilisateur sélectionne le texte sur lequel le sélecteur de «sélection» est appliqué. Nous avons élaboré plusieurs exemples ici dans lesquels nous avons utilisé ce sélecteur de «sélection». J'espère que vous comprendrez ce sélecteur de «sélection» après avoir parcouru ce guide, et cela vous aidera beaucoup dans vos projets ou sites Web.