Selectores

Un fichero de estilo css tiene dentro muchos de estos selector { parametro:valor; parametro:valor; ... }

Tags html con id y class

Todos los tags de html admiten dos posibles atributos: class e id. A ellos se les pone como valor el nombre que nosotros queramos. Por ejemplo <p class="importante">Esto es un parrafo importante</p> <div id="contenido_principal">Aqu el contenido principal</div> Ambos sirven para diferenciar ese tag html de otros tag iguales. En el ejemplo, habr tags <p> "importante" y tags <p> normales, que no llevarn el class="importante". Lo mismo con el id. La diferencia entre id y class es que id es un identificador nico para todo el texto html. Es decir, slo debe haber un id="contenido_principal" en todo el documento html, mientras que puede haber muchos tags con class="importante". Habitualmente se reserva id para identificar los bloques principales de nuestra pgina. Por ejemplo, "contenido_principal", "anuncios", "enlaces", "cabecera", "pie", etc. Se deja class para estilos que aparecern repetidos por la pgina en varios sitios. Por ejemplo "importante", "aviso", "cita", etc. Se aconseja que los nombres elegidos tengan referencia al contenido de la pgina y no al estilo con el que se va a visualizar. As, por ejemplo, es mejor un class "importante" que un class "rojo". El prrafo importante ser importante independientemente de cmo lo veamos. El prrafo rojo slo ser rojo si lo vemos rojo.

Selectores CSS
El selector no es ms que el tag de html al que queremos que afecte el estilo. Al tag que indiquemos en el selector le afectarn todas las parejas "parametro:valor" que hayamos puesto entre las llaves detrs de l en el fichero de estilo css. Por ejemplo, si ponemos esto p{ color:red; } Todos los prrafos del fichero html saldrn en rojo.

Combinar selectores
Antes de nada y para aclarar ideas diremos que

Dos selectores estn anidados cuando uno est dentro del otro, por ejemplo <p>esto esta <em>anidado</em> en esto</p> La etiqueta <em> est anidada en la etiqueta <p>, est dentro de ella. Los llamaremos padre (a <p>) e hijo (a <em>). Tambin habr nietos y familia variada. Dos selectores son adyacentes si uno sigue al otro <p>este parrafo y este</p><p>son adyacentes</p>

CSS nos permite elegir tags, adems de por el nombre, por lo siguiente:

Cmo est situado nuestro tag respecto a otros tags, es decir, si estn anidados, si son adyacentes, etc. En funcin de si ocurre en ellos algn evento del usuario, como click de ratn, ratn encima, tiene el foco, etc. En funcin de si tiene determinados atributos, como por ejemplo prrafos con align centrado.

En la siguiente tabla se ve la sintaxis.

Selector
Cmo est situado el tag respecto a otros tags * tag tag1 tag2 tag1 > tag2 tag1 + tag2 tag:first-child Cualquier tag html.

A qu tags afecta

un tag especfico. Por ejemplo, div equivaldra al tag <div> un tag2 anidado dentro de un tag1, en cualquier nivel de anidamiento. Por ejemplo, vale <tag1>...<otro>...<tag2>...</tag2>...</otro>...</tag1> Es decir, un tag2 que sea hijo, nieto, bisnieto... de tag1 Un tag2 que sea hijo de tag1. No valen nietos. Un tag2 que va detrs y es adyacente a tag1. tag que sea el primer hijo de su padre. Para un tag que hace de hiperenlace. El ms tpico es <a>, aunque puede ser una <img>, etc. Afecta segn no se haya visitado todava (link) o s se haya visitado (visited) Un tag mientras se est haciendo click en l (active), cuando est el ratn sobre l (hover) o cuando tiene el foco (focus)

Con algn evento de usuario tag:link tag :visited tag:active tag :hover tag :focus tags con atributos tag[atributo] Un tag que tenga el atributo, con cualquier valor Un tag con un atributo cuyo valor son varios valores separados por comas y uno de ellos es valor. Un tag con atributo class igual a clase. Es una forma abreviada que permite css de poner tag[class="~valor"] Un tag con atributo id igual a id. Es una forma abreviada que permite css tag[atributo="valor"] Un tag con el atributo asignado al valor. tag[atributo~="valor"] tag.clase tag#id

de poner tag[id="~id"] Vamos a ver algunos ejemplos. /* Pone color rojo a TODOS los tags de html de la pgina */ * { color:red; } /* Todos los tags con class="importante" salen en rojo */ *.importante { color:red; } /* En estos casos que * va delante, CSS admite que lo omitamos. Tiene el mismo efecto poner esto otro */ .importante { color:red; } /* Pone de color rojo TODOS los prrafos */ p { color:red; } /* Pone de color rojo todos los parrafos que estn dentro de un div, en cualquier nivel de anidamiento */ div p { color:red; } ... <div>esto es un div <p>con un parrafo dentro</p> </div> <p>y este esta fuera</p> /* Pone de color los rojo los span que sean hijos de div */ div > span { color:red; } <div>un div con <span>span hijo</span></div> <div><p>un div con <span>span nieto</span></p></div> /* Pone de color rojo los parrafos que van detras de un div */ div + p { color:red; } <div>texto 1</div><p>parrafo 1</p><p>parrafo 2</p> /* Pone de color rojo los parrafos que tengan align center */ p[align="center"] { color:red; } <p align="center>centrado y rojo</p><p>normal</p>

Tienes todo esto muchsimo ms detallado en los selectores de css. En cuanto a los atributos para poner colores, fuentes, imgenes de fondo, etc, no merece la pena explicarlos puesto que no tienen demasiado truco. Aqu tienes una referencia completita con todos ellos. Elige en el men de la izquierda el tema que te interese (fuentes, background, etc) y tendrs una tabla completa con todos los posibles atributos y valores.

Si merece la pena, sin embargo, explicar cmo es el posicionamiento de bloques con CSS. Tambin es interesante saber cmo organizar la pgina html para que se pueda integrar bien CSS.