in

Enlaces de estilo CSS


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


Enlace de texto Enlace de texto Botón de enlace Botón de enlace


Enlaces de estilo

Los enlaces se pueden diseñar con cualquier propiedad CSS (p. Ej. color, font-family,
background, etc.).

Además, los enlaces pueden tener un estilo diferente dependiendo de qué estado ellos están en.

Los cuatro estados de enlaces 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 en él

Ejemplo

/ * enlace no visitado * /
un enlace {
color rojo;
}

/ * enlace visitado * /
a: visitado {
color verde;
}

/ * mouse sobre el enlace * /
a: hover {
color: rosa vivo;
}

/ * enlace seleccionado * /
a: active {

color azul;
}

Inténtalo tú mismo »

Al configurar el estilo para varios estados de enlace, existen algunas reglas de orden:

  • a: hover DEBE ir después de un: enlace y un: visitado
  • a: active DEBE venir después de a: hover


Decoración de texto

los text-decoration La propiedad se usa principalmente para eliminar los subrayados de los enlaces:

Ejemplo

un enlace {
decoración de texto: ninguna;
}

a: visitado {
decoración de texto: ninguna;
}

a: hover {
decoración de texto: subrayado;
}

a: active {
decoración de texto: subrayado;
}

Inténtalo tú mismo »


Color de fondo

los background-color La propiedad se puede utilizar para especificar un color de fondo para los enlaces:

Ejemplo

un enlace {
color de fondo: amarillo;
}

a: visitado {
color de fondo: cian;
}

a: hover {
color de fondo: verde claro;
}

a: active {
color de fondo: rosa vivo;
}

Inténtalo tú mismo »


Botones de enlace

Este ejemplo demuestra un ejemplo más avanzado en el que combinamos varias propiedades CSS para mostrar enlaces como cuadros / botones:

Ejemplo

a: enlace, a: visitado {
color de fondo: # f44336;

color blanco;
relleno: 14px 25px;
alineación de texto: centro;
decoración de texto: ninguna;
pantalla: bloque en línea;
}

a: hover, a: active {
color de fondo: rojo;
}

Inténtalo tú mismo »


Más ejemplos

Ejemplo

Este ejemplo demuestra cómo agregar otros estilos a los hipervínculos:

a.one:link {color: # ff0000;}
a.one:visited {color: # 0000ff;}
a.one:hover {color: # ffcc00;}

a.two: link {color: # ff0000;}
a.two: visitado {color: # 0000ff;}
a.two: hover {font-size: 150%;}

a.three: link {color: # ff0000;}
a.three: visitado {color: # 0000ff;}
a.three: hover {background: # 66ff66;}

cuatro: enlace {color: # ff0000;}
cuatro: visitado {color: # 0000ff;}
cuatro: hover {font-family: monospace;}

cinco: enlace {color: # ff0000; decoración de texto: ninguna;}
cinco: visitado {color: # 0000ff; decoración de texto: ninguna;}
a.five: hover {text-decoration: underline;}

Inténtalo tú mismo »

Ejemplo

Otro ejemplo de cómo crear cuadros / botones de enlace:

a: enlace, a: visitado {
color de fondo: blanco;
de color negro;

borde: 2px verde sólido;
relleno: 10px 20px;
alineación de texto: centro;
decoración de texto: ninguna;
pantalla: bloque en línea;
}

a: hover, a: active {
color de fondo: verde;
color blanco;
}

Inténtalo tú mismo »

Ejemplo

Este ejemplo demuestra los diferentes tipos de cursores (puede ser útil para enlaces):

auto

crosshair

predeterminado

e-resize

ayuda

mover

n-resize

ne-resize

nw-resize

puntero

progreso

s-resize

se-resize

sw-resize

texto

w-resize

espera

Inténtalo tú mismo »


¡Ponte a prueba con ejercicios!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tecnologías Java SE – Base de datos

Función de biblioteca C – strlen ()