Cómo resaltar con colores en CSS

Cascading Style Sheets permiten a los diseñadores web para cambiar los colores de primer plano y de fondo de los elementos HTML. Aunque no es muy conocido, también se puede utilizar CSS para cambiar el color de fondo de las pantallas del navegador cuando se utiliza un ratón para resaltar el texto. Este truco añade un toque especial a sus diseños, e incluso puede que sean más utilizables en ciertos escenarios. Cambio del color de resaltado requiere CSS3, sin embargo. Dado que no todos los navegadores soportan CSS3, usted debe esperar que los navegadores antiguos seguirán mostrando el color predeterminado destacando.

Instrucciones

1 Abra el archivo .CSS principal de su sitio web en un editor de código. Si su sitio web no utiliza uno, lo crea y añade el siguiente código debajo de la etiqueta <title> de su sitio web:

<Rel = "stylesheet" type link = "text / css" href = "ruta / a / yourstyle.css" />

Si ha codificado su sitio web para utilizar un archivo de cabecera para todo el sitio, a continuación, sólo tiene que añadir que la etiqueta en el fichero de cabecera. En el caso de un sitio HTML estático, es necesario agregar esta línea de código para cada archivo HTML.

2 Agregue el código siguiente a su archivo .CSS para controlar el color de resaltado:

:: selección {background: # ff5e99; }

:: - Moz-selección {background: # ff5e99; }

: selección {background: # ff5e99; }

Los dos primeros son líneas específicas del proveedor de código para lo que las especificaciones de CSS3 llaman la "selección pseudo-clase." navegadores basados ​​en WebKit Chrome y Safari utilizan la primera línea de código, que en este caso se suma una dos puntos adicionales. Firefox utiliza la segunda línea de código, lo que añade un extra de dos puntos y el prefijo de proveedor "-moz". El último ejemplo es el código que debería funcionar cuando se convierten en navegadores totalmente compatibles con CSS3, pero a partir de 2011 todavía no se da el caso.

3 Cambiar los seis caracteres después del signo hash para el valor hexadecimal del color de su elección. Utilice un selector de colores o carta de color, ambos disponibles gratuitamente en Internet. También puede utilizar los nombres de colores como el "negro" o "blanco" para los colores básicos, pero usted debe consultar a un gráfico para ellos, también.

4 Añadir identificadores o nombres de las clases a las etiquetas de HTML y luego dirigirse a ellos en el CSS para usar diferentes colores de resaltado en los diferentes elementos de sus páginas web. Aquí está un ejemplo de un párrafo de conjunto con un nombre de clase de "verde":

<P class = "green"> El texto verde ... </ p>

Usted puede añadir el nombre de la clase "verde" a tantas etiquetas como desee. Utilizar identificadores cuando se quiere apuntar a una sola etiqueta, tal como una etiqueta específica <p> en una página Web.

5 Agregue el nombre de clase o ID a su CSS para apuntar a una etiqueta específica o grupo de etiquetas. Para hacer que los párrafos dado un nombre de clase de la "verde" de un color verde resaltado, utilice el siguiente:

p.green :: selección {background: # 00ff00; }

p.green :: - moz-selección {background: # 00ff00; }

p.green: la selección {background: # 00ff00; }

Consejos y advertencias

• Que coincida con el color de resaltado de la paleta de colores de su sitio web para darle un aspecto más "totalmente conjuntado".
• Juega un poco con los colores para conseguir la combinación más legible del fondo del sitio, color de realce y color del texto.