Usuario de CSS Seleccione
Ejemplo 1
Para empezar, creamos un nuevo archivo en el software, que en esta guía es el código de visual Studio. Cuando creamos un archivo nuevo, podemos elegir el idioma y seleccionar HTML. El código HTML debe ser creado. Visual Studio Code nos permite adquirir instantáneamente las etiquetas fundamentales ingresando "!"Y luego hacer clic en" Enter ". Entonces, estamos aprovechando esta capacidad y recopilando todas estas etiquetas fundamentales. Utilizaremos la propiedad seleccionada del usuario en CSS y vincularemos este archivo al archivo CSS agregando la etiqueta "Enlace" en la etiqueta de cabeza HTML. Tenemos un encabezado simple y un div en este código HTML. También escribimos algún texto dentro de la etiqueta de encabezado "H1" y también en la etiqueta "Div". Después de completar este código, guárdelo y continúe con el archivo CSS. Ahora, aplicaremos la propiedad de "seleccionar el usuario" a estos textos en el archivo CSS.
Estamos seleccionando "RGB" como el "color" del encabezado y los valores que estamos utilizando aquí son "RGB (16, 100, 8)" que representa el color de la sombra "verde". Luego, "argelino" se selecciona como la "familia de fuentes" y también decoramos este encabezado colocando "subrayado" aquí. Agregamos este "subrayado" utilizando la propiedad "Decoración de texto". Seleccionaremos este texto de encabezado haciendo doble clic en él porque no usamos ninguna propiedad de "selección de usuarios" en este encabezado. El valor predeterminado de esta propiedad es "Auto". Simplemente establecemos "Ninguno" como el valor de esta propiedad "Elección del usuario" para el elemento "Div".
Vamos a colocar la propiedad "WebKit-User-Select" ya que Chrome solo admite este prefijo y establece su valor en "Ninguno". Luego, utilizamos el "MS-User-Select" que se utiliza para especificar el valor de la palabra clave que es "ninguno". Significa que el usuario no podrá seleccionar el texto que está escrito dentro del div. También usamos solo la propiedad de "selección de usuarios" y la establecemos en "ninguno". Ahora, cuando este elemento div en la pantalla, el usuario no seleccionará el elemento div en el texto.
La salida de este código muestra que no se muestra ningún texto seleccionado en esta imagen, ya que no permite al usuario seleccionar el texto del DIV. Esto se debe al valor "ninguno" de la propiedad "seleccionar el usuario".
Ejemplo 2
Tenemos un encabezado simple y un div aquí. También incluimos algún texto en la etiqueta de encabezado "H1", así como la etiqueta "Div". Ahora, aplicaremos la propiedad de "seleccionar el usuario" en este texto DIV.
Hemos elegido "RGB" como el "color" del encabezado, y los números que hemos elegido son "RGB (87, 23, 4), que es el color de sombra" marrón ". Luego, elegimos "argelino" como la "familia de fuentes", y también agregamos "subrayar" a este encabezado. Para el elemento "Div", simplemente establecemos la propiedad "Selección del usuario" en "Auto". Estamos utilizando la propiedad "WebKit-User-Select" aquí porque Chrome solo permite este prefijo y cambia su valor a "Auto".
Luego, usamos "MS-User-Select" para especificar el valor de la palabra clave, que es "automática" en este caso. También estamos indicando que el usuario podrá seleccionar el texto haciendo doble clic en él que se coloca dentro del div. También establecemos la propiedad "Usuario-selección" en "Auto". Cuando este elemento div en la pantalla, el usuario seleccionará este texto haciendo doble clic. Luego, estamos estableciendo el valor "20px" para el "tamaño de fuente" del "Div" y "Times New Roman" como la "familia de fuentes".
Cuando la salida de este código se presenta en la pantalla, parece la primera captura de pantalla. Podemos seleccionar estos textos haciendo doble clic en ellos, ya que hemos utilizado la palabra clave "automática" como el valor de la propiedad "Elección del usuario".
En la segunda captura de pantalla, también puede ver el texto seleccionado a medida que seleccionamos el texto haciendo doble clic en él. El texto seleccionado se resalta en esta captura de pantalla.
Ejemplo 3
El archivo HTML es el mismo que el anterior. Simplemente reemplazamos el elemento Div con el párrafo y cambiamos el texto que se escribe dentro de esta etiqueta de párrafo.
Alineamos todos los elementos de "cuerpo" en el "centro". Luego, use "RGB (96, 18, 199)" como el "color" del encabezado y la "familia de fuentes" es lo mismo que los ejemplos anteriores. Como Chrome solo acepta el prefijo "WebKit", así utilizamos la propiedad "WebKit-User-Select" y establecemos su valor en "texto". El valor del "Moz-User-Select" se establece en "Texto". Luego, usamos "MS-User-Select" para especificar el valor de la palabra clave, que es "texto". La propiedad "User-select" también está configurada en "texto", lo que significa que el usuario puede seleccionar el texto utilizando esta propiedad. No dificulta al usuario seleccionar texto. El "tamaño de la fuente" de esta "P" es "22px" y "Calibri" se selecciona aquí como la "Fuera de fuentes", y elige "verde" como el "color" del texto ".
La salida muestra que seleccionamos el texto desde cualquier lugar que deseemos, ya que establecemos el valor de la propiedad seleccionada del usuario en "texto" en este ejemplo.
Ejemplo 4
En este código, simplemente cambiamos el texto que se escribe dentro del contenedor Div. Ahora, también aplicaremos la propiedad "Elección del usuario" en este ejemplo pero con un valor diferente.
Todos los elementos de "cuerpo" están alineados en el "centro". Luego, use "Maroon" como el "color" del encabezado, y la "familia de fuentes" es lo mismo que en los ejemplos anteriores. Establecimos la palabra clave "all" para el valor de "webkit-user-select", "Moz-user-select", "MS-User-select" y también para la sintaxis estándar que es "Elección del usuario". Cuando usamos "todos" como el valor de esta propiedad "Elección del usuario", seleccionará el texto con un solo clic del mouse en lugar de hacer un doble clic. Por lo tanto, podremos seleccionar el texto DIV con un solo clic y no necesitamos hacer doble clic en él para seleccionar este texto. También utilizamos "23px" para el "tamaño de fuente" y diseñamos este texto en estilo de fuentes "cursiva", y "en negrita" este texto con la ayuda de la propiedad "Fuente-peso".
La salida antes de que se muestre la selección de texto en la primera captura de pantalla. Proporcionamos la otra captura de pantalla en la que seleccionamos todo el texto con un solo clic del mouse.
En esta captura de pantalla, se selecciona el texto. O podemos decir que el texto se resalta cuando usamos un solo clic del mouse en este texto. No necesitamos hacer doble clic en el texto para seleccionarlo porque usamos la palabra clave "All" y también selecciona el texto completo como puede ver en la captura de pantalla a continuación.
Conclusión
Esta guía ha sido creada para ayudarlo a comprender la propiedad de CSS "Select". Hemos repasado este tema en detalle y observamos muchos ejemplos de cómo hemos utilizado la propiedad "Elección del usuario" en el código CSS. Ya hemos cubierto cómo utilizar la propiedad selecta del usuario para controlar cómo el usuario selecciona el texto o si el usuario seleccionará el texto o no. También hemos cubierto cómo establecer los valores para esta propiedad y hemos explicado todos los valores de esta propiedad en detalle aquí. Hemos reunido una guía completa para usted, en la que hemos incluido el código y las explicaciones detalladas de cómo usarlo, así como los resultados.