Color de selección de CSS
Sintaxis
:: Selección// Declaración de CSS
Ejemplo # 1: Cambiar el color del texto en la selección
Debemos escribir algún código HTML para modificar el color o el color de fondo del texto cuando se selecciona el texto. Aquí, para realizar estos ejemplos, estamos utilizando el código Visual Studio. Como resultado, abrimos el nuevo archivo en este software y elegimos el idioma "HTML", lo que resulta en un archivo HTML. Luego comenzamos a codificar en este archivo. En nuestro archivo HTML, estamos creando un "div" llamado "D1", y luego tenemos un encabezado y un párrafo en este "Div", como se muestra a continuación. Ahora, nuestro enfoque es cambiar el color del texto seleccionado utilizando el selector de "selección", por lo que para esto, vamos a pasar al código CSS donde usamos este selector de "selección" y verificar su trabajo en la salida.
Estamos utilizando el selector de "selección" aquí, y también lo son algunos cambios en el color del texto. Vamos a seguir la sintaxis de este selector de "selección", y aquí puede ver que usamos dos colons antes de la selección de selección y colocar "H1" al principio, ya que queremos aplicar el color dado en el encabezado cuando El usuario selecciona el texto del encabezado. Aquí, estamos usando "H1" y luego colocamos dos colons "::" y después de esto, estamos usando "Selección".
Ahora, dentro de esto, usamos la propiedad de CSS, que es la propiedad "color", y esta propiedad cambiará el color del texto cuando se seleccione. Entonces, estamos cambiando el "color" de texto seleccionado a "azul" para encabezar 1. Después de este encabezado, también tenemos un párrafo, por lo que también queremos cambiar el "color" del texto del párrafo en la selección. Estamos poniendo "P" aquí, y nuevamente utilizamos el selector de "selección" para cambiar el texto de color a un color "rojo" cuando se selecciona.
Verifiquemos cómo funciona y el color del texto cambia en la selección en las salidas a continuación. En la primera salida, puede ver que el color de texto seleccionado del encabezado aparece azul como lo configuramos en el selector de selección anterior en el código CSS.
Ahora viene la segunda salida, y aquí puede ver el color del texto del párrafo seleccionado que aparece "rojo" aquí. El texto negro se convierte en rojo cuando seleccionamos el texto de este párrafo.
Ejemplo # 2: Cambiar el color de fondo del texto en la selección
Usamos el mismo código HTML en este ejemplo, pero aquí en el CSS, vamos a cambiar el color del fondo del texto cuando se seleccione. También vamos a usar el selector de "selección" en este ejemplo.
Usamos "H1" y luego colocamos "::" y el selector de "selección". Como, aquí, debemos cambiar el color de fondo del texto en la selección, por lo que estamos utilizando la propiedad de "color de fondo" aquí. Cuando usamos esta propiedad dentro de la selección de selección, cambiará el color de fondo del texto de acuerdo con el color que hemos seleccionado aquí. En el código, puede ver que usamos "amarillo" como el color de fondo del texto seleccionado para el encabezado. Entonces vamos a cambiar el color de fondo de texto del párrafo. Por lo tanto, nuevamente utilizamos el selector de "selección" con "P" y declaramos la propiedad de "color de fondo" y elegimos el color "gris" para el fondo de texto de este párrafo.
El color de fondo del texto del encabezado se ve aquí en la salida a continuación. Cuando seleccionamos el encabezado, el color de fondo cambia de blanco a amarillo. Este cambio es solo por el selector de "selección" que hemos utilizado.
El cambio en el color de fondo del texto seleccionado en el párrafo se muestra a continuación, y puede notar que su color de fondo cambia a un color "gris" cuando se selecciona este texto.
Ejemplo # 3
Aquí, hemos hecho un encabezado, un párrafo y un div en este ejemplo y vamos a aplicar el mismo color de fondo y el color de texto cuando seleccionamos cualquier texto de todos estos.
En este ejemplo, no dimos ningún nombre al selector antes del doble colon "::" del selector de "selección" porque queremos dar el mismo color de texto y color de fondo a todos estos textos cuando se selecciona, ya sea un encabezado o un párrafo. Simplemente ponemos el selector "::" y la "selección" y luego usamos dos propiedades aquí.
La salida muestra que ambos colores cambian en la selección del texto. El color de fondo aparece amarillo y el color de texto aparece rojo cuando seleccionamos el texto. Además, lo mismo en el caso de la cabeza.
Ejemplo # 4
En el código a continuación, estamos creando múltiples párrafos utilizando diferentes nombres y luego aplicando diferentes colores del fondo o el texto a cada párrafo cuando seleccionamos cualquier texto del párrafo. Todos estos estilos se harán en CSS.
El ".P1 "se usa aquí, que define el nombre del párrafo, y luego usamos el selector de" selección "con esto. Estamos cambiando el color de fuente de "P1" a "azul", por lo que se vuelve azul cuando se selecciona. Luego, tenemos "P2", y cambiamos su "color de fondo" a "amarillo" cuando se selecciona el texto. Ahora viene "P3" nuevamente usamos el selector de "selección" y cambiamos su "fondo" a "rojo."
Después de esto, "P4" se menciona con el selector de "selección", y estamos cambiando el "color de fondo", así como el "color" de la fuente a "púrpura" y "blanco", respectivamente. Estamos cambiando la "sombra de texto" de "P5" a "1px 1px rojo". Creará una sombra de color "rojo" cuando seleccionemos el texto de "P5". Luego usamos "P6" con este selector de "selección" y usamos el "fondo", que cambia su fondo y establece negro aparecerá "negro" cuando se seleccione su texto. También diseñamos todos estos párrafos sin selección, por lo que usamos "cuerpo", y todas las propiedades que usamos aquí se aplicarán a todos los párrafos y encabezados. Usamos la "Fontamily Font" y lo establecemos en "Sans-Serif", para que todo el texto aparezca en este formato. Establecemos su "altura de línea" en "1.45 "y" color de fondo "a" rosa de luz."También usamos" relleno "aquí, que se selecciona como" 1em ". El "tamaño de fuente" para todos los párrafos es "20px", y también el "peso-peso" se establece como "audaces" para todos.
Estamos mostrando dos o tres capturas de pantalla de salida aquí, y puede notar el cambio en el color de la fuente y el color de fondo cuando se selecciona el texto. Todo esto se debe al selector de "selección".
Conclusión
En esta guía, hemos explorado el concepto del selector de "selección". Como hemos discutido que este selector de "selección" se usa para cambiar el color de la fuente y también el color de fondo cuando el usuario selecciona el texto en el que se aplica el selector de "selección". Hemos elaborado múltiples ejemplos aquí en los que hemos utilizado este selector de "selección". Espero que comprenda este selector de "selección" después de pasar por esta guía, y esto lo ayudará mucho en sus proyectos o sitios web.