WebMaestro - Capitulo 25 - Hojas de estilo en cascada. Consejos

25. Hojas de estilo en cascada.
Consejos de utilización

En este capítulo se amplían los conceptos vistos en los dos capítulos anteriores, y se introducen algunos nuevos sobre las hojas de estilo en cascada.

Agrupando distintos atributos

Supongamos que se quieren atribuir los mismos atributos a diferentes etiquetas, como por ejemplo:

  H1 {font-size: 15pt;
      font-weight: bold;
      color: maroon}
  H2 {font-size: 15pt;
      font-weight: bold;
      color: maroon}
  H3 {font-size: 15pt;
      font-weight: bold;
      color: maroon}

Se pueden agrupar de esta manera:

  H1, H2, H3 {font-size: 15pt;
            font-weight: bold;
            color: maroon}

Agrupación de los atributos del texto

En el capítulo anterior se han visto una serie de atributos relacionados con la apariencia del texto. Se pueden simplificar agrupándolos de una manera determinada. Así, por ejemplo, en lugar de:

 P {font-weight: bold;
    font-style: italic;
    font-size: 12pt;
    line-height: 20pt;
    font-family: Times, serif; }

Se pueden agrupar en un único atributo llamado font:

 P {font: bold italic 12pt/20pt Times, serif}

Nota: El orden de los atributos es significativo. Los atributos font-weight y font-style se deben especificar antes que los demás.

Agrupación de los atributos de los márgenes

También se pueden agrupar los tres distintos atributos para los márgenes (superior, derecho e izquierdo) en un único atributo llamado margin. Así, por ejemplo, en lugar de:

BODY {margin-top: 20px;
      margin-right: -10px;
      margin-left: -10px}

Se puede poner:

BODY {margin: 20px -10px-10px}

El orden de colocación es significativo. Debe ser: superior (top), derecho (right) e izquierdo (left). Si se pone un único valor, será aplicado a los tres márgenes.

Variaciones por medio de clases

En el capítulo 23 vimos que uno de los métodos era la inclusión global del estilo, en el que se definían los estilos de un bloque de distintas etiquetas. Vimos allí este ejemplo:

<STYLE TYPE="text/css">
BODY {background: yellow ; font-size: 10pt; font-family: Arial; margin-left: 0.5in; margin-right: 0.5in}
H1 {background: blue; font-size: 14pt; font-weight: bold; color: red}
H2 {font-size: 12pt; font-weight: bold; color: red}
DIV {background: URL(nubes.jpg)}
</STYLE>

Como se puede ver, se define para la etiqueta H2, por ejemplo, que su texto sea de color rojo (red). Pero esto hace que, obligatoriamente, todas las cabeceras de nivel H2 sean de este color en toda la página.

Pero nos podría interesar, por el motivo que sea, que unas veces tenga el color rojo y otras veces sea de otros colores. Para conseguirlo, se pueden emplear unas clases (variantes de esta etiqueta). Para ello, se define separadamente la etiqueta H2, seguida de un punto y un nombre que queramos, como por ejemplo:

H2.rojo {font-size: 12pt; font-weight: bold; color: red}
H2.verde {font-size: 12pt; font-weight: bold; color: green}
H2.azul {font-size: 12pt; font-weight: bold; color: blue}

y en la página, podremos utilizar, según nos convenga, una u otra de estas variantes de la siguiente manera: <H2 CLASS=rojo>Esta cabecera será de color rojo</H2> <H2 CLASS=verde>Esta cabecera será de color verde</H2>

<H2 CLASS=azul>Esta cabecera será de color azul</H2>

Como se ve, esto nos da una flexiblidad aún mayor para obtener la apariencia que queramos en nuestra páginas.

Aplicación de estilo a los enlaces

Las hojas de estilo también permiten modificar a voluntad la apariencia de los enlaces, asignando cualquiera de los atributos vistos (color del texto, tamaño de la fuente, existencia o no del subrayado, etc.).

Hay dos tipos de enlaces que se pueden modificar:

A:link enlaces que todavía no han sido visitados (pulsados)
A:visited enlaces que ya han sido visitados (pulsados)

Por ejemplo:

A:link {color: red}
A:visited {color: green}

hace que los enlaces sin visitar sean de color rojo, y una vez visitados se pongan de color verde.

Si se les aplica el atributo text-decoration visto en el capítulo anterior, ajustado al parámetro none (ninguno), hace que los enlaces no estén subrayados. Ejemplo:

A:visited {color: fuchsia; text-decoration: none}

hace que los enlaces visitados sean de color fucsia y no estén subrayados.

Comentarios

Se pueden añadir comentarios propios a las hojas de estilo, que pueden servir de recordatorio posterior. Se pueden colocar en cualquier sitio de la especificación, siempre que vayan englobados entre los caracteres /* y */. Ejemplo:

H1 {font: 20pt/22pt bold; color=#00FF00} /*Color verde para las cabeceras de nivel 1 */

Diseñando para todos los navegadores

Si se utiliza el método de incluir un bloque de estilo en la cabecera (ver cap. 23), que consiste en poner las distintas instrucciones de estilo entre las etiquetas <STYLE> y </STYLE>, tal como en el ejemplo que se vió allí:

<STYLE TYPE="text/css">
BODY {background: yellow ; font-size: 10pt; font-family: Arial; margin-left: 0.5in; margin-right: 0.5in}
H1 {background: blue; font-size: 14pt; font-weight: bold; color: red}
H2 {font-size: 12pt; font-weight: bold; color: red}
DIV {background: URL(nubes.jpg)}
</STYLE>

en los navegadores que no implementen las hojas de estilo se ignorarán las etiquetas <STYLE> y </STYLE>, pero podría ocurrir que aparezca como texto el bloque de definición del estilo.

Para evitar esto, es conveniente englobar dicho bloque de información entre los símbolos  (como se vió en el Cap. 2), que son los que nos permiten hacer comentarios no visibles en la pantalla. Por tanto, es conveniente poner el bloque de definición del estilo de esta manera:

<STYLE TYPE="text/css">
<!--
BODY {background: yellow ; font-size: 10pt; font-family: Arial; margin-left: 0.5in; margin-right: 0.5in}
H1 {background: blue; font-size: 14pt; font-weight: bold; color: red}
H2 {font-size: 12pt; font-weight: bold; color: red}
DIV {background: URL(nubes.jpg)}
-->
</STYLE>

Aprovechando la herencia entre etiquetas

Como sabemos, las etiquetas de un documento HTML tienen una estructura definida, que de manera muy resumida se puede poner de esta forma:

<HTML>
<BODY>
.... (conjunto de etiquetas que conforman la página)
</BODY>
</HTML>

Como se puede ver, la etiqueta <BODY> engloba a todas las demás. Si se la asigna un estilo determinado a esta etiqueta, todos los elementos que estén dentro de la página (tablas, listas, párrafos, etc.) heredarán este estilo.

Por tanto, para establecer un estilo global a la página entera, lo más apropiado es atribuíserlo a la etiqueta <BODY>. Por ejemplo:

  BODY {font: 10pt/11pt Arial, Helvetica, sans-serif; 
        background: url(nubes.jpg);
        margin-left: 0.5in;
        margin-right: 0.5in}

establece para la página entera la fuente, separación entre líneas, imagen de fondo y espesor de los márgenes. Si se precisa que ciertos elementos concretos dentro de la página tengan otras características distinta a la general, entonces hay que definirlas por separado.

25. Hojas de estilo en cascada.Consejos de utilización