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

Presentación del tema: "CSS WALC 2004 – Track 2 Pep Turró pep@turro.net Cuzco, octubre de 2004."— Transcripción de la presentación:

1 CSS WALC 2004 – Track 2 Pep Turró Cuzco, octubre de 2004

2 ¿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

3 ¿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?

4 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

5 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”

6 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”>

7 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; }

8 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 #

9 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

10 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, ...

11 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('

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