Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 58

Visitas el mes pasado: 63

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




4. Enlaces y Listas (I)

4.1 Enlaces

css

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, y cuando se les pasa el ratón pòr 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:

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







manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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