CSS WALC 2004 – Track 2 Pep Turró pep@turro.net Cuzco, octubre de 2004

¿Qué es CSS? Cascading StyleSheets: Hojas de estilo en cascada Iniciativa de Microsoft Actualmente standard del W3C CSS1 oficial desde 1996 CSS2 oficial desde 1998 CSS3 en proceso de standarización

¿Qué ofrece CSS? Separación entre estructura y presentación HTML para marcar la estructura del documento (organización interna) CSS para describir cómo se muestra (diseño) En un sitio web, ¿que es lo más importante?

Para webmasters Enorme facilidad de mantenimiento de los sitios Mayor claridad y simplicidad en todo el sitio Facilita los procesos de desarrollo separación de roles

Para usuarios Accesibilidad Posibilidad de usar hojas de estilo de usuario. La presentación no es una imposición. Especificación de presentaciones para pantalla, impresión, reproducción por voz, etc. Degrada gràcilmente Compatibilidad con navegadores antiguos Compatibilidad con navegadores “diferentes”

Cómo especificar el estilo en HTML De mejor a peor (recomendación): Como hoja externa, relacionada a través del elemento LINK en la cabecera HTML: <link rel=”stylesheet” type=”text/css” href=”estilo.css”> Como un bloque dentro del documento HTML: <style type=”text/css”> ... </style> Dentro de tags particulares, mediante el atributo STYLE: <p style=”font-size: 20pt”>

Sintaxis CSS Una hoja de estilo se divide en reglas Cada regla está formada por una parte selector y un conjunto de propiedades H1 { color: red; font-weight: bold; }

Selectores De tipo (elementos/tags): directamente un tag: B Descendientes: seleccionar elementos ubicados dentro de otros. Se separan los parientes con espacio: P B Grupos: separar múltiples selectores con comas: B, I Clases: según el atributo CLASS en tags HTML. El selector es la clase precedida por un punto Identificador: según el atributo ID en tags HTML. El selector es la clase precedida por #

Más selectores Pseudo-clases y pseudo-elementos: permiten seleccionar en función de propiedades generales que puedan tener los elementos: P:first-line A:hover A:visited

Propiedades Fuente: font-size, font-weight, font-family... Color: color Texto: text-align, ... Fondo (background): background-color, background- repeat, ... Márgenes, espaciado y bordes: margin, padding, border, ... Posición: position, float, ... Clasificación: z-index, ...

Valores: unidades El valor y su unidad depende de la propiedad Unidades absolutas: pt, px Unidades relativas: %, em, ex Enumeraciones: no-repeat, inherit, right, ... Colores: black, white, #0F3, #00FF33, rgb(255,255,255) URL: url('http://www.misitio.com/fondo.jpg')

El diseño aplicado a fondo Para identificar zonas del documento: clases identificadores tags DIV (bloques) y SPAN