Empezando con Estilo
Las Hojas de estilo o CSS son el estándar del W3C para aplicar el diseño páginas web. Consiste en una serie de etiquetas (selectores) seguidas por algunas propiedades y sus valores encerrados entre llaves:
Por ejemplo, para cambiar el aspecto de las cabeceras h1 y h2, podemos hacer:
<title>CSS Example</title>
<style type="text/css"
También se permite agrupar etiquetas con la misma propiedad:
Otro ejemplo:
Selectores y propiedades
Los selectores se emplean para asignar propiedades a una o varias partes de un documento. El selector class es el más usado y puede emplearse varias veces en un documento:
Por ejemplo, los siguientes selectores class justifican un párrafo al centro o derecha, según se use:
y se usaría como:
Párrafo justificado a la derecha.
"center"
Párrafo centrado.
En este caso, las propiedades de los selectores sólo se mostrarán cuando se apliquen a párrafos y sólo los parrafos que tengan ese selector se verán afectados. Podemos definir un selector sin una etiqueta HTML, lo que permiría aplicarla a cualquer etiqueta, por ejemplo:
se podrá aplicar a:
Párrafo centrado.
</p>
<h1 class="center">
Cabecera centrada.
</p>
El otro selector es el id y a diferencia de class, éste sólo se puede usar una vez en cada documento:
Asignándose como:
Enlace 1
Enlace 2
Enlace 3
Añadiendo una hoja de estilo
Existen tres formas de aplicar una hoja de estilos de un documento HTML, empotrando en el documento, con el elemento link de HTML o con la directiva @import.
El método link es el método que entienden navegadores viejos
"StyleSheet""print.css""text/css""print"
"StyleSheet""contrast.css""text/css""screen"
y debe aparecer en la cabecera del documento (en <head>).
La otra posibidad es la directiva @import de CSS:
@import url("style.css") screen;
@import url("print.css") print;
</style>
Usando un enlace externo, podríamos tener una hoja de estilo como:
Algunas propiedades
Dando forma al documento
Los selectores de margen, espaciado, etc, permiten darle el aspecto general al documento y partes de él.
Esto además de puede abreviar como:
Dando formato al texto
La mayoría de las propiedades del texto se atribuyen con el selector font. Por ejemplo:
La herencia en CSS
Las hojas de estilo mantienen una jeraquía según qué etiqueta contienen a otras. Por ejemplo, la etiqueta <body> será una etiqueta superior (padre) y dentro de ella hay otras otras etiquetas como <p>, <div> o <h1> (etiquetas hijo); en general, las etiquetas hijo heredan las propiedades del padre.
Se puede usar un selector descendente para aplicar estilos cuando se cumpla una secuencia de elementos. Por ejemplo:
En este caso se subraya el texto enfatizado solo si está contenido en un párrafo. Así, el resultado de:
<p>
Lorem ipsum <em>dolor</em> sit amet, <strong><em>consectetuer</em>
</strong> adipiscing elit, sed diam nonummy nibh <strong>euismod
tincidunt...</strong></p>
será:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt...
Un selector hijo es del tipo:
En este caso se enfatiza texto en un párrafo, pero sólo cuando el texto enfatizado es hijo:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt...
Los selectores hermanos tienen la forma siguiente:
Aquí en aplica estilo a <h3> pero sólo cuando <h2> y <h3> tienen el mismo padre y <h3> viene inmediatamente despues de <h2>.
El modelo de cajas
Las hojas de estilo aplican propiedades a elementos HTML como si fueran cajas, las que se le añaden bordes, márgenes, fondos, etc. Por ejemplo, con la etiqueta <div>:
aplicado a:
¡Hola mundo!
se verá:
%cajanegra% [@ ¡Hola mundo! @]
Los atributos de cajas son los siguientes:
Conjuntos de cajas
El modelo de cajas usando etiquetas div permite hacer esquemas de una página web o parte de ella fácilmente:
- Esquemas simples en una página
- Esquema de dos columnas
- Esquema de tres columnas
Formato de tablas
Con el uso de CSS las tablas pierden protagonismo y se emplean únicamente para mostrar datos tablulares y no para estructurar páginas, al menos en un marcado estricto. Las hojas de estilo permiten formatear tablas con propiedades equivalentes a los estilos con HTML y varias propiedades más. Una tabla con las siguientes propiedades:
<tr>
<td class="C1">Celda 1</td>
<td>Celda 2</td>
</tr>
</table>
Y el resultado es:
Celda 1 Celda 2 Formateando listas
CSS permite cambiar la apariencia de los elementos de listas, muy útil para crear menús y barras de navegación.
resulta:
* NGC 3486
* NGC 3488
1. NGC 3486
2. NGC 3488
Un navegador vertical podría ser el siguiente:
que se verá como:
* Enlace 1 * Enlace 2 * Enlace 3
Estilo de enlaces y efectos
Las hojas de estilo poseen algunas propiedades de efectos basados en comportamiento. Un ejemplo de estilo y comportamiento para enlaces muy común es el siguiente:
y produce un efecto como este: Google
la propiedad hover es una pseudo-clase que determina lo que ocurrirá cuando el puntero esté encima del enlace. Otras pseudo clases relacionadas con enlaces son:
En el estilo de enlaces es importante mantener este orden, aunque no hay porque usarlos todos.
Otra propiedad útil es display, que se puede usar para mostrar u ocultar elementos cuando se desee:
Esta propiedad se puede usar en enlaces para crear comportamientos especiales:
Y el resultado es este enlace.
Una barra de navegación con CSS
Las hojas de estilo permiten dar formato a las lista para crear menus de navegación muy logrados. Una lista simple con elaces como:
"navlist"
"#"Enlace 1
"#"Enlace 2
"#"Enlace 3
"#"Enlace 4
"#"Enlace 5
Se le puede aplicar un estilo como:
Y el resultado es este menú.
Algunas guias y plantillas para craer menús con CSS se pueden ver en:
- Listamatic - Listas y tutores para listas con CSS
- Menus de Alsacréations
- List-O-Matic - Listas automáticas para gente con poco tiempo