Hojas de estilo

16. Hojas de estilo {draw:frame}
Las hojas de estilo intentan separar el contenido de un página de la forma de presentarlo en pantalla. Esto lo hacen personificando los cambios que las etiquetas de formato HTML realizan en nuestro texto. Por ejemplo, sabemos que usando tendremos una párrafo nuevo con una separación del anterior determinada, etc.. Con las hojas de estilo también podremosdecirle a un párrafo que todo su texto sea verde y que además va a tener un margen izquierdo de 30 pixels. Por ejemplo.
El primer navegador en soportar hojas de estilo fue el Explorer 3.0. Utiliza la llamada sintaxis en cascada. El Communicator acepta esa sintaxis e introduce una nueva basada en JavaScript. Sin embargo, como el estándar más comunmente aceptado de sintaxis de hojas de estilo es elde cascada, será este el único que veamos. Vamos a empezar con un ejemplo:

P {color: green; margin-left: 30;}

Vamos a detenernos en todos los elementos. Para empezar, la etiqueta HTML con la que deberemos englobar las hojas de estilo será , que sólo podrá estar situada en la cabecera de la página. Su parámetro TYPE indica la sintaxis que utilizaremos para definirlas. En el caso de lashojas en cascada deberá ser text/css.
Ahora examinemos la hoja de estilo propiamente dicha. Indicaremos primero la etiqueta que deseamos personalizar. Será . Después, entre llaves, pondremos una lista de las cosas que queremos modificar. En nuestro caso son dos, el color (en el formato habitual) y el margen, que se define en pixels.
Hay que destacar que, aunque muchas veces los navegadorestengan una cierta manga ancha, la sintaxis CSS (Cascading Style Sheet) es sensible a la diferencia entre mayásculas y minúsculas. Conviene tener cuidado.
El HTML 4.0 permite declarar fuera de la página las hojas de estilo, llevando de este modo al extremos su filosofía de separar forma y contenido. Si colocamos nuestras hojas de estilo en un fichero llamado estilos.css (solo las hojas, no laetiqueta ) no tendremos más que incluir la siguiente línea en la cabecera de nuestro documento HTML para incluirlas en nuestras páginas:

Vamos a ver cómo quedaría un párrafo que siguiese la hoja de estilo anterior
Si la cosa va bien, este párrafo estará escrito en verde y con un margen izquierdo de 30 pixels. Precioso, ¿no? embargo, estoy convencido de que los más avispados se habrán dadocuenta de que les estoy ocultando algo. Por lo que he dicho hasta ahora la personalización de una etiqueta debería ser general y en esta página sólo este párrafo está modificado. No os preocupéis demasiado, ahora os cuento como se hace.


16.1. Clases
Hasta ahora habíamos definido estilos para una etiqueta determinada. Pero también podemos hacerlo para una clase determinada. ¿Esto quesignifica? Pues que si, por ejemplo, definimos la hoja de estilo de la clase verde de la siguiente manera:
P.verde {color: green; margin-left: 30px;}
sólo estarán verdes y con un margen izquierdo de 30 pixels aquellos párrafos definidos con . Así de sencillo.
Ampliando un poco más las posibilidades de las clases, se pueden realizar excepciones. Supongamos que tenemos unos párrafos quequeremos que tengan unos márgenes determinados y color verde. Y deseamos que uno solo de esos párrafos, con los mismo márgenes, sea azul. Podríamos definir dos clases distintas, pero hay un método mejor: usar el parámetro ID. Por ejemplo:
all.verde {color: green; margin-left: 10px;}
#ej1 { color: blue;}
Ahora todos los párrafos de clase verde serían, obviamente, verdes y con un margen de 10pixels. Sin embargo el párrafo definido por será azul:
Este párrafo es muy verde.
Y anda que este...
Sin embargo, este no, fíjate que curioso.


16.2. Etiquetas y
Puede que, a veces, no queramos modificar el comportamiento de un elemento sino que creemos un estilo que queremos actúe sólo, un estilo completo creado de la nada. Una etiqueta nueva y propia. Entonces, ¿qué...