Cómo usar CSS para crear hipervínculos en páginas web

Abril 26, 2024

Si está familiarizado con HTML, sabe que puede controlar el color del texto y los hipervínculos en una página web. Pero con las hojas de estilo en cascada puede hacer mucho más. Ciertas etiquetas, como la etiqueta de enlace de hipervínculo, tienen lo que se denomina pseudo-clases asociadas con los diferentes estados de la etiqueta. Por ejemplo, la etiqueta de hipervínculo tiene cuatro estados; enlace, visitado, flotar y activo.

Cuando no se utiliza un enlace (no está seleccionado), ese es el enlace pseudoclase o estado. los visitó estado es después de que el enlace ha sido utilizado. los flotar estado es cuando el mouse pasa sobre el enlace y el activo estado es cuando haces clic en el enlace. La magia de CSS es que cada estado del enlace se controla de forma independiente a través de pseudo-clases. Por lo tanto, puede establecer diferentes propiedades para cada estado. Puede usar cualquier propiedad asociada con la etiqueta de anclaje de hipervínculo en CSS.

En el ejemplo a continuación, configuraremos el estado del enlace en rojo, el estado visitado en púrpura (# 400040), el cursor y los estados activos en rojo, subrayado y en cursiva.

Nota--La flecha

indica que el código está envuelto en una segunda línea y realmente debería estar todo en una línea.

Como puede ver, hemos establecido la propiedad de color en rojo para todos los estados excepto el estado visitado, que configuramos en púrpura. Debido a que solo queremos que el hipervínculo esté subrayado para los estados activos y de desplazamiento, hemos establecido la propiedad de decoración de texto en none para los otros dos estados. Finalmente, hemos establecido el estilo de fuente en cursiva para los estados activables y de desplazamiento, lo que hará que el texto se ponga en cursiva cuando pase por encima o haga clic en el enlace, y volveremos a poner la decoración de texto en subrayado. Este es solo un ejemplo simple. Puede hacer que sus estilos sean tan simples o elegantes como desee. Sin embargo, hay algunas cosas para recordar.

Los navegadores web difieren en cómo manejan esto. Por lo general, si establece una propiedad en un cierto valor, será heredada por (transferida a) cualquier estado enumerado después. En nuestro ejemplo anterior, el primer estado que figura en nuestro código fue el estado del enlace y configuramos la propiedad de color en rojo. La mayoría de las veces, esto se transmitiría a los otros tres estados a menos que lo cambiemos con el código, como lo hicimos para el estado visitado. Además, si no hubiéramos establecido la decoración de texto de nuevo en subrayado, el texto para el estado flotante y los estados activos no se habrían subrayado porque lo desactivamos en el primer estado. Pero no puede contar con todos los navegadores para hacer esto. Por lo tanto, es mejor establecer todas las propiedades para cada estado individualmente.

Cuando diseñe enlaces sofisticados, no haga grandes cambios entre estados, como hacer que el tamaño del texto aumente drásticamente. Esto hará que el navegador web vuelva a cargar la página y sus visitantes se enojarán mucho con usted.

El orden en el que enumera el código para estas pseudo-clases está influenciado por el orden en cascada. Discutiremos el orden en cascada en un tutorial posterior. Por ahora solo recuerde que para evitar conflictos, codifique los estados en el orden que usamos anteriormente; enlace, visitado, flotar y activo.

Instrucciones De Vídeo: Curso Básico de CSS - 9. Enlaces (Abril 2024).

Cómo usar CSS para diseñar hipervínculos en páginas web, HTML, pseudo-clases asociadas con los diferentes estados de la etiqueta, pseudo-clase, hipervínculo, hipervínculos de codificación en CSS, pseudo-clase CSS, estados CSS, estado de una etiqueta, enlaces sofisticados en una página web con CSS, enlaces elegantes

Artículo Anterior

Artículo Siguiente

Dragon Ball Z - Budokai

Abril 2024

Dragon Ball Z: Budokai para Nintendo Gamecube es una nueva versión del juego del mismo nombre para Playstation 2. Es un juego de lucha que cubre la historia de Dragon Ball Z desde la saga Saiyan...

ordenadores

Sistema Atlantis Multi-Media para iPod - Revisión

Abril 2024

Fue un regalo de cumpleaños temprano inesperado de uno de mis mejores amigos, Kerryl. ¡Guauu! ¡Que gran regalo! Kerryl sabe cuánto amo la música. Es bastante obvio por la cantidad de diferentes...