Desde la invención del lenguaje de marcado de hipertexto, HTML, los conceptos de diseño y diseño de documentos web han cambiado drásticamente. Con el soporte casi completo de los navegadores populares para los estándares de hojas de estilo en cascada CSS y CSS2, es posible influir en casi cualquier aspecto de la presentación visual de un documento. Por ejemplo, puede colorear el fondo de un enlace, rellenarlo con alguna imagen y también cambiar según las acciones del usuario.
Necesario
- - la capacidad de editar el texto del documento o el texto de las hojas de estilo del documento;
- - un editor de texto que le permite guardar el documento en la codificación original.
Instrucciones
Paso 1
Haga que el fondo del vínculo se llene uniformemente con un color aleatorio agregando información de estilo en línea al elemento A. Agregue estilo a los atributos del elemento A correspondiente al vínculo cuyo fondo desea cambiar. En el contenido del atributo de estilo, coloque la propiedad CSS de color de fondo con el valor dado, que es el identificador correcto para el color de fondo. Por ejemplo, podría verse así:
Texto del enlace
Paso 2
Defina el fondo del enlace en una hoja de estilo externa o incrustada en su documento. En la hoja de estilo apropiada, agregue un conjunto de reglas dirigidas por un selector de un nivel aceptable de especificidad. En el conjunto de reglas, ingrese la propiedad background-color de la misma manera que en el paso anterior. Seleccione la especificidad del selector según las reglas en cascada de CSS2 y el alcance deseado. Por lo tanto, si necesita establecer el color de un solo enlace, tiene sentido usar un selector de ID; si hay varios de esos enlaces, es mejor usar un selector de atributo basado en el valor de la clase.
Por ejemplo, para establecer un fondo verde para un enlace específico en un documento, puede agregar un conjunto de reglas a la hoja de estilo:
A # ID_GREEN
{
color de fondo: # 00FF00;
}
También debe establecer el atributo ID del elemento A correspondiente al enlace deseado a ID_GREEN:
Texto del enlace
Paso 3
Llene el fondo del enlace con una imagen. Siga los métodos descritos en los pasos uno y dos, pero en lugar de la propiedad CSS background-color, use background-image. Por ejemplo:
Texto del enlace
Si es necesario, agregue una propiedad de repetición de fondo al conjunto de reglas CSS para definir opciones para duplicar la imagen de fondo horizontal y verticalmente.
Paso 4
Haz que el fondo del enlace cambie cuando pasas el cursor sobre él o cuando el foco se mueve. Agregue conjuntos de reglas a una hoja de estilo de documento externo o incrustado que definan el fondo de un vínculo o grupo de vínculos en diferentes estados. Utilice selectores de ID y atributos junto con las pseudoclases dinámicas: hover,: active y: focus. Por ejemplo, para que el fondo de un enlace con un valor de atributo ID de ID_DYNAMIC_BACKGROUND sea rojo en el estado inactivo y verde en el estado de estar debajo del cursor del mouse, se deben agregar los siguientes conjuntos de reglas a la hoja de estilo:
A # ID_DYNAMIC_BACKGROUND
{
color de fondo: # FF0000;
}
A # ID_DYNAMIC_BACKGROUND: desplazarse
{
color de fondo: # 00FF00;
}
Puede hacer lo mismo para crear un fondo con una imagen que cambia dinámicamente.
