Cómo darle estilo a un vínculo con CSS

Escrito por ehow contributor | Traducido por juliana star
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo darle estilo a un vínculo con CSS
Una página web con dos estilos de vínculos diferentes.

Cómo darle estilo a un vínculo con CSS. Los hipervínculos de las páginas web tienen muchas propiedades a las que les puedes dar un estilo. Puedes cambiar el color, subrayado, fondo y muchos otros aspectos de su apariencia con CSS. Estos son algunos consejos para comenzar con ello.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Necesitarás

  • Conocimiento básico de CSS
  • Conocimiento básico de HTML
  • Un editor de HTML
  • No es necesario nada nuevo para esta sección

Lista completaMinimizar

Instrucciones

    Estilos para todos tus vínculos

  1. 1

    El selector de CSS para hipervínculos es el selector A. El término correcto es ancla, no vínculo, pero los elementos A son llamados vínculos comúnmente. Es posible hacer referencia a los elementos A con los selectores de pseudo clases de CSS en base al estado del vínculo. Las pseudo clases más comunes usan estos selectores CSS:

    a:link a:visited a:hover a:active

  2. 2

    Las reglas de CSS para los diversos estados de los vínculos determinan la fuente, la decoración del texto (si el vínculo será subrayado o no), su color, su color o imagen de fondo, sus propiedades al mostrarse como alineado o bloqueado, su borde, relleno, margen y otras propiedades de CSS.

  3. 3

    Este simple conjunto de reglas primero permite que todos los elementos A se muestren en negritas. Luego va a través de los estados individuales de los vínculos para establecer diferentes valores de colores y decoraciones del texto para cada estado.

    a { font-weight: bold; }

    a:link { color: #660066; text-decoration: none; } a:visited { color: #663366; text-decoration: none; } a:hover { color: #660066; text-decoration: underline; } a:active { color: #660066; text-decoration: none; }

  4. 4

    Las reglas como las del ejemplo en el Paso 3 aplican para cualquiera de los vínculos en una página completa. Las propiedades como color de fondo, borde y otras pueden agregarse a las reglas como en el ejemplo del Paso 3.

    Estilos de vínculos para áreas específicas de una página web

  1. 1

    La mayoría de las páginas web se presentan con divisiones o áreas que pueden identificarse con un id o clase. Cuando colocas vínculos en un div u otra sección de la página web identificada por un id o clase, puedes crear selectores descendientes para estilizar los vínculos con reglas que apliquen solamente en esa sección.

  2. 2

    La imagen al principio de este artículo muestra un ejemplo de una página con vínculos que usan diferentes estilos en base a los selectores descendentes. Asume que las dos áreas de la página web fueron creadas mediante divs con ids asignados. El div content usa el id "content" y el div navbar usa el id "navbar".

  3. 3

    Usa el id (o las clases) que identifican varias divisiones de una página web para crear selectores que funcionen solamente en esa parte de la página. Usando los supuestos hechos en el Paso 2, las reglas para esos selectores crearán diferentes estilos en dos áreas de la página:

    content a:link

    content a:visited

    content a:hover

    content a:active

    navbar a:link

    navbar a:visited

    navbar a:hover

    navbar a:active

  4. 4

    Supón que tu página usa una clase llamada "blogspot" para cada entrada. Puedes agregar estilo a los vínculos individualmente en aquellas áreas de una página también. Los selectores descendientes para los vínculos en esa área de la página únicamente podrían verse así:

    .blogpost a:link .blogpost a:visited .blogpost a:hover .blogpost a:active

Consejos y advertencias

  • Un selector de pseudo clase usado con menor frecuencia es a:focus.
  • Para encontrar como hacer una exhibición de enlace como una navbar, consulta el artículo Cómo darle estilo a un vínculo con CSS.
  • Para obtener mejores resultados mantén las reglas en tu hoja de estilo en este orden: L-V-H-A o vínculo, visitado, suspendido o activo).

No dejes de ver

Recursos

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles