| 1.2 Sintaxis de las CSS | ||||
 |
Anterior | Siguiente |  |
|
¡CSS en acción!
Seleccione otra hoja de estilo para navegar:
Actual: default.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
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 un valor (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.
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
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 */