En este articulo te presentamos los diferentes tipos de enlaces con CSS, que podemos declarar. De manera básica sabemos que con HTML no podemos quitar el subrayado a los enlaces, ni tampoco el color característico azul. Pero gracias a las Hojas de Estilo CCS si es posible.
- Enlace sin subrayado:
- Enlace subrayado sólo cuando pasa el puntero: El ejemplo que hemos visto antes puede elaborarse de nuevo para hacer más atractiva la página. En los enlaces que no llevan subrayado éste aparecerá sólo cuando el puntero pasa por encima gracias a la propiedad A:hover.
- Enlace que cambia de color al pasar el puntero: Explotando todavía más la propiedad A:hover, es posible crear un efecto mediante el cual los enlaces tengan un color por defecto que cambiará cuando el ratón pase por encima. El color se puede impostar como palabra clave (red, green, blue, etc.) o como trío hexadecimal.
Desde siempre los navegadores muestran los enlaces textuales con un subrayado (underline) que señala su función. Internet Explorer y los navegadores Mozilla, Chrome, entre otros... ofrecen la posibilidad de eliminar dicho subrayado actuando en las propiedades del navegador. Con las hojas de estilo los elaboradores pueden eliminar totalmente el subrayado mediante un simple código que se insertará entre las marcas <head> y </head> del documento HTML:
Código CSS:
El resultado será:
Código CSS:
<style type="text/css">
A:link, A:visited { text-decoration: none }
</style>
A:link, A:visited { text-decoration: none }
</style>
Enlace sin subrayado
Código CSS:
Código CSS:
<style type="text/css">
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
</style>
El resultado será:A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
</style>
También podemos mostrar el efecto contrario, referente a este último enlace:
Código CSS:
Código CSS:
<style type="text/css">
A:link, A:visited { text-decoration: underline }
A:hover { text-decoration: none }
</style>
El resultado será:A:link, A:visited { text-decoration: underline }
A:hover { text-decoration: none }
</style>
Enlace que desaparece el subrayado al pasar el puntero
Código CSS:
Código CSS:
<style type="text/css">
A:hover { color: red }
</style>
El resultado será:A:hover { color: red }
</style>
- Enlaces en forma de botones: Este enlace se logra con las propiedades background y paddingCódigo CSS:
- Enlaces con un estilo raro (línea arriba del enlace): Este enlace se logra con la propiedad overline
<style type="text/css">
A: link, visited {text-decoration: none; background: #ccc; padding: 4px; color: #111;}
A:hover {text-decoration: none;}
</style>
El resultado será:A: link, visited {text-decoration: none; background: #ccc; padding: 4px; color: #111;}
A:hover {text-decoration: none;}
</style>
Enviar
- Enlace con línea arriba al pasar el puntero
- Enlaces con subrayado de linea de puntos: Este enlace se logra gracias a la propiedad border-bottom.Código CSS:
<style type="text/css">
A:link, visited {text-decoration: none;}
A:hover {border-bottom: 1px dotted;}
</style>
El resultado será: A:link, visited {text-decoration: none;}
A:hover {border-bottom: 1px dotted;}
</style>
- Enlace con linea de puntos al pasar el puntero
- Enlace con subrayado de línea gruesa Este enlace se logra con la propiedad border-bottom: solidCódigo CSS:
Nota: puede cambiarse el color de la línea con solo aplicar la propiedad color después de dotted.
<style type="text/css">
A:link, visited {text-decoration: none;}
A:hover {border-bottom: 4px solid;}
</style>
El resultado será: A:link, visited {text-decoration: none;}
A:hover {border-bottom: 4px solid;}
</style>
-
Enlace con subrayado grueso
- Enlace con un subrayado separado: Este enlace se logra con la propiedad padding-bottom. y border-bottomCódigo CSS:
Nota: puede cambiarse el color de la línea con solo aplicar la propiedad color después de solid, así como también el grosor de la línea al cambiar 4px.
<style type="text/css">
A:link, visited {text-decoration: none;}
A:hover {padding-bottom: 4px; border-bottom: 1px solid}
</style>
El resultado será:A:link, visited {text-decoration: none;}
A:hover {padding-bottom: 4px; border-bottom: 1px solid}
</style>
0 comentarios:
Publicar un comentario