Con la finalidad de mostrar enlaces con diseños
personalizados, crearemos estilos para un hipervínculo en un documento CSS,
siguiendo las recomendaciones oficiales de este lenguaje.
Algunos creadores de páginas web tienen problemas para definir
diferentes propiedades a un selector de enlaces y captar con excelencia la
atención del usuario. Por este motivo, mediante CSS aplicaremos estilos a un hipervínculo.
Al navegar en internet
visualizamos los enlaces en color azul, es un estilo predeterminado de los
navegadores web, sin embargo,
mediante propiedades del leguaje CSS es posible modificarlos para llamar la
atención del usuario, tal como se muestra en la ilustración.
061-01_1005_ilu01. Enlaces de diferentes colores
Para agregar un
estilo al enlace:
- Creamos el
documento con extensión CSS en la carpeta proyecto.
- Definimos
el selector con la etiqueta a.
- Declaramos
el atributo color y como valor
definimos red, en español rojo.
061-01_1005_ilu02. Especificación de color a un enlace
Posteriormente agregamos el enlace
en el documento HTML, y como el documento CSS está fuera de la carpeta donde se
encuentra el documento principal, agregamos en la referencia de la etiqueta link dos puntos. Por lo tanto, en la
vista del usuario el enlace cambia al color especificado.
061-01_1005_ilu03. Visualización de color a un enlace
En un proyecto web con gran número de enlaces, es
posible aplicar un color diferente a cierta cantidad, y el resto dejarlo por
defecto en azul o asignarle otro color. Para ello se utilizan las clases,
mediante los pasos detallados a continuación:
- Agregamos
el atributo class a cada enlace y
especificamos el nombre de cada uno. En este ejemplo, serán uno y dos. Sin embargo, es necesario asignar nombre a las clases según el
contenido y dejar a un lado la utilidad.
- Definimos en
el documento CSS primero el selector a,
luego punto y el nombre de la clase.
- Especificamos
dentro de las llaves las declaraciones correspondientes a cada color, en este
ejemplo: pink, rosado en español, y el
otro color está en hexadecimal, correspondiente al anaranjado.
Al ejecutar el código en el
navegador, observamos los tres enlaces con colores diferentes cada uno. Aunque
también es posible hacerlo solamente con el documento HTML, es importante tener
un orden y separar el estilo del marcado.
061-01_1005_ilu04. Especificación de clases a enlaces
A los selectores de enlaces es
posible aplicarles diferentes tipos de estilos, por ejemplo, con la propiedad border-bottom definimos una línea
adicional en la parte de abajo del texto. En este caso, con valores: dashed, 2px y #9F3, es decir, se muestra en líneas punteadas, grosor de 2
píxeles y color verde, de esta forma, el enlace se expone con mayor vistosidad.
061-01_1005_ilu05. Estilos adicionales a enlaces
Keynotes
- Al navegar en internet visualizamos los
enlaces en color azul, es un estilo predeterminado de los navegadores web, sin embargo, mediante propiedades
del leguaje CSS es posible modificarlos para llamar la atención del usuario.
- En un proyecto web con gran número de enlaces, es posible aplicar un color
diferente a cierta cantidad, y el resto dejarlo por defecto en azul o asignarle
otro color. Para ello se utilizan las clases.
- A los selectores de enlaces es posible
aplicarles diferentes tipos de estilos, por ejemplo, con la propiedad border-bottom definimos una línea
adicional en la parte de abajo del texto.
RetoCrea cinco estilos diferentes a hipervínculos mediante
un documento CSS. Previamente deben estar marcados en el documento HTML. Sigue
las recomendaciones oficiales de este lenguaje.
¡Comparte el resultado final de tu reto en vPages y pide a tus compañeros un aporte
para optimizar el código!
Tiempo disponible: entre 15 y 30
minutos.
CierreA través de la creación de estilos a un
hipervínculo en un documento CSS definimos correctamente las propiedades de un
selector de enlaces, y mostramos diseños personalizados de los mismos en
nuestra página web. Si seguimos las
recomendaciones oficiales de este lenguaje con determinación y creatividad
captaremos de forma óptima la atención del
usuario.
