1) CSS

Las Hojas de Estilo (o CSS, por Cascading StyleSheets) son un mecanismo que permiten aplicar formato a los documentos escritos en HTML ó XHTML (y en otros lenguajes estructurados, como XML) separando el contenido de las páginas de su apariencia. Para el diseñador, esto significa que la información estará contenida en la página HTML, pero este archivo no debe definir cómo serávisualizada esa información, sino la hoja de estilos asociada a él. Las indicaciones acerca de la composición visual del documento estarán especificadas en el archivo de la CSS.

En un ejemplo sencillo, una página HTML podría tener uno o varios encabezados definidos con la etiqueta

, se quieren decorar con tipografía Arial, de 19 puntos, en color azul y alineación central. Por un lado el archivoXHTML contendría la definición de encabezados y por otra el archivo CSS contendría la definición de los estilos a aplicar para la etiqueta de encabezados así:

Parte del contenido del archivo pagina.html

…

1er Título de nivel 1

…

1er Título de nivel 1

…

Estilo para

definido en el archivo estilos.css

h1 {

font-family: Arial; font-size: 19pt; color: blue;
text-align:center;

}

Luego, agregamos un enlace en el documento HTML a la hoja de estilo creada. El enlace se crea dentro de la cabecera del documento. Nuestro documento pagina.html quedaría as í:








…

1er Título de nivel 1

…

1er Título de nivel 1

…



La etiqueta especifica:

el tipo de vínculo: a una hoja de estilo ("stylesheet")

la ubicación de la hoja de estilo a través del atributo "href"

el tipo de hoja de estilo que se vincula: "text/css"

Ahora, todos los encabezados h1 de la página tendrán el aspecto que hemos definido. Se puede asociar un mismo archivo CSS a diferentes archivos HTML del sitio Web y así lograrconsistencia de estilos entre las páginas que lo comprenden.





La aplicación de estilos toma en cuenta dos conceptos importantes, la herencia y la cascada.

Herencia

Cada página HTML está compuesta por una serie de elementos (títulos, párrafos, listas, tablas, etc.) organizados en una estructura donde cada elemento está contenido por otro elemento, que a su vez puede estar contenido por otro.

Enesta estructura existe un elemento raíz que es el que actúa de contenedor de todos los demás elementos. En HTML se puede considerar como elemento raíz al elemento < body> o al elemento .

La importancia de este hecho es que cada elemento hereda las propiedades del elemento que lo contiene (llamado el elemento padre). Quiere decir que si especificamos la propiedad color: red para en lahoja de estilos, todos los elementos de la página heredarán esta característica (como listas y párrafos) y no será necesario especificar nuevamente la propiedad color en cada uno de ellos.

Aquí es necesario hacer algunas precisiones:

1. No todas las propiedades son hereditables y para cada propiedad se define si ésta se hereda o no.

2. El valor inherit puede aplicarse a cualquier propiedad delos elementos. Este valor puede usarse para reforzar explícitamente la herencia de una propiedad o para lograr que un elemento herede de su padre una propiedad que de otro modo no sería heredada.

*.peligro { color: inherit; }

3. Cuando se asigna una propiedad a un elemento, el valor especificado reemplaza al valor heredado, como si se sobrescribiera el valor heredado del padre..

4. Loselementos heredan los valores computados (expresados con base a porcentajes o tamaños relativos ) del padre, no los valores especificados . Todas las propiedades tienen siempre un valor asignado. El valor por defecto, el valor heredado o el valor asignado en el archivo CSS ).

Cascada

Cuando varias hojas de estilos se aplican sobre un documento y hay conflictos sobre la regla que debe aplicarse. El...