Sélection de l'utilisateur CSS
Exemple 1
Pour commencer, nous créons un nouveau fichier dans le logiciel, qui dans ce guide est le code Visual Studio. Lorsque nous créons un nouveau fichier, nous pouvons choisir la langue et sélectionner HTML. Le code HTML doit ensuite être créé. Le code Visual Studio nous permet d'acquérir instantanément les étiquettes fondamentales en entrant "!"Puis cliquer sur" Entrer ". Ainsi, nous profitons de cette capacité et collectons toutes ces balises fondamentales. Nous utiliserons la propriété utilisateur-sélectionne dans CSS et lierons ce fichier au fichier CSS en ajoutant la balise "lien" dans la balise de tête HTML. Nous avons une rubrique simple et une div dans ce code HTML. Nous écrivons également du texte à l'intérieur de la balise de tête «H1» et aussi dans la balise «div». Après avoir terminé ce code, enregistrez-le et passez au fichier CSS. Maintenant, nous appliquerons la propriété «utilisateur-sélection» à ces textes dans le fichier CSS.
Nous sélectionnons «RVB» comme «couleur» de la tête et les valeurs que nous utilisons ici sont «RVB (16, 100, 8)» qui représente la couleur de l'ombre «vert». Ensuite, «Algerien» est sélectionné comme «Font-Family» et nous décorons également cette rubrique en mettant «souligner» ici. Nous ajoutons cette «soulignement» en utilisant la propriété «text-decoration». Nous sélectionnerons ce texte de titre en double-cliquez dessus car nous n'utilisons aucune propriété «utilisateur-sélection» à cette rubrique. La valeur par défaut de cette propriété est «Auto». Nous ne venons que «aucun» comme valeur de cette propriété «utilisateur-sélection» pour l'élément «div».
Nous allons placer la propriété «Webkit-user-select» car Chrome ne prend en charge ce préfixe et définit sa valeur sur «aucun». Ensuite, nous utilisons le «MS-User-Select» qui est utilisé pour spécifier la valeur du mot-clé qui est «aucun». Cela signifie que l'utilisateur ne pourra pas sélectionner le texte qui est écrit à l'intérieur du div. Nous utilisons également uniquement la propriété «utilisateur-sélection» et la définissons sur «Aucun». Maintenant, lorsque cet élément div apparaît à l'écran, l'utilisateur ne sélectionnera pas l'élément div au texte.
La sortie de ce code montre qu'il n'y a pas de texte sélectionné affiché dans cette image car il ne permet pas à l'utilisateur de sélectionner le texte du div. Cela est dû à la valeur «Aucun» de la propriété «utilisateur-sélection».
Exemple 2
Nous avons une rubrique simple et une div ici. Nous incluons également du texte dans la balise de cap «H1» ainsi que la balise «div». Maintenant, nous appliquerons la propriété «utilisateur-sélection» sur ce texte div.
Nous avons choisi «RVB» comme «couleur» de la tête, et les chiffres que nous avons choisis sont «RVB (87, 23, 4)», qui est la couleur de l'ombre «brune». Ensuite, nous choisissons «Algérien» comme «Font-Family», et nous ajoutons également «souligner» à cette rubrique. Pour l'élément «Div», nous définissons simplement la propriété «utilisateur-sélection» sur «Auto». Nous utilisons ici la propriété «Webkit-user-select» parce que Chrome n'autorise ce préfixe et modifie sa valeur à «Auto».
Ensuite, nous utilisons «MS-User-Select» pour spécifier la valeur du mot-clé, qui est «automatique» dans ce cas. Nous indiquons également que l'utilisateur sera autorisé à sélectionner le texte en double-cliquez dessus qui est mis à l'intérieur du div. Nous définissons également la propriété «utilisateur-sélection» sur «Auto». Lorsque cet élément div apparaît à l'écran, l'utilisateur sélectionnera ce texte en double-cliquant. Ensuite, nous définissons la valeur «20px» pour la «taille de police» du «div» et du «temps nouveau Roman» comme «Font-Family».
Lorsque la sortie de ce code rend à l'écran, il ressemble à la première capture d'écran. Nous pouvons sélectionner ces textes en double-cliquez sur eux car nous avons utilisé le mot-clé «Auto» comme valeur de la propriété «utilisateur-sélection».
Dans la deuxième capture d'écran, vous pouvez également voir le texte sélectionné pendant que nous sélectionnons le texte en double-cliquez dessus. Le texte sélectionné est mis en évidence dans cette capture d'écran.
Exemple 3
Le fichier HTML est le même que ci-dessus. Nous remplaçons simplement l'élément div par le paragraphe et modifions le texte qui est écrit à l'intérieur de cette balise de paragraphe.
Nous alignons tous les éléments «corporels» dans le «centre». Ensuite, utilisez «RVB (96, 18, 199)» comme «couleur» de l'en-tête et de la «Font-Family» est la même que les exemples ci-dessus. Comme Chrome n'accepte que le préfixe «WebKit», nous utilisons donc la propriété «Webkit-user-select» et définissons sa valeur sur «texte». La valeur du «Moz-User-Select» est définie sur «Texte». Ensuite, nous utilisons «MS-User-Select» pour spécifier la valeur du mot-clé, qui est «texte». La propriété «utilisateur-sélection» est également définie sur «texte», ce qui signifie que l'utilisateur peut sélectionner le texte à l'aide de cette propriété. Il n'empêche pas l'utilisateur de sélectionner du texte. La «taille de police» de ce «P» est «22px» et «calibri» est sélectionnée ici comme «Font-Family», et choisissez «vert» comme «couleur» du texte.
La sortie montre que nous sélectionnons le texte de partout où nous voulons alors que nous définissons la valeur de la propriété utilisateur-sélection.
Exemple 4
Dans ce code, nous changeons simplement le texte qui est écrit à l'intérieur du conteneur div. Maintenant, nous appliquerons également la propriété «utilisateur-sélection» dans cet exemple, mais avec une valeur différente.
Tous les éléments «corps» sont alignés dans le «centre». Ensuite, utilisez «Maroon» comme «couleur» de la tête, et la «Font-Family» est la même que dans les exemples avant. Nous définissons le mot-clé «tout» pour la valeur de «Webkit-user-select», «moz-user-select», «MS-user-selec», ainsi que pour la syntaxe standard qui est «utilisateur-sélection». Lorsque nous utilisons «tout» comme valeur de cette propriété «utilisateur-sélection», il sélectionnera le texte en un seul clic de souris plutôt qu'un double-clic. Nous pourrons donc sélectionner le texte DIV en un seul clic et nous n'avons pas besoin de double-cliquez dessus pour sélectionner ce texte. Nous utilisons également «23px» pour la «taille de la police» et stylisons ce texte dans le style de police «italique», et «audacieux» ce texte à l'aide de la propriété «Font-Weight».
La sortie avant la sélection de texte s'affiche dans la première capture d'écran. Nous fournissons l'autre capture d'écran dans laquelle nous sélectionnons le texte entier en un seul clic de souris.
Dans cette capture d'écran, le texte est sélectionné. Ou nous pouvons dire que le texte est mis en surbrillance lorsque nous utilisons une seule souris cliquez sur ce texte. Nous n'avons pas besoin de double-cliquez sur le texte pour le sélectionner car nous utilisons le mot-clé «tout» et il sélectionne également le texte entier comme vous pouvez le voir dans la capture d'écran ci-dessous.
Conclusion
Ce guide a été créé pour vous aider à comprendre la propriété CSS «utilisateur-sélection». Nous avons abordé ce sujet en détail et examiné de nombreux exemples de la façon dont nous avons utilisé la propriété «utilisateur-sélection» dans le code CSS. Nous avons déjà couvert comment utiliser la propriété utilisateur-sélection. Nous avons également couvert comment définir les valeurs de cette propriété et avons expliqué toutes les valeurs de cette propriété en détail ici. Nous avons mis en place un guide complet pour vous, dans lequel nous avons inclus le code et des explications détaillées sur la façon de l'utiliser, ainsi que les résultats.