CSS

Estructura de una CSS

Hemos visto que las CSS pueden ser externas o estar contenidas en el archivo HTML. Una Hoja de Estilo externa es un simple archivo de texto con extensión .CSS (en algunos navegadores, esto no es absolutamente necesario pero conviene no obviarlo). Este archivo no necesita ninguna declaración inicial ni otra identificación que su propio nombre con extensión y contiene una serie de instrucciones llamadas estamentos. Los estamentos pueden ser de dos clases:   Ver 

•  Reglas 
•  Reglas-arroba 

  Volver 

Reglas

Una regla es un tipo de estamento que (1) identifica un elemento de la página HTML y (2) le indica al navegador el estilo que deberá tener ese elemento. El siguiente es un ejemplo de una regla CSS:

P {

  background-color: red;

  color: #FFFFFF

} 

Cada regla consta de: un selector (P) que identifica (o selecciona) un elemento de la página Web.

Al selector le sigue un bloque de declaraciones que comienza con una llave de apertura ({) y termina con otra llave de cierre (}). Entre las llaves van las declaraciones (background-color: red; color: #FFFFFF), que son las que le indican al browser el estilo para el elemento seleccionado.

Las declaraciones, a su vez, tienen dos partes: una propiedad (background-color, color) que consiste en alguna de las palabras claves definidas por el lenguaje, seguida de dos puntos (:) y unvalor (red, #FFFFFF) para esa propiedad. Existen distintos valores y cada propiedad puede aceptar algunos de esos valores.

El ejemplo anterior provocará que los párrafos (elementos P) de la página Web tengan de primer plano (color) un color blanco (#FFFFFF) y un fondo (background-color) de color rojo (red). Cuando hay más de una declaración, como en este caso, deben ir separadas entre sí por punto y coma (;).

Por una referencia rápida de las propiedades y valores posibles consulte el Indice de Propiedades de este manual.

  Volver 

Reglas arroba

El otro tipo de estamento se llama regla arroba porque comienza con el carácter arroba (@) seguido inmediatamente (es decir, sin espacios intermedios) por un identificador. Según de qué regla arroba se trate finalizará con un punto y coma (;) o podrá tener un bloque de declaraciones posterior. Estos son dos ejemplos de este tipo de regla:

@import "impres.css";

@media print {

  BODY { font-size: 10pt }

}

Las reglas arroba sirven para indicarle al navegador algo más que un estilo de composición. En el ejemplo anterior, la primera sirve para importar otra Hoja de Estilo para ser usada conjuntamente con la actual, la segunda indica que la declaración BODY {font-size: 10pt} se usará solamente cuando la página sea impresa.   Ver 

  Volver 

Comentarios

En cualquier lugar de la página pueden incluirse comentarios. Estos no influyen en el procesamiento de la Hoja de Estilo y deben comenzar con una barra y un asterisco (/*) y terminar con un asterisco y una barra (*/). Pueden ocupar varias líneas de texto pero no pueden anidarse (incluir un comentario dentro de otro comentario).   Ver 

/* Esto es un comentario */