Escrito por Yosi_ el martes, 12 de febrero de 2008
Para los totalmente profanos en la materia, hay que comenzar diciendo que CSS son las siglas de "hojas de estilo en cascada", lo que traducido a nivel coloquial viene siendo la definición de un conjunto de parámetros que van a dar un estilo visual a nuestra web. Se puede decir que hoy en día resultan imprescindibles, ya que el viejo método de definir la estructura y los colores de una página a base de tablas y los atributos de las etiquetas está totalmente obsoleto, y aunque en principio puede ser más intuitivo (sí, todos tendemos a usar tablas), a largo plazo supone una enorme limitación y un engorro a la hora de introducir nuevos elementos o modificar cualquier aspecto del estilo de la página.
El hecho de hacer la descripción completa de las características en un archivo aparte organizando los elementos por clases hace que podamos modificar practicamente cualquier aspecto sin alterar el html. Esto permite trabajar aisladamente con las distintas partes que componen un sitio web (por un lado los elementos que se van a mostrar, por otro cómo deben verse) simplificando enormemente cualquier tarea de administración.
Yendo a la materia en sí, en principio voy a intentar hacer una síntesis de utilización de CSS al nivel más básico, detallando lo que desde mi punto de vista puede resultar más complejo o escabroso a partir de ejemplos sencillos que en un momento dado puedan ser válidos para crear la estructura básica de una página.
Para ello hay que definir unos cuantos conceptos imprescindibles para comprender lo que viene a continuación. En primer lugar vamos a ver cómo se aplica un conjunto de propiedades a un elemento concreto. En este caso utilizaremos un contenedor "div" y una etiqueta "span" para dar color y formato a una frase.
La forma en que se muestra esto es la siguiente:
Para este sencillo ejemplo cabe destacar las dos formas posibles de clasificar una etiqueta, asignándole una clase (class="nombre") que después se definirá en el archivo CSS como ".nombre", o mediante una id (id="nombre"), que en la hoja de estilos se refleja como "#nombre". La diferencia entre ambas es que puede haber muchos elementos asignados a una única clase y varias clases asignadas a un solo elemento, mientras que una id pertenece inequívocamente a un solo elemento. Ambos atributos se pueden aplicar a cualquier etiqueta HTML visible, aunque las que comúnmente se suelen emplear son las utilizadas en el ejemplo, "div" y "span". La diferencia entre ambas consiste en que "div" es un elemento de tipo bloque, que por defecto ocupa el ancho total de la página, mientras que "span" se adapta al texto que contiene, por lo que se suele utilizar para dar estilo a cadenas aisladas.
Una vez visto todo lo anterior, vamos a introducir unos cuantos conceptos más que nos permitan abordar la maquetación de la web propiamente dicha. En principio deberemos tomar en consideración dos factores: el orden en el que se definirán los elementos en el html y cómo se deben ajustar sus propiedades en la hoja de estilos.
Hay cuatro formas básicas de situar un contenedor en una página:
En el siguiente capítulo detallaré ejemplos de las estructuras más utilizadas (titulo y bloque central con menu a la derecha, bloque central y menús a derecha e izquierda, etc...) de manera que se puedan emplear directamente o ser modificadas para obtener prácticamente cualquier maquetación.
El hecho de hacer la descripción completa de las características en un archivo aparte organizando los elementos por clases hace que podamos modificar practicamente cualquier aspecto sin alterar el html. Esto permite trabajar aisladamente con las distintas partes que componen un sitio web (por un lado los elementos que se van a mostrar, por otro cómo deben verse) simplificando enormemente cualquier tarea de administración.
Yendo a la materia en sí, en principio voy a intentar hacer una síntesis de utilización de CSS al nivel más básico, detallando lo que desde mi punto de vista puede resultar más complejo o escabroso a partir de ejemplos sencillos que en un momento dado puedan ser válidos para crear la estructura básica de una página.
Para ello hay que definir unos cuantos conceptos imprescindibles para comprender lo que viene a continuación. En primer lugar vamos a ver cómo se aplica un conjunto de propiedades a un elemento concreto. En este caso utilizaremos un contenedor "div" y una etiqueta "span" para dar color y formato a una frase.
Cuestiones básicas
// HTML
<div id="texto">
Esto es una prueba en <span class="clase_r">rojo</span>
y <span class="clase_v">verde</span>
</div>
// CSS
#texto {
margin:10px;
padding:20px;
background:#efefef;
}
.clase_r {
color:red;
}
.clase_v {
color:green;
}La forma en que se muestra esto es la siguiente:
Esto es una prueba en rojo y verde
Para este sencillo ejemplo cabe destacar las dos formas posibles de clasificar una etiqueta, asignándole una clase (class="nombre") que después se definirá en el archivo CSS como ".nombre", o mediante una id (id="nombre"), que en la hoja de estilos se refleja como "#nombre". La diferencia entre ambas es que puede haber muchos elementos asignados a una única clase y varias clases asignadas a un solo elemento, mientras que una id pertenece inequívocamente a un solo elemento. Ambos atributos se pueden aplicar a cualquier etiqueta HTML visible, aunque las que comúnmente se suelen emplear son las utilizadas en el ejemplo, "div" y "span". La diferencia entre ambas consiste en que "div" es un elemento de tipo bloque, que por defecto ocupa el ancho total de la página, mientras que "span" se adapta al texto que contiene, por lo que se suele utilizar para dar estilo a cadenas aisladas.
Estructura de la página
Una vez visto todo lo anterior, vamos a introducir unos cuantos conceptos más que nos permitan abordar la maquetación de la web propiamente dicha. En principio deberemos tomar en consideración dos factores: el orden en el que se definirán los elementos en el html y cómo se deben ajustar sus propiedades en la hoja de estilos.
Hay cuatro formas básicas de situar un contenedor en una página:
- Normal. Si no especificamos ninguna propiedad, el bloque sencillamente se situará debajo del resto del contenido (siguiendo el flujo normal del HTML) ocupando toda la anchura de la que disponga dentro del bloque en el que a su vez esté contenido, y la altura correspondiente al espacio ocupado por los elementos que contenga (salvo que se determine lo contrario; esto es extensible a todos los demás).
- Flotante. Al definir un elemento como "float:right | left" se colocará como flotante a la derecha / izquierda de los elementos que vengan a continuación. Por lo tanto, si queremos ubicar un menú lateral y un bloque central, en el HTML deberemos definir en primer lugar el primero de ellos. Además es necesario especificar la anchura del bloque flotante para que se muestre correctamente
- Absoluto. Si la posición de un elemento está definida como "absolute", éste se situará según los valores que definamos respecto a una esquina de la página (generalmente la superior izquierda) e independientemente del lugar que ocupe en el HTML. Por defecto también tratará de ocupar todo el ancho del que disponga
- Fijo. Un elemento con posición "fixed" se ubicará exactamente igual que un absoluto, salvo porque permanecerá inmutable al desplazamiento del scroll de la página. Ese atributo no funciona correctamente en Internet Explorer 6, lo que hace que por el momento no pueda ser utilizado si queremos ofrecer compatibilidad con dicho navegador.
En el siguiente capítulo detallaré ejemplos de las estructuras más utilizadas (titulo y bloque central con menu a la derecha, bloque central y menús a derecha e izquierda, etc...) de manera que se puedan emplear directamente o ser modificadas para obtener prácticamente cualquier maquetación.
52 Comentarios
Temas relacionados:
Programación
CSS