Clase 07 04 08

1. CSS Clase IP. de Chile 7 de Abril 2008

2. Tematica <ul><li>HTML es un elemento de bloque. </li></ul><ul><li>Contiene 85 elementos distintos Dividir la pagina es secciones “div” Div es un contenedor, una caja en el que se puede almacenar otras cajas. </li></ul>

3. <ul><li>Cuatro secciones claves de una pagina web Encabezado , con logotipo y eslogan. Sección de navegaci ón : menús de navegación. Sección del contenido : texto e imágenes Pie : espacio para la dirección y el copyright ver ejemplos </li></ul>

4. <ul><li>Para distinguir las secciones en el código fuente, se les asigna un nombre único mediante el atributo “ id”. </li></ul><ul><li>En html tiene el siguiente aspecto </li></ul>

5. div <ul><li><div id=“encabezado”> </div> </li></ul><ul><li><div id=“navegacion”> </div> </li></ul><ul><li><div id=“areatexto”> </div> </li></ul><ul><li><div id=“pie”> </div> </li></ul>

6. #wrapper <ul><li>En español se llama sobre-escritura </li></ul><ul><li>Es un contenedor general para las otras </li></ul><ul><ul><ul><li>DIV. <div id=“wrapper”> abreviado #wrapper Ver ejemplo de div en c ódigo. Ver su representación gr á fica. </li></ul></ul></ul>

7. ¿Qu é es CSS? <ul><li>Styles define how to display HTML elements </li></ul><ul><li>Styles are normally stored in Style Sheets </li></ul><ul><li>External Style Sheets can save you a lot of work </li></ul><ul><li>External Style Sheets are stored in CSS files </li></ul><ul><li>Multiple style definitions will cascade into one </li></ul>

8. Como funcionan los CSS <ul><li>Veamos un demo ir </li></ul><ul><li>Where number four has the highest priority: </li></ul><ul><li>1. Browser default </li></ul><ul><li>2. External style sheet </li></ul><ul><li>3. Internal style sheet (inside the <head> tag) </li></ul><ul><li>4. Inline style (inside an HTML element) </li></ul>

9. Sintaxsis de css <ul><li>Cada regla consta de un SELECTOR, que es el que indica a que elemento o parte de la página se aplica el estilo; normalmente los selectores son etiquetas HTML (p.e. h1 sería un selector que permitiría aplicar estilos a las cabeceras <h1>). A cada selector debe seguir una DECLARACION del estilo que ha de serle aplicado (p.e. color:blue). Toda declaración tiene dos partes: PROPIEDAD (por ejemplo, color) y VALOR (por ejemplo, blue). A cualquier etiqueta HTML se le puede asignar un estilo. </li></ul>

10. Sintaxsis de css <ul><li>Los estilos, entonces, se definen así: </li></ul><ul><li>selector { propiedad:valor } </li></ul><ul><li>h1 {color : blue} </li></ul>

11. Sintaxis de css <ul><li>La declaración {propiedad : valor} ha de ir encerrada en llaves { }. </li></ul><ul><li>Pueden asignarse varias propiedades a un mismo selector, separadas por punto y coma: </li></ul><ul><li>Selector { propiedad1: valor1; propiedad2: valor2 } </li></ul><ul><li>h1 {color: yellow; background-color: red } </li></ul>

12. Sintaxis de css <ul><li>Tambien se pueden asignar propiedades de forma conjunta a varios selectores: </li></ul><ul><li>Selector1, Selector2, {propiedad1:valor1;propiedad2:valor2} </li></ul>

13. Sintaxis de css <ul><li><head> </li></ul><ul><li><title></title> </li></ul><ul><li><style> </li></ul><ul><li>h1 { font-size: x-large; color: red; } </li></ul><ul><li>h2 { font-size: large; color: blue; } </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul>

14. Sintaxis de css <ul><li>Si ambos selectores tuvieran las mismas propiedades, podríamos haber escrito: </li></ul><ul><li><head> </li></ul><ul><li><title>...</title> </li></ul><ul><li><style> </li></ul><ul><li>h1, h2 { font-size: x-large; color: red; } </li></ul><ul><li></style> </li></ul><ul><li></head> Practiquemos…… ir </li></ul>

15. Sintaxis de css <ul><li>Propiedades solitarias </li></ul><ul><li><head> </li></ul><ul><li><title>...</title> </li></ul><ul><li><style> </li></ul><ul><li>h1, h2 { font-size: x-large; color: red; } </li></ul><ul><li>h2 {font-family:garamond;} </li></ul><ul><li></style> </li></ul><ul><li></head> Practiquemos…… ir ……… ir 2 </li></ul>

Clase 07 04 08

Estás leyendo una previsualización.

Eche un vistazo a continuación

Clase 07 04 08

Más Contenido Relacionado

Presentaciones para usted (19)

A los espectadores también les gustó (20)

Similares a Clase 07 04 08 (20)

Más reciente (20)

Clase 07 04 08