Tutoriales
Enlaces
Licencia
Esta obra está bajo una licencia de Creative Commons.
Para reconocer la autoría debes poner el enlace https://old.chuidiang.org
Ahora que sabemos cuál es la idea básica de CSS, vamos a ver un poco de sintaxis.
No voy a poner aquí todos los posibles atributos y posibles valores que hay en CSS, ya que hay muchos sitios donde los pone. Voy simplemente a detallar algunas de las cosas que más me han llamado la atención.
Comentabamos que un fichero de estilo css tiene dentro muchos de estos
selector {
parametro:valor;
parametro:valor;
...
}
Vamos a ver estas cosas. Me extenderé principlamente en los selectores.
Antes de nada y porque es importante, debemos aclarar que 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 sirve para diferenciar ese tag html de otros tag iguales. En el ejemplo, habrá tags <p> "importante" y tags <p> normales, que no llevarán 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, sólo 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 página. Por ejemplo, "contenido_principal", "anuncios", "enlaces", "cabecera", "pie", etc.
Se deja class para estilos que aparecerán repetidos por la página en varios sitios. Por ejemplo "importante", "aviso", "cita", etc.
Se aconseja que los nombres elegidos tengan referencia al contenido de la página y no al estilo con el que se va a visualizar. Así, por ejemplo, es mejor un class "importante" que un class "rojo". El párrafo importante será importante independientemente de cómo lo veamos. El párrafo rojo sólo será rojo si lo vemos rojo.
Ahora sí, vamos a ver qué son los selectores de CSS.
El selector no es más que el tag de html al que queremos que afecte el estilo. Al tag que indiquemos en el selector le afectarán todas las parejas "parametro:valor" que hayamos puesto entre las llaves detrás de él en el fichero de estilo css.
Por ejemplo, si ponemos esto
p {
color:red;
}
Todos los párrafos del fichero html saldrán en rojo.
Sin embargo, CSS nos ofrece muchas más posibilidades a la hora de seleccionar los tags a los que queremos que afecte el estilo. Vamos a verlas.
Antes de nada y para aclarar ideas diremos que
CSS nos permite elegir tags, además de por el nombre, por lo siguiente:
En la siguiente tabla se ve la sintaxis.
Selector |
A qué tags afecta |
|---|---|
Cómo esté situado el tag respecto a otros
tags |
|
| * | Cualquier tag html. |
| tag | un tag específico. Por ejemplo, div equivaldría al tag <div> |
| tag1 tag2 | 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 |
| tag1 > tag2 | Un tag2 que sea hijo de tag1. No valen nietos. |
| tag1 + tag2 | Un tag2 que va detrás y es adyacente a tag1. |
| tag:first-child | tag que sea el primer hijo de su padre. |
Con algún evento de usuario |
|
| tag:link tag :visited |
Para un tag que hace de hiperenlace. El más típico es <a>, aunque puede ser una <img>, etc. Afecta según no se haya visitado todavía (link) o sí se haya visitado (visited) |
| tag:active tag :hover tag :focus |
Un tag mientras se está haciendo click en él (active), cuando está el ratón sobre él (hover) o cuando tiene el foco (focus) |
tags con atributos |
|
| tag[atributo] | Un tag que tenga el atributo, con cualquier valor |
| tag[atributo="valor"] | Un tag con el atributo asignado al valor. |
| tag[atributo~="valor"] | Un tag con un atributo cuyo valor son varios valores separados por comas y uno de ellos es valor. |
| tag.clase | Un tag con atributo class igual a clase. Es una forma abreviada que permite css de poner tag[class="~valor"] |
| tag#id | Un tag con atributo id igual a id. Es una forma abreviada que permite css de poner tag[id="~id"] |
Vamos a ver algunos ejemplos.
/* Pone color rojo a TODOS los tags de html de la página
*/
* {
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 párrafos */
p {
color:red;
}
/* Pone de color rojo todos los parrafos que estén
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>
Del resto sólo un ejemplo, son todos muy parecidos.
/* 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 muchísimo más detallado en los selectores de css.
En cuanto a los atributos para poner colores, fuentes, imágenes 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 tendrás una tabla completa con todos los posibles atributos y valores.
Si merece la pena, sin embargo, explicar cómo es el posicionamiento de bloques con CSS. También es interesante saber cómo organizar la página html para que se pueda integrar bien CSS.