Cómo Hacer Un Enlace Bonito

Tabla de contenido:

Cómo Hacer Un Enlace Bonito
Cómo Hacer Un Enlace Bonito

Video: Cómo Hacer Un Enlace Bonito

Video: Cómo Hacer Un Enlace Bonito
Video: Como crear y personalizar un Link de WhatsApp 2024, Mayo
Anonim

Los enlaces afectan significativamente la apariencia de una página web. Ya sea su sitio web o blog, los enlaces bellamente personalizados cambiarán el diseño de su sitio web para mejor. Incluso sin conocimientos de html y css, crear un enlace agradable es bastante fácil.

Cómo hacer un enlace bonito
Cómo hacer un enlace bonito

Instrucciones

Paso 1

En primer lugar, creemos un enlace regular. Esto se hace usando el siguiente código: nombre del enlace. En este código, la etiqueta es un enlace. Su atributo "href" indica la dirección de la página a la que conduce el enlace. En lugar de "título del enlace", escriba una palabra o frase que represente el enlace

También puede agregar texto que aparecerá cuando haga clic en el enlace. El atributo "título" de la etiqueta le ayudará con esto.

Paso 2

Ahora vayamos a vincular. La forma más sencilla de hacer esto es en hojas de estilo en cascada (CSS). Abra el archivo que contiene los estilos de su sitio y escriba más código allí. Alternativamente, puede insertar estilos directamente en la página html. Para hacer esto, use el código de personalización del estilo del sitio.

Paso 3

Vayamos al diseño. La sintaxis de la entrada sería {parámetros de estilo}. ¿Qué debo escribir aquí?

Primero, cambia el color de los enlaces a tu gusto. Este código te ayudará con esto:

un {color: # 00000;}. Por supuesto, en lugar de "# 00000" debe insertar su propio color. Puede encontrar el código de color en este formulario en diferentes programas gráficos (por ejemplo, en Photoshop) o buscar una paleta web.

Paso 4

De forma predeterminada, el navegador hace que los enlaces estén subrayados. Esto se puede cancelar con el siguiente código: a {text-decoration: none;}

Para crear enlaces en negrita, use el parámetro font-weight: bold; Se inserta en el código de estilo de la misma forma que el color, subrayado.

Paso 5

Probablemente hayas notado que en algunos sitios, cuando pasas el cursor sobre un enlace, su apariencia cambia. Tú también puedes hacer esto. Un código como este le ayudará a: a: hover {parámetros de estilo}. Los parámetros se especifican de la misma manera que para un enlace normal, el único valor es la pseudoclase "hover", que notifica al navegador que esta configuración debe aplicarse al pasar el cursor sobre el enlace.

Del mismo modo, puede resaltar los enlaces visitados: a: visitados {parámetros de estilo}

Recomendado: