CSS: lenguaje de estilo para las páginas web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 58
Visitas el mes pasado: 138
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
En esta página veremos cómo cambiar el formato o estilo de los enlaces mediante código CSS.
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:
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:
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.
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í:
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.
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