La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

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

Presentaciones similares


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

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

2 2 WALC 2004 – Track 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 3 WALC 2004 – Track 2 ¿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 4 WALC 2004 – Track 2 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 5 WALC 2004 – Track 2 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 6 WALC 2004 – Track 2 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: – Como un bloque dentro del documento HTML:... – Dentro de tags particulares, mediante el atributo STYLE:

7 7 WALC 2004 – Track 2 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 8 WALC 2004 – Track 2 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 9 WALC 2004 – Track 2 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 10 WALC 2004 – Track 2 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 11 WALC 2004 – Track 2 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')

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


Descargar ppt "1 WALC 2004 – Track 2 CSS Pep Turró Cuzco, octubre de 2004."

Presentaciones similares


Anuncios Google