Enlaces CSS
CSS Tutorial » Enlaces CSS
Los enlaces o hipervínculos son una parte esencial de un sitio web. Permite a los visitantes navegar por el sitio. Por lo tanto, diseñar correctamente los enlaces es un aspecto importante de la construcción de un sitio web fácil de usar.
Consulte el tutorial sobre enlaces HTML para obtener más información sobre los enlaces y cómo crearlos.
Un enlace tiene cuatro estados diferentes: enlace, visitado, activo y flotante. Estos cuatro estados de un enlace se pueden diseñar de manera diferente mediante el uso de los siguientes selectores de pseudoclase de anclaje.
- a:link — define estilos para enlaces normales o no visitados.
- a:visited — define estilos para los enlaces que el usuario ya ha visitado.
- a:hover — define estilos para un enlace cuando el usuario coloca el puntero del mouse sobre él.
- a:active — define estilos para los enlaces cuando se hace clic en ellos.
Puede especificar cualquier propiedad CSS que desee, p. Ej. color, fuente, fondo, borde, etc. a cada uno de estos selectores para personalizar el estilo de los enlaces, tal como lo hace con el texto normal.
Estilo de enlaces con CSS,
Al configurar el estilo para varios estados de enlace, existen algunas reglas de orden:
a: hover DEBE ir después de a:visited
a: active DEBE venir después de a: hover
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Diseñar diferentes estados de enlace usando CSS.</title>
<style>
/*enlace no visitado */
a:link {
color: #F90000;
text-decoration: none;
font-size: 18px;
}
/* enlace visitado */
a:visited {
color: #ff00ff;
font-size: 18px;
}
/* mouse sobre el enlace */
a:hover {
color: #00E800;
border-bottom: none;
font-size: 18px;
}
/* enlace activo */
a:active {
color: #09F;
font-size: 18px;
}
</style>
</head>
<body>
<p><a href="https://www.agernic.com/css.es/fondos.html"
target="_blank">Visite el tutorial AgerNic.com</a></p>
</body>
</html>
Enlaces CSS sin subrayado
Eliminar el subrayado predeterminado de los enlaces
Si no le gusta el subrayado predeterminado en los enlaces, simplemente puede usar la propiedad de decoración de texto CSS para deshacerse de él.
Alternativamente, puede aplicar otro estilo en los enlaces como el color de fondo, el borde inferior, la fuente en negrita, etc. para que se destaque un poco mejor del texto normal.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Eliminar el subrayado predeterminado de los enlaces usando CSS</title>
<style>
a:link, a:visited {
text-decoration: none;
font-size: 18px;
}
a:hover, a:active {
text-decoration: underline;
font-size: 18px;
}
</style>
</head>
<body>
<p><a href="#">Coloca el puntero del mouse sobre mí</a></p>
</body>
</html>
Etiquetas: Enlaces CSS sin subrayado, visitados, color, como botones, estilos, centrar, propriedades enlaces CSS
Como hacer enlaces CSS como botones
También puede hacer que sus enlaces de texto ordinarios se vean como un botón usando CSS.
Para hacer esto, necesitamos utilizar algunas propiedades CSS más, como color de fondo, borde, visualización, relleno, etc.
Aprenderá sobre estas propiedades en detalle en los próximos capítulos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Personalizar un enlace como botón usando CSS</title>
<style>
a:link, a:visited {
color: white;
background-color: #1CAA95;
display: inline-block;
padding: 10px 20px;
border: 2px solid #067161;
text-decoration: none;
text-align: center;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
}
a:hover, a:active {
background-color: #8A4EDC;
border-top-color: #4D2C78;
border-right-color: #4D2C78;
border-bottom-color: #4D2C78;
border-left-color: #4D2C78;
color: #DDD;
font-weight: bold;
}
</style>
</head>
<body>
<p><a href="#">Botón de enlace CSS</a></p>
</body>
</html>
Etiquetas: Enlaces CSS sin subrayado, visitados, color, como botones, estilos, centrar, propriedades enlaces CSS
Enlaces CSS - css.es
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.