Your SlideShare is downloading. ×
Uso de selectores CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Uso de selectores CSS

1,470

Published on

Explicación del uso de los selectores divs y su tipología. Aplicación de atributos CSS

Explicación del uso de los selectores divs y su tipología. Aplicación de atributos CSS

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,470
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS Instrucciones que debe seguir un navegador para presentar la información viernes 27 de agosto de 2010
  • 2. CSS Separar al máximo la forma (presentación) y el fondo (datos) viernes 27 de agosto de 2010
  • 3. SINTAXIS como escribimos aquello que queremos visualizar viernes 27 de agosto de 2010
  • 4. Selector: Etiqueta ¿Dónde? body { background-color:#FFFFFF; } viernes 27 de agosto de 2010
  • 5. documento body { background-color:#FFFFFF; } viernes 27 de agosto de 2010
  • 6. Selector: Identificador individual ¿Dónde? #encabezado { background-color:#666666; } 1 vez por documento viernes 27 de agosto de 2010
  • 7. documento #encabezado { background-color:#666666; } viernes 27 de agosto de 2010 id
  • 8. Selector: Identificador común ¿Dónde? .datos { background-color:#00FFCC; } +1 vez por documento viernes 27 de agosto de 2010
  • 9. documento .datos { background-color:#00FFCC; } viernes 27 de agosto de 2010 class
  • 10. REGLAS BÁSICAS viernes 27 de agosto de 2010
  • 11. JERARQUÍA autor - usuario - navegador <h1>Hola</h1> viernes 27 de agosto de 2010
  • 12. JERARQUÍA autor - usuario - navegador Hola <h1>Hola</h1> viernes 27 de agosto de 2010
  • 13. JERARQUÍA autor - usuario - navegador Hola <h1>Hola</h1> h1 { color:red; } viernes 27 de agosto de 2010
  • 14. JERARQUÍA autor - usuario - navegador Hola <h1>Hola</h1> h1 { color:red; } viernes 27 de agosto de 2010
  • 15. ESPECÍFICO - GENÉRICO <body> <h1>Hola</h1> <p>Contenido</p> </body> viernes 27 de agosto de 2010
  • 16. ESPECÍFICO - GENÉRICO Hola <body> Contenido <h1>Hola</h1> <p>Contenido</p> </body> viernes 27 de agosto de 2010
  • 17. ESPECÍFICO - GENÉRICO Hola <body> Contenido <h1>Hola</h1> <p>Contenido</p> </body> body { color:red; } viernes 27 de agosto de 2010
  • 18. ESPECÍFICO - GENÉRICO Hola <body> Contenido <h1>Hola</h1> <p>Contenido</p> </body> body { color:red; } viernes 27 de agosto de 2010
  • 19. ESPECÍFICO - GENÉRICO Hola <body> Contenido <h1>Hola</h1> <p>Contenido</p> </body> body { color:red; } p { color:blue; } viernes 27 de agosto de 2010
  • 20. ESPECÍFICO - GENÉRICO Hola <body> Contenido <h1>Hola</h1> <p>Contenido</p> </body> body { color:red; } p { color:blue; } viernes 27 de agosto de 2010
  • 21. SINTAXIS ESTRICTA navegador omite definición Hola <body> Contenido <h1>Hola</h1> <p>Contenido</p> </body> BODY { color:red; } viernes 27 de agosto de 2010
  • 22. SINTAXIS ESTRICTA navegador omite definición Hola <body> Contenido <h1>Hola</h1> <p>Contenido</p> </body> BODY { color:red; } viernes 27 de agosto de 2010
  • 23. CONTENEDORES DIV La etiqueta <div> o división de bloque es un elemento de html utilizado para definir secciones de un documento. viernes 27 de agosto de 2010
  • 24. COMO EXPLICAR UN DIV? viernes 27 de agosto de 2010
  • 25. COMO EXPLICAR UN DIV? Bueno, vamos a hacerlo gráfico: imaginen a los divs como cajas. viernes 27 de agosto de 2010
  • 26. viernes 27 de agosto de 2010
  • 27. Tenemos el cuerpo de la página, y dentro de ella metemos cajas y las ubicamos como queremos y donde queremos. viernes 27 de agosto de 2010
  • 28. VAYAMOS A ALGO MAS GRÁFICO viernes 27 de agosto de 2010
  • 29. viernes 27 de agosto de 2010
  • 30. El HTML de la página que armamos arriba sería: <body> <div>(header)</div> <div>(barra lateral)</div> <div>(nota 1)</div> <div>(nota 2)</div> <div>(footer)</div> </body> viernes 27 de agosto de 2010
  • 31. El HTML de la página que armamos sería: <body> <div>(header)</div> <div>(barra lateral)</div> <div>(nota 1)</div> <div>(nota 2)</div> <div>(footer)</div> </body> viernes 27 de agosto de 2010
  • 32. 2 ATRIBUTOS BÁSICOS float clear viernes 27 de agosto de 2010
  • 33. float La propiedad float permite sacar a un elemento del flujo del documento, y posicionarlo a la izquierda o derecha de otros elementos adyacentes. Admite tres valores, right, left y none. viernes 27 de agosto de 2010
  • 34. FLOAT <div id=“caja1”> 1 1 </div> 2 <div id=“caja2”> 2 3 </div> <div id=“caja3”> 3 </div> viernes 27 de agosto de 2010
  • 35. FLOAT <div id=“caja1”> 1 1 </div> 2 <div id=“caja2”> 2 3 </div> <div id=“caja3”> 3 </div> #caja1 { border-color:red float:left; } viernes 27 de agosto de 2010
  • 36. FLOAT <div id=“caja1”> 1 </div> 1 2 <div id=“caja2”> 1 3 2 </div> <div id=“caja3”> 3 </div> #caja1 { border-color:red float:left; } viernes 27 de agosto de 2010
  • 37. FLOAT <div id=“caja1”> 1 </div> 1 2 <div id=“caja2”> 1 3 2 </div> <div id=“caja3”> 3 </div> #caja1 { border-color:red float:left; } #caja2 { border-color:blue float:left; width:25px; } viernes 27 de agosto de 2010
  • 38. FLOAT <div id=“caja1”> 1 </div> 1 2 3 <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> #caja1 { border-color:red float:left; } #caja2 { border-color:blue float:left; width:25px; } viernes 27 de agosto de 2010
  • 39. clear clear se utiliza conjuntamente con float para indicar cuando un elemento flotante permite otros elementos flotantes junto a el. Sus posible valores son none, left right o both. none: el elemento permite otros flotantes a ambos lados left: el elemento no permite flotantes a su izquierda right: el elemento no permite flotantes a su derecha both: el elemento no permite flotantes a ningun lado viernes 27 de agosto de 2010
  • 40. CLEAR <div id=“caja1”> 1 </div> 1 2 3 <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> #caja1 { border-color:red float:left; width:25px; } #caja2 { border-color:blue float:left; width:25px; } viernes 27 de agosto de 2010
  • 41. CLEAR <div id=“caja1”> 1 </div> 1 2 3 <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> #caja2 { border-color:blue float:left; width:25px; } #caja3 { width:25px; clear:both; } viernes 27 de agosto de 2010
  • 42. CLEAR <div id=“caja1”> 1 </div> 1 2 3 <div id=“caja2”> 3 2 </div> <div id=“caja3”> 3 </div> #caja2 { border-color:blue float:left; width:25px; } #caja3 { width:25px; clear:both; } viernes 27 de agosto de 2010
  • 43. EL RESTO ES PRACTICAR, Y ES LO QUE VAMOS A HACER AHORA. viernes 27 de agosto de 2010

×