Dar estilo a los enlaces - Aprende sobre desarrollo web MDN PDF

Preview

Summary

Apuntes sacados de la pagina de Mozilla que son de los cuales se basa esta asignatura, pero en formato PDF para leer en un dispositivo sin internet...

Description

17/2/22, 22:00

Dar estilo a los enlaces - Aprende sobre desarrollo web | MDN

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

Dar estilo a los enlaces A la hora de dar estilo a los enlaces, es importante comprender cómo utilizar las pseudoclases para diseñar los estados de un enlace de manera efectiva y cómo diseñar enlaces para su uso en diversas funciones de interfaz comunes, como menús y pestañas de navegación. Veremos todos estos temas en este artículo.

Prerrequisitos:

Objetivo:

Conocimientos básicos de informática, conceptos básicos de HTML (véase Introducción al HTML), conocimientos básicos de CSS (véase Introducción al CSS), nociones de aplicación de estilo con CSS a textos y tipos de letra. Aprender a dar formato a los estados de un enlace y a usarlos de manera efectiva en algunas funciones de interfaz de usuario comunes, como los menús de navegación.

Echemos un vistazo a algunos enlaces Analizamos cómo se implementan los enlaces en tu HTML de acuerdo con las buenas prácticas de Creación de hipervínculos. En este artículo desarrollaremos estos conocimientos y te mostraremos las buenas prácticas del diseño de enlaces.

Los estados de un enlace Lo primero que hay que entender es el concepto de estados de un enlace (diferentes estados en los que pueden estar los enlaces, que pueden diseñarse usando diferentes pseudoclases): Link (no visitado): El estado predeterminado que presenta un enlace cuando no está en ningún otro estado. Se puede especificar usando la pseudoclase :link . Visited: Un enlace cuando ya se ha visitado (está grabado en el historial del navegador); se le aplica otro formato con la pseudoclase :visited . Hover: Un enlace cuando se le pasa el cursor por encima; se le aplica otro formato con la pseudoclase :hover . Focus: Un enlace cuando tiene el foco (por ejemplo, se salta a este con la tecla Tab https://developer.mozilla.org/es/docs/Learn/CSS/Styling_text/Styling_links

1/12

17/2/22, 22:00

Dar estilo a los enlaces - Aprende sobre desarrollo web | MDN

del teclado o se le da el foco mediante programación usando HTMLElement.focus() ); se le aplica un formato diferente con la pseudoclase :focus . Active: Un enlace cuando se activa (por ejemplo, se hace clic encima); se le aplica un formato diferente con la pseudoclase :active .

Estilos predeterminados El ejemplo siguiente ilustra cómo se comportará un enlace por defecto (el CSS simplemente amplía y centra el texto para que destaque más). Un enlace simple p { font-size: 2rem; text-align: center; }

Un enlace simple

Nota: Todos los enlaces que hay en los ejemplos de esta página son simulados, encontrarás un símbolo # (almohadilla) en el lugar de una URL real. Esto es porque si incluyéramos enlaces reales, los ejemplos quedarían interrumpidos al hacer clic (daría error, o se cargaría una página en el ejemplo incrustado de la que no podrías volver atrás). # solo establece enlaces dentro de la misma página.

A medida que explores los estilos predeterminados, observarás algunas cosas: Los enlaces están subrayados. Los enlaces no visitados se ven de color azul. Los enlaces visitados se ven de color morado. Al pasar el puntero del ratón sobre un enlace, cambia a un pequeño icono en forma de mano. Los enlaces que tienen el foco presentan un contorno alrededor: deberías poder saltar por los enlaces de esta página con el teclado pulsando la tecla de tabulación (en Mac, es posible que necesites habilitar la opción Acceso total por teclado: Todos los controles presionando Ctrl + F7 para que funcione). https://developer.mozilla.org/es/docs/Learn/CSS/Styling_text/Styling_links

2/12

17/2/22, 22:00

Dar estilo a los enlaces - Aprende sobre desarrollo web | MDN

Los enlaces activos se muestran de color rojo (intenta mantener el cursor sobre el enlace mientras haces clic). Curiosamente, estos estilos predeterminados son casi los mismos que se utilizaban al inicio de los navegadores en la década de 1990. Esto se debe a que los usuarios conocen y esperan que sea de esta forma. Podría confundir a mucha gente que los enlaces se mostrasen de manera diferente. Esto no quiere decir que no puedas cambiar el formato de los enlaces, solo que no deberías alejarte mucho de la conducta esperada. Al menos deberías: Subrayar los enlaces, pero no otros elementos. Si no quieres hacerlo, al menos destacarlos de alguna otra forma. Hacer que reaccionen de alguna manera cuando se les pasa el cursor por encima, y de una manera algo diferente cuando se activan. Los estilos por defecto se pueden desactivar/cambiar usando las propiedades CSS siguientes: color para el color del texto. cursor para el estilo del cursor (no debes deshabilitar esta opción a menos que tengas una muy buena razón para hacerlo). outline para el contorno del texto (un contorno es similar a un borde, la única diferencia es que el borde ocupa un espacio en la caja y el contorno solo se solapa sobre el fondo). El contorno es una ayuda de accesibilidad útil, así que piénsatelo bien antes de desactivar esta opción; al menos deberías plantear dos estilos para los estados de pasar el puntero por encima y de tener el foco. Nota: No estás limitado a las propiedades anteriores para diseñar tus enlaces; tienes libertad para usar cualquier propiedad que te guste. ¡Solo trata de que no resulte descabellado!

Dar formato a algunos enlaces Ahora que hemos visto los estados predeterminados, veamos un conjunto típico de estilos de enlace.

Para empezar, escribiremos nuestro conjunto de reglas vacío: a { }

a:link { https://developer.mozilla.org/es/docs/Learn/CSS/Styling_text/Styling_links

3/12

17/2/22, 22:00

Dar estilo a los enlaces - Aprende sobre desarrollo web | MDN

} a:visited { } a:focus { } a:hover { } a:active { } Este orden es importante porque los estilos de enlace se construyen sobre los anteriores. Por ejemplo, los estilos de la primera regla se aplicarán a todas las reglas siguientes, y cuando activas un enlace también pasas con el cursor por encima. Si los pones en un orden incorrecto, no funcionarán adecuadamente. Para recordar este orden, puedes intentar utilizar una fórmula nemotécnica como LoVe Fears HAte. Ahora vamos a añadir algo más de información para darles formato: body { width: 300px; margin: 0 auto; font-size: 1.2rem; font-family: sans-serif; } p { line-height: 1.4; }

a { outline: none; text-decoration: none; padding: 2px 1px 0; } a:link { l #265301 https://developer.mozilla.org/es/docs/Learn/CSS/Styling_text/Styling_links

4/12

17/2/22, 22:00

Dar estilo a los enlaces - Aprende sobre desarrollo web | MDN

color: #265301; } a:visited { color: #437A16; } a:focus { border-bottom: 1px solid; background: #BAE498; } a:hover { border-bottom: 1px solid; background: #CDFEAA; } a:active { background: #265301; color: #CDFEAA; } También proporcionaremos algún ejemplo de HTML al que aplicar CSS: Dispones de varios navegadores, como Mozilla Firefox, Google Chrome y Microsoft Edge. Poner los dos juntos nos da este resultado:

¿Qué hemos hecho aquí? Sin duda tiene un aspecto diferente al estilo predeterminado, pero todavía ofrece una experiencia lo suficientemente familiar como para que los usuarios sepan de qué se trata: Las dos primeras reglas no presentan gran interés en esta explicación. La tercera regla usa el selector a para eliminar el subrayado de texto predeterminado y el contorno en el estado de foco (que de todos modos varía dependiendo del navegador) y añade una pequeña cantidad de área de relleno a cada enlace (todo esto

https://developer.mozilla.org/es/docs/Learn/CSS/Styling_text/Styling_links

5/12

17/2/22, 22:00

Dar estilo a los enlaces - Aprende sobre desarrollo web | MDN

navegador), y añade una pequeña cantidad de área de relleno a cada enlace (todo esto se aclarará más adelante). A continuación, utilizamos los selectores a:link y a:visited para establecer un par de variaciones de color en los enlaces no visitados y visitados, para que se distingan. Las dos reglas siguientes usan a:focus y a:hover para establecer colores de fondo diferentes para los enlaces con el foco y los enlaces activados con el paso del cursor, y además un subrayado para que el enlace destaque aún más. Aquí destacamos dos aspectos: El subrayado se ha creado usando border-bottom y no text-decoration , y es que algunas personas lo prefieren porque el primero tiene mejores opciones en cuanto a estilo, y se dibuja un poco más abajo, por lo que no pisa los trazos descendentes de la palabra que se subraya (por ejemplo, los trazos de la g o la y). El valor border-bottom se ha establecido en 1px solid sin especificar ningún color. Así, el borde adopta el mismo color que el texto del elemento, lo que es útil en casos en los que el texto es de un color diferente en cada caso. Finalmente, a:active se usa para dar a los enlaces un esquema de color inverso mientras se activan, ¡para dejar claro que algo importante sucede!

Aprendizaje activo: proporciona estilo a tus enlaces En esta sesión de aprendizaje activo, queremos que tomes nuestro conjunto de reglas vacías y añadas tus propias declaraciones para lograr unos enlaces geniales. Da rienda suelta a tu imaginación. Estamos seguros de que puedes crear algo genial y tan funcional como nuestro ejemplo anterior. Si te equivocas, puedes volver a empezar pulsando el botón Reinicio. Si te quedas encallado, pulsa el botón Mostrar la solución para recuperar el ejemplo anterior.

https://developer.mozilla.org/es/docs/Learn/CSS/Styling_text/Styling_links

6/12

17/2/22, 22:00

Dar estilo a los enlaces - Aprende sobre desarrollo web | MDN

Incluir iconos en los enlaces Una práctica común es incluir iconos en los enlaces para proporcionar más de un indicador en cuanto a qué tipo de contenido apunta. Echemos un vistazo a un ejemplo muy simple que añade un icono a enlaces externos (enlaces que conducen a otros sitios web). Este icono suele parecerse a una pequeña flecha que sale de un cuadro; para este ejemplo, usaremos este fantástico ejemplo de icons8.com .

Echemos un vistazo a algunos elementos HTML y CSS que nos van a proporcionar el efecto que queremos. En primer lugar, algunos elementos HTML sencillos para dar estilo: Para obtener más información sobre el tiempo, visite nuestra...