En los dos primeros capítulos hemos aprendido a enlazar HTML y CSS, así como a manejar los recursos básicos para controlar la apariencia de un
documento HTML.
Ahora debemos presentar una serie de consideraciones de tipo general que, siguiendo un orden estrictamente lógico, deberían haber sido
expuestas al comienzo de esta sección. Sin embargo, creo que era mejor familiarizarse primero con las propiedades de CSS, para así estar ahora en mejores
condiciones de reflexionar sobre aspectos generales.
El estilo de una etiqueta puede estar definido en cuatro ubicaciones:
En la propia etiqueta, mediante el atributo style.
En la cabecera del documento, mediante la etiqueta <style>.
En un fichero CSS externo, enlazado en la cebecera del documento.
Por defecto, cada navegador tiene un estilo predefinido.
Estas ubicaciones guardan una relación de prioridad: prevalece la indicación que se encuentre más cerca de la etiqueta a la que afecta.
Por tanto, el orden de prevalencia es el contrario del indicado anteriormente, es decir: atributo style – etiqueta
<style> – archivo CSS – estilo predefinido.
A esta manera de aplicarse los estilos ordenadamente, unos detrás de otros, se denomina en cascada.
1.2. Acerca de los estilos heredados
Las etiquetas de HTML guardan entre sí una relación que suele denominarse padre-hijo.
Por ejemplo, en una estructura como <BODY><P><B>...</B></P></BODY>:
<BODY> es padre de <P> y abuelo de <B>.
<P> es padre de <B> e hijo de <BODY>.
<B> es hijo de <P> y nieto de <BODY>.
De modo muy general, y sin pretender ser exhaustivos, pueden establecerse tres niveles jerárquicos en las etiquetas:
La etiqueta <BODY>
Las etiquetas de títulos, párrafos, <DIV>...
Las etiquetas de negrita, cursiva, etc.
Las especificaciones de las etiquetas se heredan de padres a hijos, de modo que, en el ejemplo anterior, una especificación para
<BODY> será heredada por <P> y por <B>, una especificación para
<P> será heredada por <B> pero no por <BODY>. etc.
En definitiva, los estilos definidos para una etiqueta serán heredados por sus etiquetas hijas (mientras éstas no posean sus propias especificaciones).
1.3. Acerca de los estándares
El estándar HTML 4.0 (1997), y las revisiones posteriores, asumen específicamente las funciones de organización y estructura de los contenidos, y desvían
las funciones de formato hacia las hojas de estilo.
Las hojas de estilo en cascada son un estándar muy amplio que cuenta con las siguientes especificaciones, todas ellas creadas por el
W3C:
CSS-1 (CSS1-Cascading Style Sheets Specification, level 1), de 1996.
CSS-2 (Cascading Style Sheets, level 2, CSS2 Specification), de 1998.
CSS-2 se contruye sobre CSS-1 y prácticamente lo incluye. En cierto modo, viene a ser una extensión.
CSS puede aplicarse tanto a documentos HTML como a documentos XML.
La utilización de hojas de estilo en XML ha propiciado el nacimiento de un Lenguaje de Hojas de Estilo Extensible: el
XSL (Extensible Stylesheet Language). SXL sólo puede aplicarse a documentos XML, aunque, como éste,
puede transformar documentos XML/XSL a HTML/CSS.
2.2. Definición de un estilo dependiente del contexto
CSS permite definir un estilo para una etiqueta en función de otra etiqueta de la que dependa.
Por ejemplo, podemos hacer que una etiqueta de negrita (<B>) se vea de distinta manera si está contenida en un párrafo
(<P>) o en un título (como <H1>).
La sintaxis para una etiqueta dependiente del contexto es la siguiente:
h1 b {
font-family:verdana;
color:#8A084B;
}
p b {
font-family:tahona;
color:#8A0808;
}
En este ejemplo, la negrita de un párrafo será tahona de color #8A0808, y la negrita de un título 1 será verdana y de color #8A084B.
De igual manera, puede establecerse alguna propiedad únicamente para el caso de que alguna etiqueta adopte un determinado valor.
Por ejemplo, podemos dar un color de fondo para toda una tabla, pero otro color para las celdas que posean el atributo colspan. Incluso
podemos dar otro formato para cada valor concreto que adopte dicho colspan.
El siguiente ejemplo podría tener un código CSS como el que se muestra a continuación:
Hasta este momento hemos aprendido a definir distintos estilos para las etiquetas HTML. Pero frecuentemente interesa definir estilos
independientes de las etiquetas, que puedan aplicarse de manera también independiente. Este tercer apartado trata, por tanto, de cómo aplicar todo lo visto hasta
el momento de una manera distinta: las clases.
Con frecuencia, el catálogo de etiquetas HTML resulta insuficiente para la apariencia que deseamos dar a nuestra página web.
Por ejemplo, es muy probable que deseemos que un párrafo tenga, según las ocasiones, distintas apariencias; pero sólo existe una etiqueta
<P>. ¿Qué podemos hacer?
La solución consiste en crear un clase genérica de estilo, no vinculada a ninguna etiqueta concreta, y que se pueda por tanto utilizar libremente.
Siguiendo con el ejemplo, el siguiente código establece un formato para los párrafos por defecto, pero establece también una clase nueva, denominada "cita",
para los párrafos que constituyen íntegramente una cita textual:
P {margin-bottom : 10px;
margin-top: 10px;
text-align: justify;
}
Como puede observarse, las clases se marcan con un punto inicial.
Para aplicar una clase a una etiqueta HTML, debe utilizarse el atributo class. Por ejemplo:
<p class="estilo01">.
Si lo que se pretende es incrustar una clase en un determinado fragmento de otra etiqueta, la sintaxis es
<span class="estilo01">...</span>. Toda esta etiqueta se incrusta, por ejemplo, en <P>...</P>
