Estructura de una hoja de estilo CSS
|
Estructura de una hoja de estilo CSS |
|
Las hojas de estilo en cascada tienen una estructura muy simple pero muy flexible y potente. Gracias a esto podemos definir la apariencia de cada elemento o grupo de ellos con total comodidad, definir distintas apariencias en función del medio por el que se mostrarán, y cambiarla posteriormente, si es necesario, de una forma muy simple y rápida.
La sintaxis básica de CSS es muy simple e intuitiva. Consta de una serie de Reglas que describen la forma en que se visualiza cada uno de los elementos del siguiente modo:
Por ejemplo:
A la primera parte (fuera de los corchetes) se le llama Selector, y es la que indica a qué elemento HTML afectará (en este caso a las cabeceras de nivel 1).
Lo que hay en tre los corchetes es lo que se denomina Declaración, y es donde indicamos cómo se va a ver el selector.
La declaración está formada a su vez por una Propiedad ( en el caso de arriba align, alineación) a la que se asigna un Valor (left, izquerda, en el ejemplo).
O sea, lo que dice la regla de arriba es que queremos que las cabeceras de primer nivel aparezcan alineadas a la izquierda.
Si quisieramos que los párrafos aparecieran centrados y en clor rojo, podríamos escribir esto:
Con la primera regla indicamos que queremos una alineación centrada y con la segunda asignamos el color rojo.
Pero este modo es poco eficiente. Si queremos especificar varias propiedades tendremos que repetir la línea muchas veces. Para simplificar esto, CSS permite unir varias declaraciones en una misma regla, de modo que lo anterior se podría escribir, de forma mucho más clara y concisa, del siguiente modo:
Que tiene exactamente el mismo significado. Fijate bién en que las declaracione se separan unas de otras por medio del signo "punto y coma" ( ; ), y que cada propiedad se separa de su valor por medio del signo "dos puntos" ( : ). También se podría haber escrito en la forma:
O con cualquier otra combinación de indentados. La única diferencia es la legilibilidad y comodidad a la hora de editar el código.
Hay veces en que querrás asignar las mismas reglas a varios selectores distintos. Esto lo puedes hacer repitiendolas para cada uno de ellos o de esta manera:
Las reglas se aplican a los tres selectores (que han de ir separados por comas) de modo que, tanto las cabeceras de primer y segundo nivel como los párrafos se mostrarán con alineación centrada y color rojo.
Algunas propiedades pueden tener varios valores. Este es el caso, por ejemplo, de la propiedad font, que permite asignar tipo de fuente, tamaño, color, y varias cosas más. esto se puede hacer separando todos los valores de una misma propiedad por espacios en blanco ( ), sin ningún signo de puntuación, así:
La misma propiedad, font, permite elegir varios tipos de fuente para, en el caso de que el sistema no tenga instalado uno de ellos, recurrir al siguiente (si no se encontrase ninguno de ellos, se usaría la fuente por defecto del navegador). esto se hace separando los posibles valores por madio de comas ( , ):
También se pueden hacer combinaciones algo más complejas, como la siguiente:
Las cabeceras de primer nivel aparecerán centradas, y las de segundo centradas y en color rojo.
Otra combinación posible es asignar una regla a un selector solo si este está dentro de otro selector, por ejemplo:
Que asigna color rojo al elemento <B> solo si este está dentro de un elemento <LI>. Fijate bién en que no hay signos de puntuación separando los selectores, solo un espacio en blanco. A esto se le llama Selectores Contextuales, porque hacen que la apariencia dependa del contexto donde se encuentra el selector.
También es posible combinar las reglas anteriores para obtener aplicaciones más complejas de las reglas:
Que asignaría el color a todos los elementos <H1> y a los elementos <B> que estén dentro de un elemento <LI>.
Lo visto hasta ahora está muy bién. Ya podemos hacer, por ejemplo, que todos los párrafos de un documento aparezcan centrados. Pero ¿Y si queremos que, además, algunos aparezcan alineados a la derecha y en color azul? Pues para esto tenemos las clases.
La clase es el nombre que se le asigna a una etiqueta HTML por medio del atributo CLASS para luego poder hacer referencia a ella. Gracias las clases podemos asignar propiedades a solo una parte de los selectores de un mismo tipo. Por ejemplo, si hemos definido uno o más párrafos por medio de la etiqueta <P CLASS="azul">, podemos asignarle color azul y alineación a la derecha con la siguiente regla:
Que afectará SOLO a los párrafos que tengan su en atributo CLASS el valor "azul", sin modificar los demás. La clase se especifica escribiendola tras el selector y un punto (sin dejar espacios). Si omitimos el selector y escribimos solo un punto y el nombre de la clase, la regla se asignará a TODOS los selectores que tengan ese nombre de clase (ya sean párrafos, cabeceras, links...).
Los identificadores, que se asignan a una etiqueta HTML con el atributo ID, funcionan igual que las clases, pero con la diferencia de que se pueden emplear solo una vez en un documento HTML. Es decir, que si tienes un párrafo al que has identificado como <P ID="fulano">, ese es el único elemento, sea párrafo o no, que puede tener ese ID. Para asignar una regla a ese párrafo usaremos el signo "almohadilla" ( # )de la siguiente forma:
Fijate bién en que no hemos puesto el selector (P en este caso). Después de todo no es necesario: Solamente puede existir un "fulano" en todo el documento. Como te estarás imaginando, los identificadores se emplean mucho menos que las clases.
Que se corresponden, respectivamente, con los link que aún no han sido visitados (A:link), los que están activos, mientras el navegador busca la dirección a la que hace referencia (A:active), y los que ya han sido visitados (A:visited). Funcionan igual que las clases, pero usando dos puntos ( : ) para separarlos del selector.
Los pseudelementos son un tipo especial de clase que describen elementos particulares de la tipografía. Solo existen dos en CSS1, y los navegadores actuales los ignoran casi totalmente. Se pueden aplicar a cualquier selector de texto, se escriben igual que las pseudoclases, usando dos puntos para separarlos del selector, y son:
(En selector debes poner el selector al que quieras aplicar el pseudoelemento en cada caso)
"first-line" se refiere a la primera línea del selector, y first-letter a la primera letra. Por ejemplo:
Esto asignaría un color rojo a la primera letra de las cabeceras de primer nivel y verde a la primera línea de cada párrafo.
