milmazz

Enlaces

Es importante resaltar que ciertos navegadores podrían ignorar una o más reglas de pseudo clases en los enlaces, a menos que dichas pseudo clases sean listadas en el orden siguiente: :link, :visited, :hover y :active (LVHA). Según el Sr. Zeldman existe un mnemónico anglosajón que podría ayudarle a recordar dicho orden, dicho mnemónico es LoVe-HA!.

Seguramente ud. se estará preguntando en este instante lo siguiente: ¿qué es un selector de pseudo-clase?, en el mundo de las hojas de estilos en cascada, una clase es aquella que es especificada explicitamente con el atributo class dentro de la estructura del documento XHTML. Una pseudo clase es aquella que depende de la actividad del usuario o del estado que indique el navegador (:hover, :visited).

a:link, a:visited{
  font-size: 0.85em;
  color: #c30;
  background: transparent;
  font-weight: bold;
  text-decoration: none;
}
a:hover, a:active{
  color: #999;
  background: transparent;
  text-decoration: underline;
}
a[hreflang]:after{
  content: " [" attr(hreflang) "]";
}
#footer a:hover {
  color: #666;
  text-decoration: underline;
}

Vea el resultado de aplicar las reglas de estilo a la estructura del documento.

Posiblemente la regla más complicada de las mostradas anteriormente es a[hreflang]:after, voy a explicar brevemente de que trata todo esto, a[hreflang], simplemente aplicará sobre todos aquellos enlaces que posean el atributo hreflang sin importar el valor que tengan. La propiedad content es utilizada en conjunto con los pseudo elementos :before o :after para generar contenido antes o después del elemento respectivamente, dentro de la propiedad content se utilizan dos cadenas de carácteres, tanto el corchete que abre como el corchete que cierra, dentro de los corchetes se utiliza el valor attr(hreflang), el cual devolverá como una cadena el valor del atributo hreflang ubicado dentro del selector a.

Pie de página

El pie de página normalmente es utilizado para indicar el tipo de copyright del contenido o algún tipo de firma en particular.

Se han realizado unos ajustes al pie de página, estos son los siguientes:

#footer{
  background: #fff url(bg-footer.png) repeat-x top left;
  color: #333;
  border-top: 2px solid #666;
}
#footer p{
  margin: 0;
  padding: 4px 9px 3px 10px;
}
#footer a{
  color: #000;
}

Vea el resultado de aplicar las reglas de estilo a la estructura del documento.

Todas las propiedades utilizadas en estas reglas se han descrito previamente, no considero necesario volver a hacerlo.

Referencias

• Ni fijo, ni líquido. Elástico
• CSS Centering 101
• Revised Image Replacement
• CSS in Action: A Hybrid Layout (Part II)
• Fundación Sidar

Pages: 1 2 3 4