Cómo utilizar hojas de estilos en cascada para crear hipervínculos personalizados en Expression Web

Seleccione idioma Seleccione idioma
Id. de artículo: 928715 - Ver los productos a los que se aplica este artículo
Expandir todo | Contraer todo

En esta página

INTRODUCCIÓN

En este artículo se describe cómo utilizar hojas de estilos en cascada (CSS) para crear hipervínculos personalizados en Microsoft Expression Web. Contiene ejemplos que muestran cómo utilizar las características CSS para crear hipervínculos personalizados.

Más información

Ejemplo 1: Crear hipervínculos en el que el formato de subrayado se muestra en un color diferente

En este ejemplo da formato al texto de los hipervínculos en el mismo color que el texto del documento. Sólo el formato de subrayado de los hipervínculos se muestra en un color diferente. Para crear estos hipervínculos personalizados, siga estos pasos:
  1. Inicie Expression Web y, a continuación, cree una nueva página en blanco.
  2. En el menú Ver , haga clic en página y, a continuación, haga clic en código en la parte inferior de la página.
  3. En el <head> </head> área de la página, inserte el código siguiente:
    <style> 
    body { color: black; background-color: white; font-family: arial } 
    a { color: black; text-decoration: none; border-bottom-style: solid; border-bottom-width: 1px } 
    a:link { border-bottom-color: blue } a:visited { border-bottom-color: purple } 
    a:hover { border-bottom-color: green } a:active { border-bottom-color: red } 
    </style> 
  4. En el <body> </body> área de la página, inserte el código siguiente:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p> 
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p> 
  5. En el menú archivo , haga clic en Guardar .
  6. En el cuadro de diálogo especifique una ubicación a la que desea guardar el archivo.
  7. En el cuadro nombre de archivo , escriba ejemplo1 y a continuación, haga clic en Guardar .
  8. En el menú archivo , elija vista previa en el explorador y, a continuación, haga clic en el explorador Web que desea utilizar para obtener una vista previa de la página.

Ejemplo 2: Crear hipervínculos que utilicen botones activables

Este ejemplo crea los hipervínculos que utilicen botones activables que tienen un fondo sólido. Para crear estos hipervínculos personalizados, siga estos pasos:
  1. Inicie Expression Web y, a continuación, cree una nueva página en blanco.
  2. En el menú Ver , haga clic en página y, a continuación, haga clic en código en la parte inferior de la página.
  3. En el <head> </head> área de la página, inserte el código siguiente:
    <style> 
    body { color: black; background-color: white; font-family: arial } 
    a { text-decoration: none; padding: 3px } 
    a:link { color: white; background-color: blue } 
    a:visited { color: white; background-color: purple } 
    a:hover { color: white; background-color: green } 
    a:active { color: white; background-color: red } 
    </style> 
  4. En el <body> </body> área de la página, inserte el código siguiente:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p> 
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p> 
  5. En el menú archivo , haga clic en Guardar .
  6. En el cuadro de diálogo especifique una ubicación a la que desea guardar el archivo.
  7. En el cuadro nombre de archivo , escriba Example2 y, a continuación, haga clic en Guardar .
  8. En el menú archivo , elija vista previa en el explorador y, a continuación, haga clic en el explorador Web que desea utilizar para obtener una vista previa de la página.

Ejemplo 3: Crear hipervínculos que utilicen botones activables de esquema

Este ejemplo crea los hipervínculos que utilicen botones activables de esquema. Cuando se sitúa en estos hipervínculos, aparecerá un cuadro coloreado alrededor del texto del hipervínculo. Esto crea un efecto de contorno. Para crear estos hipervínculos personalizados, siga estos pasos:
  1. Inicie Expression Web y, a continuación, cree una nueva página en blanco.
  2. En el menú Ver , haga clic en página y, a continuación, haga clic en código en la parte inferior de la página.
  3. En el <head> </head> área de la página, inserte el código siguiente:
    <style> 
    body { color: black; background-color: white; font-family: arial } 
    a { color: black; text-decoration: none; border-style: solid; border-width: 2px; padding: 2px } 
    a:link { border-color: blue } a:visited { border-color: purple } 
    a:hover { border-color: green } a:active { border-color: red } 
    </style> 
  4. En el <body> </body> área de la página, inserte el código siguiente:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p> 
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p> 
  5. En el menú archivo , haga clic en Guardar .
  6. En el cuadro de diálogo especifique una ubicación a la que desea guardar el archivo.
  7. En el cuadro nombre de archivo , escriba Ejemplo3 y a continuación, haga clic en Guardar .
  8. En el menú archivo , elija vista previa en el explorador y, a continuación, haga clic en el explorador Web que desea utilizar para obtener una vista previa de la página.

Ejemplo 4: Crear hipervínculos que utilizan el formato de texto diferente

Este ejemplo se da formato hipervínculos para utilizar texto sin subrayado, cursiva, en minúsculas. Cuando se sitúa en estos hipervínculos, el texto se convierte en mayúsculas. Para crear estos hipervínculos personalizados, siga estos pasos:
  1. Inicie Expression Web y, a continuación, cree una nueva página en blanco.
  2. En el menú Ver , haga clic en página y, a continuación, haga clic en código en la parte inferior de la página.
  3. En el <head> </head> área de la página, inserte el código siguiente:
    <style> 
    body { color: black; background-color: white; font-family: arial } 
    a { text-decoration: none; font-style: italic; text-transform: lowercase } 
    a:link { color: blue; font-weight: bold } a:visited { color: purple } 
    a:hover { color: green; text-transform: uppercase } 
    a:active { color: red } 
    </style> 
  4. En el <body> </body> área de la página, inserte el código siguiente:
    <p>Please see <a href="http://www.microsoft.com">http://WWW.microsoft.COM</a> for more.</p> 
    <p>Please see <a href="http://www.msn.com">http://WWW.msn.COM</a> for more.</p> 
  5. En el menú archivo , haga clic en Guardar .
  6. En el cuadro de diálogo especifique una ubicación a la que desea guardar el archivo.
  7. En el cuadro nombre de archivo , escriba Ejemplo4 y, a continuación, haga clic en Guardar .
  8. En el menú archivo , elija vista previa en el explorador y, a continuación, haga clic en el explorador Web que desea utilizar para obtener una vista previa de la página.

Referencias

Para obtener más información, haga clic en los números de artículo siguientes para verlos en Microsoft Knowledge Base:
825450Cómo crear hipervínculos personalizados mediante hojas de estilo en cascada en FrontPage 2003
196488¿Qué son en cascada las hojas de estilo?
222949Cómo crear efectos de activación para botones del formulario mediante CSS y DHTML en FrontPage

Propiedades

Id. de artículo: 928715 - Última revisión: miércoles, 6 de diciembre de 2006 - Versión: 1.0
La información de este artículo se refiere a:
  • Microsoft Expression Web
Palabras clave: 
kbmt kbexpertiseinter kbhowto KB928715 KbMtes
Traducción automática
IMPORTANTE: Este artículo ha sido traducido por un software de traducción automática de Microsoft (http://support.microsoft.com/gp/mtdetails) en lugar de un traductor humano. Microsoft le ofrece artículos traducidos por un traductor humano y artículos traducidos automáticamente para que tenga acceso en su propio idioma a todos los artículos de nuestra base de conocimientos (Knowledge Base). Sin embargo, los artículos traducidos automáticamente pueden contener errores en el vocabulario, la sintaxis o la gramática, como los que un extranjero podría cometer al hablar el idioma. Microsoft no se hace responsable de cualquier imprecisión, error o daño ocasionado por una mala traducción del contenido o como consecuencia de su utilización por nuestros clientes. Microsoft suele actualizar el software de traducción frecuentemente.
Haga clic aquí para ver el artículo original (en inglés): 928715

Enviar comentarios

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com