16. Hojas de estilo
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 <P> tendremos
una párrafo nuevo con una separación del anterior determinada,
etc.. Con las hojas de estilo también podremos decirle 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 el de cascada, será este el único
que veamos. Vamos a empezar con un ejemplo:
<STYLE TYPE="text/css">
P {color: green; margin-left: 30;}
</STYLE>
Vamos a detenernos en todos los elementos. Para empezar, la etiqueta HTML
con la que deberemos englobar las hojas de estilo será
<STYLE>, 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 las hojas en cascada
deberá ser text/css.
Ahora examinemos la hoja de estilo propiamente dicha. Indicaremos primero
la etiqueta que deseamos personalizar. Será <P>.
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 navegadores tengan 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 la etiqueta <STYLE>) no tendremos
más que incluir la siguiente línea en la cabecera de nuestro
documento HTML para incluirlas en nuestras páginas:
<LINK REL="stylesheet" HREF="estilos.css" TYPE="text/css">
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 dado cuenta 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 que significa? 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 <P CLASS="verde">.
Así de sencillo.
Ampliando un poco más las posibilidades de las clases, se pueden
realizar excepciones. Supongamos que tenemos unos párrafos que
queremos 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 10 pixels.
Sin embargo el párrafo definido por <P CLASS="verde" ID="ej1">
será azul:
Este párrafo es muy verde.
Y anda que este...
Sin embargo, este no, fíjate que curioso.
16.2. Etiquetas <SPAN> y <DIV>
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é hacemos? Utilizar las etiqueta
<SPAN> y <DIV>.
El método es simple. Definimos una clase rojo
que simplemente modifique el color (que será rojo). Ahora, si
queremos que una sección de texto esté en rojo lo
encerraremos entre las etiquetas <SPAN CLASS="rojo"> y
</SPAN> o entre <DIV CLASS="rojo"> y
</DIV>.
La diferencia entre ambas es que, mientras SPAN realmente no
hace nada por sí misma, DIV convierte a todo lo que
encierra en un bloque aparte (poniendo un salto de línea tanto al
comienzo como al final). Veremos en el siguiente capítulo que a las
etiquetas que se comportan como bloques (<P>,
<H1>, las que dijimos modifican un párrafo entero) se
les pueden definir atributos propios desde las hojas de estilo. Por
ejemplo, si definimos las siguientes hojas:
all.titulo {
margin-top: -24px;
color: blue;
font-size: 20px;
}
all.sombra {
margin-top: 2px;
margin-left: 2px;
color: black;
font-size: 20px;
}
cuyos atributos explicaremos en la referencia de las hojas de estilo, y
ponemos el siguiente código HTML:
<DIV ALIGN="CENTER" CLASS="sombra">El maravilloso curso de HTML</DIV>
<DIV ALIGN="CENTER" CLASS="titulo">El maravilloso curso de HTML</DIV>
obtendremos este bello efecto:
El maravilloso curso de HTML
El maravilloso curso de HTML
En el siguiente capítulo tenéis una guía de
referencia con todos (o casi todos) los atributos que se pueden modificar
con CSS.
Marcos | Hojas de estilo: referencia |