Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

.

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

 

4. Enlaces y Listas (I)

4.1 Enlaces

En esta página veremos cómo cambiar el formato o estilo de los enlaces mediante código CSS.

Características de los enlaces.

En anteriores temas, explicábamos lo que era la herencia en CSS, pues bien, una de las características de los enlaces es que no heredan todas las propiedades definidas en su elemento padre. Concretamente el color y el subrayado son los elementos que permanecen igual aunque cambien en su elemento padre; las demás propiedades como el tamaño de letra, el tipo de letra, el estilo en cursiva o negrita, son en principio heredadas.

Por lo tanto, para cambiar el color o el subrayado de un enlace el selector debe apuntar explicitamente a la etiqueta del enlace.

Los enlaces llevan por defecto el color azul, y van todos subrayados. Para cambiar este estilo inicial usaremos las siguientes propiedades: color para cambiar el color, y text-decoration: none; para eliminar el subrayado. En esta última el valor none indica que no ponemos subrayado. Ejemplo:

p a { color:olive; text decoration: none; }

Esta regla, la aplicamos al siguiente código HTML:

<p><a href="http://www.wikipedia.org"> Enlace a Wikipedia</a> </p>

y el resultado en el navegador es el siguiente:

Enlace a Wikipedia

Si no eliminamos el subrayado y cambiamos el color de la letra, el subrayado saldrá del mismo color que la letra. Sin embargo, si queremos un subrayado de diferente color, podemos usar el truco de ponerle al enlace un borde inferior de distinto color, después de eliminar el subrayado Veamos un ejemplo:

p a { color:purple; text decoration: none; border-bottom: 2px solid orange; }

Aplicamos esta regla al mismo código HTML del ejemplo anterior y obtenemos:

Enlace a Wikipedia

Por lo demás podemos aplicar a los enlaces las mismas propiedades que a cualquier otro texto, pudiendo así hacer que los enlaces se diferencien por algo más que el color o el subrayado.

Pseudoclases para enlaces

Una característica que tienen los enlaces es que no siempre se muestran de la misma manera. En muchas páginas los enlaces cambian de estilo según éstos hayan sido visitados o no, o cuando se les pasa el ratón por encima. Esto se debe a que los enlaces pueden tener varios estados.

Ya vimos las pseudoclases al ver el estilo de los textos en CSS. Éstos podían tener pseudoclase de "primera línea" (:first-line) o de primera letra, (:first-letter). El concepto de las pseudoclases con los enlaces es el mismo, y éstas afectan a los estados del enlace. Las pseudoclases en los enlaces son las siguientes:

• :link : Es el estilo del enlace en su estado original. El enlace aún no ha sido visitado.
• :visited : Es el estilo del enlace que ya ha sido visitado.
• :hover : Es el estilo del enlace mientras se posiciona el puntero del ratón sobre el enlace.
• :active : Es el estilo del enlace cuando se está pinchando sobre el enlace (el tiempo durante el que se aplica este estilo es muy breve).

Se recomienda aplicar las pseudoclases en este mismo orden. Las pseudoclases link y visited sólo pueden aplicarse a los enlaces, mientras que las pseudoclases hover y active pueden aplicarse a todo tipo de elementos.

Veamos un ejemplo: al enlace de los ejemplos anteriores le aplicamos las siguientes pseudoclases:

p a:link { color: maroon; text-decoration: none; }

p a:visited { color: orange; text-decoration: none; font-weight: bold; }

p a:hover { color: green; text-decoration: underline; font-style:italic; }

p a:active { color: navy; text-decoration: none; font-variant: small-caps; }

En el navegador lo veremos así:

Enlace a Wikipedia

Lo que se suele hacer es aplicar primero un estilo general al enlace completo (sin usar las pseudoclases) y después aplicar los cambios a las pseudoclases que nos interesen.

También se pueden combinar en un mismo elemento pseudo-clases que sean compatibles:

a:visited:hover { ... }

En este ejemplo el estilo se aplicará cuando en un enlace ya visitado se pase el puntero del ratón por encima.

---

En La siguente página veremos el estilo de las listas con CSS.

Listas

---

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com