AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

Enlaces CSS


Next Page >>
HTML images

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.

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

Ejemplo
<!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>
Note:  En general, el orden de las pseudoclases debe ser el siguiente: a:link, a:visited, a:hover, a:active, a:focus para que funcionen correctamente.

 

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.

Ejemplo
<!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.

Ejemplo
<!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

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


1
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.