27-Enlaces en CSS

Con CSS, los enlaces se pueden diseñar de muchas maneras diferentes.

Los enlaces se pueden usar de diversas formas distintas:

• Enlace en texto

Enlace en imagen

etc

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

---

---

Ir al indice