Hojas de estilo en cascada (CSS) |
| |||
| ||||
Las hojas de estilo, conocidas como CSS (Cascading Style Sheet), son un conjunto de instrucciones que definen la apariencia de diferentes elementos de un documento HTML. En otras palabras, son plantillas que permiten cambiar el formato de presentación de cualquier etiqueta de HTML. Por ejemplo, con ellas podemos definir el tamaño de una fuente determinada o el color y el estilo asignados a un párrafo de texto concreto o global. Esto se hace posible gracias a la definición de estilos y su aplicación dentro de los documentos.
Las hojas de estilo proporcionan un mayor control sobre la apariencia física de una página web; facilitan la tarea de creación y diseño de contenidos en web. De entre sus características, hay que remarcar especialmente que:
|
Controlan todos los elementos de la presentación de un documento HTML, como por ejemplo las tipografías, los colores, los sangrados de párrafo, los márgenes del documento, la disposición del texto y las imágenes, etc. |
|
Permiten una mayor asociación de parámetros o atributos asignados a diferentes etiquetas HTML, de manera que no hará falta escribirlos cada vez que se inserte una etiqueta con la misma característica que otra anterior. |
|
Las posibles modificaciones aplicadas al estilo de una o diversas páginas de una misma sede web pueden hacerse de una sola vez, de forma que todas las páginas compartan un mismo estilo estandarizado; de este modo se agiliza mucho el mantenimiento y los cambios de formato. |
|
Permiten asignar un estilo determinado, y hacer que éste sea el mismo para los diferentes navegadores, al menos en teoría; sin embargo, siempre tendrán que hacerse las comprobaciones pertinentes para ver que esto es así, ya que entre los principales navegadores (Netscape e Internet Explorer) hay diferentes formas de entender algunas directivas. Tenemos que anotar que sólo los navegadores de cuarta generación (versiones 4 y superiores) soportan las hojas de estilo, mientras que los navegadores antiguos las ignoran y alteran considerablemente el formato de las páginas con las definiciones propuestas por la recomendación CSS 1 (nivel 1) y CSS 2 (nivel 2) del W3C. |
Será preciso hacerse una pregunta en lo que respecta a su implementación: si ya existen diferentes etiquetas para formatear el texto y otros elementos físicos de los documentos en HTML, ¿para qué sirven las hojas de estilo? La respuesta es más de tipo técnico, aunque sus ventajas son muy claras según lo que ya hemos apuntado; no obstante, hace falta decir que con la aceptación del estándar HTML 4.0 y el dinamismo que aporta, las etiquetas para formatear el texto y sus atributos, como por ejemplo <FONT>, <CENTER> o <B>, son desaprobadas por esta especificación, lo cual hace pensar que en próximos estándares, como el HTML 5 (en desarrollo, y conocido como Cougar), estas etiquetas y sus atributos queden obsoletos. El mantenimiento del estilo físico tiene que quedar destinado a formatos de control específicos, y no como estructuradores de contenido mezclado con etiquetas de nivel lógico y de contenido.
Con las CSS se crean toda una serie de definiciones de estilo para el documento, pero comportan, al mismo tiempo, la fijación de una serie de prioridades de funcionamiento según su disposición, como por ejemplo:
|
Primero tiene preferencia el atributo <STYLE> como etiqueta en un elemento individual en una página. |
|
El elemento <STYLE> definirá las diferentes directivas de estilo para ser aplicadas dentro de la página; se sitúa entre los elementos <TITLE> y <BODY>, y será el segundo elemento en preferencia para ser interpretado. |
|
En tercer lugar, será importante la presencia de una hoja de estilo importado, que especificará aspectos generales del estilo de la página; en cambio, los elementos individuales repartidos por la página cumplirán su función independiente, por lo que en todo caso serán puntualizaciones concretas sobre el estilo de una página también concreta. |
|
Si no disponemos de hojas de estilo, el navegador tendrá en cuenta los atributos que afectan al estilo de los elementos que hayan sido identificados por el usuario. |
|
Finalmente, si tampoco se añade este valor de estilo específico en el cuarto nivel, pasarán a actuar los valores de estilo predefinidos por el propio navegador. |
Actualmente existen dos tipos de hojas de estilo definidas, las hojas de estilo tipo "CSS" y las hojas de estilo en JavaScript. Haremos un repaso a las hojas de estilo CSS por ser estándar para los nuevos navegadores de última generación, y porque no necesitaremos conocimientos previos de programación en JavaScript para utilizarlas.
Las hojas de estilo tienen asociadas una serie de nuevas etiquetas aplicables al lenguaje HTML, que hay que conocer:
|
<STYLE>, sirve para identificar una hoja de estilo dentro de un documento HTML. |
|
<SPAN>, etiqueta que sirve para definir un bloque de texto o elementos a los cuales se aplicará un estilo concreto. |
|
class, atributo que permite el marcaje de un bloque de texto o diferentes elementos, como miembros de una clase de estilo definida en una hoja de estilo. |
|
id, atributo que permite identificar un bloque de texto o diferentes elementos, y aplicarles un estilo definido en una hoja de estilo única para estos elementos concretos. |
