Clase 07 04 08

372 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
372
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Clase 07 04 08

  1. 1. CSS Clase IP. de Chile 7 de Abril 2008
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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>

×