Con CSS, los enlaces se pueden diseñar de muchas maneras diferentes.
Los enlaces se pueden usar de diversas formas distintas:
Enlace en imagenetc
Estilo de enlaces
Los enlaces se pueden disenar con cualquier propriedad CSS (color; font-family, blackground, etc)
Además, los enlaces se pueden diseñar diferente según el estado en el que se encuentren.
Los cuatro estados de enlace son:
- a:link- un enlace normal, no visitado
- a:visited- un enlace que el usuario ha visitado
- a:hover- un enlace cuando el usuario pasa el mouse sobre él
- a:active- un enlace en el momento en que se hace clic
...
Codigo de los estilos de enlaces
/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; }
Al establecer el estilo para varios estados de enlace, existen algunas reglas de orden:
- a:hover DEBE venir después de a:link y a:visited
- a:active DEBE venir después de a:hover
Decoración de texto
La propriedad text-decoration se usa principalmente para eliminar los subrayados de los enlaces:
ejemplo del codigo
a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; }
Color de fondo
La propriedad background-color tanbien es usada para especificar el color de fondo de los enlaces
Codigo de ejemplo
a:link { background-color: yellow; } a:visited { background-color: cyan; } a:hover { background-color: lightgreen; } a:active { background-color: hotpink; }
Botones de enlace
Podemos poner un enlace que sea un button
codigo del ejemplo
a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; }
Codigo de varios estilos de links o enlaces
a.one:link {color: #ff0000;} a.one:visited {color: #0000ff;} a.one:hover {color: #ffcc00;} a.two:link {color: #ff0000;} a.two:visited {color: #0000ff;} a.two:hover {font-size: 150%;} a.three:link {color: #ff0000;} a.three:visited {color: #0000ff;} a.three:hover {background: #66ff66;} a.four:link {color: #ff0000;} a.four:visited {color: #0000ff;} a.four:hover {font-family: monospace;} a.five:link {color: #ff0000; text-decoration: none;} a.five:visited {color: #0000ff; text-decoration: none;} a.five:hover {text-decoration: underline;}
Un ejemplo de cursores distintos que pueden ser utiles en los enlaces
<span style="cursor: auto">auto</span><br> <span style="cursor: crosshair">crosshair</span><br> <span style="cursor: default">default</span><br> <span style="cursor: e-resize">e-resize</span><br> <span style="cursor: help">help</span><br> <span style="cursor: move">move</span><br> <span style="cursor: n-resize">n-resize</span><br> <span style="cursor: ne-resize">ne-resize</span><br> <span style="cursor: nw-resize">nw-resize</span><br> <span style="cursor: pointer">pointer</span><br> <span style="cursor: progress">progress</span><br> <span style="cursor: s-resize">s-resize</span><br> <span style="cursor: se-resize">se-resize</span><br> <span style="cursor: sw-resize">sw-resize</span><br> <span style="cursor: text">text</span><br> <span style="cursor: w-resize">w-resize</span><br> <span style="cursor: wait">wait</span>
auto
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias