Usar hojas de estilo en documentos HTML
|
Usar hojas de estilo en documentos HTML |
|
Ya hemos visto como se construyen las reglas de estilo, pero aún no sabemos qué hay que hacer para aplicarlas a un documento HTML. En este capítulo veremos los distintos modos que tenemos para hacer esto.
¿Cómo se aplican las hojas de estilo a una página web? Existen tres tipos de aplicación de estilos para el html, segúnen que contexto se usen. estos tipos son, por orden de especificidad, la siguientes: Reglas de estilo integradas, Hojas de estilo incrustadas y Hojas de estilo externas. Las reglas integradas se aplican a un solo elemento en un documento HTML, las hojas incrustadas se aplican a todo un documento, y las hojas externas pueden aplicarse a varios documentos. Se pueden usar los tres tipos de hoja en un mismo documento, y cada uno de ellos tiene preferencia sobre los siguientes. Veamoslo más despacio:
Las reglas de estilo integradas son la forma más elemental de usar CSS. se trata simplemente de asignar una regla a una etiqueta HTML por medio de su atributo STYLE de la siguiente forma:
Este párrafo (y solo este, sin afectar a los demás párrafos del documento) aparecerá en color rojo. Como puedes ver, es una forma muy simple y poco eficiente de usar CSS, ya que tendríamos que repetir la regla por cada uno de los párrafos que queramos mostrar en ese color. Además, para poder usar este método sin tener posibles problemas de compatibilidad, deberíamos poner, en la cabecera del documento HTML (entre las etiquetas <HEAD> y </HEAD>) la siguiente declaración:
Que sirve para avisar al navegador de que el lenguaje que estamos usando en las hojas de estilo es CSS.
Las hojas de estilo incrustadas se definen en la cabecera de un documento HTML, y se aplican a todo este. Para ello contamos con la instrucción <STYLE>...</STYLE>, que usaremos del siguiente modo:
El atributo TYPE de STYLE sirve, otra vez, para explicarle al navegador que el lenguaje que usaremos en la hoja de estilo va a ser CSS. Las etiquetas de comentarios ( <!-- --> ) se usan para evitar que los navegadores antiguos ( y que, por tanto, no reconozcan la etiqueta STYLE ) muestren el contenido de la hoja en pantalla. Entre las etiquetas de comentario es donde se indicarán las reglas de estilo tal y como ya las hemos visto. Un ejemplo de una hoja de estilo incrustada es este:
Que debería ir entre las etiquetas <HEAD> y </HEAD> de la página Web. Este tipo de hoja se aplica a todo el documento, salvo que entre en contradicción con una regla de estilo integrada que, al tener preferencia, se impondría sobre esta. (Es decir, que si hemos definido un párrafo con la etiqueta <P STYLE="color: #000000;">, este aparecerá en color negro, aunque los demás sí tendrán color rojo. El atributo TYPE solo es necesario si no hemos definido el lenguaje de hojas de estilo con la etiqueta <META>, tal como vimos antes.
Otra cosa que puedes poner en las hojas incrustadas es la sentencia @import url("dirección de página"), donde "dirección de página" es la URL donde se encuentra un archivo con otra hoja de estilo, cuyas reglas se añadirán a las de esta. La clausula @import debe ir siempre la primera en una hoja de estilo, antes de cualquier regla. algunos ejemplo de @import serían las siguientes ordenes:
Esta declaración hace referencia a una hoja, situada en el mismo directorio que el documento, llamada hoja.css (puedes usar la extensión que quieras pero, por costumbre se suele usar la extensión *.css)
Esta otra declaración llama a la hoja "hoja.css" que se encuentra en el directorio padre de aquel en que se encuentra el documento.
Y esta llama a una hoja que se encuentra en el directorio "estilo" del dominio "host.com".
Hojas de estilo externas son aquellas que se almacenan en un documento aparte, y alas que se llama desde el documento HTML. Obviamente, esta hoja de estilo puede ser llamada desde tantos documentos como quieras. Son las más utilizadas, y permiten dotar de un aspecto uniforme a todo un conjunto de páginas. Existen dos modos de declarar las hojas externas en un documento web. El primero es exactamente el mismo que ya hemos visto con las hojas incrustadas, ya que se usa el mismo tipo de sentencia @import url("dirección de página"):
En realidad esto es una hoja incrustada sin reglas y con una llamada a una hoja externa. No es un método elegante ni eficiente, y algunos navegadores más antiguos pueden no reconocerlo. La mejor manera de llamar a hojas de estilo externas es mediante la etiqueta <LINK> de la cabecera de un documento HTML, que se usa del siguiente modo:
En HREF indicamos la dirección en la que se encuentra la hoja de estilo. Con REL="stylesheet" informamos al navegador que se trata de una hoja de estilo, en type, como siempre, le decimos que está escrita en lenguaje CSS. Si ya hemos usado una etiqueta <META> definiendo el lenguaje de estilo por defecto, podemos omitir el atributo TYPE. Un ejemplo de llamada a una hoja de estilo externa es el que he usado para definir el estilo de esta misma página:
La claúsula @import, que ya vimos antes, puede usarse también en las hojas de estilo externas (recuerda ponerla siempre antes que cualquier otra regla).
Es prefectamente posible usar varias hojas de estilo en un mismo documento. Para ello solo es necesario declararlas al inicio de este. El uso de varias hojas puede ser muy útil en muchos casos, y puede facilitarte la tarea a la hora de hacer tu site más vistoso.
La primera forma de hacer esto es la más evidente: Puedes usar una hoja externa para definir todo aquello que quieras aplicar a varios documentos, otra incrustada para cosas específicas de ese documento, y una o más reglas integradas para detalles concretos.
Otra cosa que puedes hacer es hacer que la aplicación de tus hojas de estilo dependa del modo en que vayan a visualizarse tus páginas. ¿No sería estupendo poder decirle al navegador algo del estilo de "Si lo sacas por pantalla a color usa esta hoja, si es solo texto usa esta otra, y si lo imprimes usa aquella"? Pues bién, con CSS esto es posible.
Para ello tenemos un atributo llamado MEDIA, que podemos usar tanto en la etiqueta <STYLE> como en <LINK>, donde especificaremos el medio concreto al que queremos dirigir la hoja. Los medios a los que nos podemos referir con MEDIA son los siguientes:
Hasta ahora esos son todos los dispositivos a los que se puede hacer referencia. Desafortunadamente CSS1 no contempla reglas que permitan manipular contenidos dirigidos a muchos de ellos (no sirve de nada poner MEDIA="SPEECH" si luego no puedes hacer que el chisme cambie el tono de voz o el volumen del sonido). Por tanto, hoy por hoy los medios que utilizarás más habitualmente so SCREEN y PRINT. Para ello puedes poner dos hojas distintas indicando en cada una cual es el medio que quieres usar:
Cuando el documento se muestre e pantalla se usará la hoja contenida en "pantalla.css", ignorando la segunda hoja. Y si se imprime se usará la hoja "impreso.css", sin hacer caso de la anterior.
Uno de los objetivos de CSS es hacer accesible el contenido a cualquiera, independientemente de sus circunstancias personales como podrían ser el sofware que use, el equipo hardware del que disponga, ect. Para ello CSS prevee que el aspecto final de un documento dependa tanto de las hojas de estilo que haya preparado el diseñador del documento como de una serie de hojas de estilo que el propio navegante tenga previstas. Esto es muy util para el caso de que el navegante tenga algún tipo de necesidad especial que el diseñador no haya podido preveer (Yo, por ejemplo, soy miope. Quizás me pareciera necesario tener una hoja de estilo a mi medida en la que, por ejemplo, el tamaño de los caracteres sea algo mayor que el habitual). Por otro lado, quizás al diseñador le interesa que algunas cosas no puedan ser cambiadas por el navegante, pero otras sí.
Para todo ello contamos con algunas posibilidades que podrían ser muy interesantes, si los navegadores las soportaran. Desafortunadamente, los navegadores actuales no permiten estos refinamientos que vamos a ver, aunque espero que esto sea algo que se resuelva en futuras versiones.
La etiqueta <LINK> para declarar las hojas de estilo externas posee un atributo de que aún no hemos hablado. Se trata del atributo NAME, que sirve, como era de esperar, para asignarle un nombre a la hoja de estilo. Hasta ahora hemos estado usando hojas sin este atributo. Esto las combierte en las llamadas Hojas de Estilo Persistentes, que son aquellas que el navegante no puede deshabilitar. Por otro lado tenemos las llamadas Hojas de Estilo Por Defecto, que son iguales a las anteriores, pero asignandoles un nombre con el atributo NAME. Estas hojas se cargan y se aplican al documento la primera vez que este se carga, pero el navegante puede decidir anularlas. Los navegadores futuros deberían tener un menú o algo parecido en el que aparecieran los nombres de las hojas y con el que se pudiera deshabilitar el uso de las que el navegante quisiera.
Por último tenemos las Hojas de Estilo Alternativas, que son aquellas que no se aplican al documento a menos que el navegante las seleccione. Para ello hemos de asignarle un nombre, igual que hacíamos con las hojas por defecto, pero poniendo "ALTERNATE STYLESHEET" en su atributo REL, en lugar de STYLESHEET, que era lo que poníamos antes:
La primera de estas hojas se aplica siempre, y no es posible inhabilitara. La segunda se aplica a menos que el navegante la inhabilite. Y la tercera no se aplicará a menos que el navegante decida habilitarla expresamente.
