Cómo diseñar enlaces usando CSS?
Cómo diseñar enlaces?
Los enlaces o hipervínculos en un sitio web se pueden diseñar utilizando varias propiedades CSS. Los enlaces de estilo pueden incluir cambiar su color, tamaño de fuente, familia de fuentes, etc.
Ejemplo
Supongamos que desea que un hipervínculo en su sitio web tenga un estilo audaz y su color debe ser verde. Use la siguiente pieza de código.
Producción
El color y el peso de fuente del enlace se han cambiado con éxito.
Enlaces de estilo según los estados
Los enlaces que se muestran en un sitio web tienen diferentes estados y se pueden diseñar en función de su estado actual. Los diferentes estados que puede tener un enlace son;
un enlace (un enlace que aún no ha sido visitado por el usuario)
A: Visitado (un enlace que ha sido visitado por el usuario)
A: flotante (El estado del enlace cuando un cursor del mouse se mueve sobre el enlace)
A: Activo (El estado del enlace cuando el usuario hace clic en el enlace)
El estilo de enlaces de acuerdo con sus estados es necesario porque permiten al usuario comprender la condición de un enlace y evitar que el usuario enfrente cualquier confusión.
Ejemplo
Use el siguiente fragmento de código para estilo enlaces en su sitio web de acuerdo con su estado.
Producción
- Cuando el usuario todavía no lo visita el enlace.
- Cuando el usuario visita el enlace.
- Cuando el usuario trae el mouse a través del enlace.
- Cuando el usuario hace clic en el enlace.
Nota: Al diseñar múltiples enlaces, mantenga el pedido mencionado anteriormente para que sus enlaces se comporten en consecuencia. Supongamos que el estilo se desplaza primero en lugar de el estilo visitado, entonces el estilo definido para visitado anulará el estilo de flotar y esta es una situación que uno debe evitar.
Cómo eliminar el subrayado predeterminado de Hperlinks
Por defecto, hay un subrayado en los enlaces en un sitio web que a veces puede ser no deseado. Puede deshacerse del subrayado de los enlaces utilizando la propiedad de decoración de texto de CSS. El siguiente fragmento de código muestra cómo se puede hacer.
En el ejemplo anterior, el subrayador predeterminado se elimina de un enlace no visitado estableciendo el valor de la propiedad de decoración de texto en "ninguno". Puede usar el fragmento de código anterior para eliminar un subrayado de otros estados de un enlace también.
Producción
El subrayado predeterminado se elimina correctamente del enlace no visitado.
Enlaces como botones
A veces, los enlaces de texto habituales que aparecen en un sitio web pueden ser aburridos, por lo tanto, para que sean más atractivos, puede hacer que los enlaces aparezcan como botones en su sitio web. Hacer enlaces como botones utiliza múltiples propiedades CSS, como relleno, borde, color de fondo, etc.
El siguiente ejemplo ilustra cómo usa enlaces como botones.
En el fragmento de código anterior, se muestra un enlace como un botón. Los estados no visitados y visitados del botón se están diseñando de manera diferente a los estados activos y activos del enlace.
Producción
- El estado no visitado y visitado del enlace del botón.
- Los estados activos y activos del enlace del botón.
Un enlace en todos sus estados está diseñado con éxito como un botón.
Conclusión
Los enlaces o hipervínculos de estilo en un sitio web son tan importantes como el estilo de cualquier otro elemento. Con el propósito de estilo enlaces, se utilizan varias propiedades CSS, como color, color de fondo, fuente de fuente, estilo de fuente, etc. Los enlaces también se pueden diseñar de acuerdo con sus estados que son no visitados, visitados, desplazados y activos, además, para mejorar el aspecto de los enlaces que aparecen en los sitios web, puede usar enlaces como botones. Este artículo analiza cómo diseñar enlaces con CSS en profundidad con la ayuda de ejemplos apropiados.