Crear un documento XHTML genérico en su editor de texto como se ve en la imagen .
* Incluir el DOCTYPE de Transición y las etiquetas de codificación. * Incluye las etiquetas de título entre las etiquetas de la cabeza * Incluye las etiquetas de estilo entre las etiquetas de la cabeza
entre las etiquetas del cuerpo , escriba las siguientes palabras : . . .
se trata de un texto de rollover
Incluya esta frase con el lapso inicial y etiquetas de cierre , como se muestra . Dentro de la etiqueta span inicio , escriba: .
Clase
= " rollover "
Cargue el documento en el servidor Web
Creación de las reglas de hojas de estilo
Escriba el siguiente entre las etiquetas de estilo en la parte superior del documento :
span.rollover {background - color: blanco; } útil: hover.rollover {background - color: amarillo; color: marrón ;}
en primer lugar, crear la instrucción de rollover lapso de la hoja de estilos . Tipo de "span ", luego de un período , y luego " rollover ", donde vuelco coincide con el atributo de clase que se le dio a la etiqueta span . Esto indica que el fondo entre las etiquetas span es de color blanco , que se parece a un color de fondo blanco para el usuario final .
A continuación , cree el período , más de dos puntos, además de un período, más de vuelco , que es la clase de la etiqueta span . La instrucción de vuelo estacionario significa " Al colocar el puntero del ratón sobre el texto dentro de la etiqueta span , siga estas instrucciones. " Cuando los lugares de los usuarios finales del ratón sobre el texto , el fondo se vuelve amarillo y el texto se vuelve marrón.
Creación de un botón Rollover
Hay una forma relativamente fácil crear un botón de aspecto agradable del texto en su página web. Sólo tiene que añadir los siguientes atributos a la instrucción span.rollover :
background-color : azul marino , frontera : inicio blanco 5px ; font- family: Georgia; font- size: 14pt ; color: blanco;
< p> en primer lugar, cambiar el color de fondo de blanco a azul marino . A continuación, agregue la instrucción frontera , que tiene tres partes: la frontera de ancho , el border-color y los atributos de estilo frontera. Hemos optado por una , blanco , frontera inicio de 5 píxeles , lo que significa que hay un blanco, caja rectangular frontera con el contenido de la etiqueta span que es 5 píxeles de grosor .
Cambiar la familia de fuentes a Georgia a los 14 pt . Por último , cambiar el color del texto a blanco , por lo que se presenta contra el fondo azul marino . Cargue el documento en el servidor Web y probarlo.
Antes del Rollover
Esta es una captura de la página web antes de colocar el puntero del ratón sobre el texto . El texto es de color blanco , y el fondo es de color azul marino .
Después del Rollover
Esta es una captura de la página Web , mientras que el puntero del ratón está sobre el botón. El fondo es amarillo, y el texto es de color granate .