Actualizado el 14-01-2007
versión para imprimir
Sintaxis
Una hoja de estilo se compone de reglas de visualización (reglas de estilo).
Cada regla consta de un SELECTOR, que es el que indica a que elemento o parte de la página se aplica el estilo; normalmente los selectores son etiquetas HTML (p.e. h1 sería un selector que permitiría aplicar estilos a las cabeceras <h1>). A cada selector debe seguir una DECLARACION del estilo que ha de serle aplicado (p.e. color:blue). Toda declaración tiene dos partes: PROPIEDAD (por ejemplo, color) y VALOR (por ejemplo, blue).
El enunciado de reglas constituye la forma usual de declarar estilos, y deben ajustarse a la sintaxis definida por la especificación CSS; si el navegador encuentra un selector que no entiende, ignorará la entera declaración. Si encuentra dentro de la declaración una propiedad o valor que no comprende ignorará esta parte de la declaración, pero deberá procesar el resto.
Los selectores disponibles son, como queda dicho, todas las etiquetas HTML. A cualquier etiqueta HTML se le puede asignar un estilo; además como veremos en la página siguiente, puedes crear selectores propios. Las propiedades disponibles son las enunciadas como tales en el standard CSS; y los valores son asimismo los asignados en dicho standard. O dicho de otro modo: solo pueden utilizarse propiedades y valores contemplados en el standard, no siendo posible crear tus propias propiedades y valores.
Los estilos, entonces, se definen así:
selector { propiedad:valor }
h1 {color : blue}
Los selectores se escriben omitiendo las llaves < y >, es decir, simplemente h1, h2, etc. La declaración {propiedad : valor} ha de ir encerrada en llaves { }.
Pueden asignarse varias propiedades a un mismo selector, separadas por punto y coma:
Selector { propiedad1: valor1; propiedad2: valor2 }
h1 {color: yellow; background-color: red }
Tambien se pueden asignar propiedades de forma conjunta a varios selectores:
Selector1, Selector2, {propiedad1:valor1;propiedad2:valor2}
Como ejemplo, veamos una definición de un estilo para los elementos (Selectores) h1 y h2:
<head> <title></title> <style> h1 { font-size: x-large; color: red; } h2 { font-size: large; color: blue; } </style> </head>
Donde indicamos al navegador que deberá visualizar los encabezamientos (textos insertados entre etiquetas <h1>) en letra roja y tamaño extra grande; mientras que los de nivel <h2> se visualizarán en tamaño grande y color azul.
Del mismo modo, si ambos selectores tuvieran las mismas propiedades, podríamos haber escrito:
<head> <title>...</title> <style> h1, h2 { font-size: x-large; color: red; } </style> </head>
Y si queremos que alguno de los selectores que comparten propiedades tenga alguna en solitario, basta con duplicar una declaración para ese solo selector:
<head> <title>...</title> <style> h1, h2 { font-size: x-large; color: red; } h2 {font-family:garamond;} </style> </head>
Las recomendaciones del standard CSS del W3 contienen las definiciones oficiales de todas las propiedades y valores que deben ser interpretados por un navegador para considerarlo como compatible con CSS. Mas adelante se incluye un listado de valores y propiedades.
Conflictos y Herencias
En el standard CSS está previsto que pueda aplicarse de forma simultánea mas de una hoja de estilo. Si estas definiciones de estilo no están en conflicto, todas ellas son aplicadas. Si por el contrario dos o mas reglas regulan de forma diferente la misma propiedad o elemento, surge un conflicto de estilos, que será resuelto en el orden jerárquico predeterminado en el standard. La regla general es que los estilos declarados por el autor del documento prevalecen sobre los estilos declarados por el usuario, y tanto los diseñados por el autor como por el usuario prevalecen sobre los estilos por defecto del navegador.
Las hojas de estilo enlazadas o importadas prevalecen unas sobre otras, en cascada, en el orden en que son llamadas.
La resolución de conflictos de estilo mediante reglas jerárquicas predeterminadas posibilita que el autor busque de propósito estos conflictos para controlar en detalle la visualización del documento.
origen
Con carácter general, las reglas de estilo del autor de la pagina prevalecen sobre las reglas del usuario que la visita, y estas a su vez prevalecen sobre los estilos por defecto del navegador.
peso: !important
Una regla de estilo puede ser definida (por el autor o por el usuario) como importante y en tal caso cambia el orden de precedencia; se aplicará en primer lugar la regla 'importante' del usuario, con precedencia sobre la del autor
La sintaxis es la siguiente:
p {background:red !important;}
El standard CSS1 preveia que una regla importante del autor prevalecia sobre la regla importante del usuario. Actualmente con CSS2 es a la inversa y la regla importante del usuario toma precedencia.
Lo especifico vence a lo generico
Cuanto mas especifica sea una regla (cuanto mas identificado esté el elemento al que se aplica) tendrá mas preferencia. Por eso una regla de un elemento contenedor se heredará por los elementos hijos salvo que estos tengan su propia regla (que se les aplicará mas especificamente)
Las etiquetas HTML siguen un orden jerárquico, de
anidamiento (BODY se anida dentro de la etiqueta HTML; los elementos UL, P,
definen bloques anidados dentro de BODY, etc) y esta estructura
repercute en la definición de estilos, segun un orden de
herencia. La etiqueta principal es
<HTML> seguida de la etiqueta <BODY>, que contienen todas las demas, y asi sucesivamente. Si se asignan estilos a la etiqueta <BODY>
todas las tablas, listas, párrafos y cualquier otro
elemento incluido en el BODY heredará el estilo
definido, ya que usualmente todas las propiedades son heredables,
y por tanto todos los sub-elementos descendentes tomarán los valores
de las propiedades del elemento superior, salvo que
tengan asignado su propio valor.
Para establecer estilos genéricos que se apliquen en toda
la página, basta por tanto asignarlos al selector <BODY>
Atendiendo a esta jerarquia entre etiquetas, las reglas de estilo mas específicas se aplican con precedencia a las mas genéricas
orden
Si un conflicto entre reglas no puede resolverse con los criterios anteriores, prevalece la 'leida' en ultimo lugar por el navegador.
Las reglas de estilo externas son leidas antes que las internas (si hay varias enlazadas externamente, son leidas en el orden de los enlaces). Despues se leen las declaraciones de estilo incluidas en la seccion HEAD de la página y por ultimo las declaraciones 'in line'.
En definitiva, en caso de conflicto que no pueda ser resuelto de otra manera, las declaraciones in line tendrán preferencia (salvo que colisionen con reglas definidas !important;)
Sintaxis mas estricta
Los navegadores son bastante tolerantes con los errores en las etiquetas html; no ocurre lo mismo con las reglas css. Una regla mal escrita será ignorada. Estas son algunas de las reglas a tener en cuenta:
- Los selectores aunque sean elementos html se escriben sin <>
- Puedes usar minusculas o mayusculas
- las declaraciones para cada selector van encerradas en llaves {}
- Cuando establezcas varias declaraciones para un mismo selector, separalas por ;
- Cuando uses unidades de medidas, no emplees espacios entre el numero y la unidad: 2cm
- Puedes añadir lineas y espacios en blanco entre declaraciones para mejorar la legibilidad.
- En las hojas de estilo externas el único formato de comentario admisible es /* */