CSS
        Instrucciones que debe seguir un navegador para presentar la
                                información




v...
CSS
    Separar al máximo la forma (presentación) y el fondo (datos)




viernes 27 de agosto de 2010
SINTAXIS
                       como escribimos aquello que queremos visualizar

viernes 27 de agosto de 2010
Selector: Etiqueta
                 
 ¿Dónde?

       body
       {
       
 background-color:#FFFFFF;
       }




vierne...
documento
                               body
                               {
                               
 background...
Selector: Identificador individual
                
 ¿Dónde?

       #encabezado
       {
       
 background-color:#666666...
documento
                               #encabezado
                               {
                               
 bac...
Selector: Identificador común
                
 ¿Dónde?

       .datos
       {
       
 background-color:#00FFCC;
       }...
documento
                               .datos
                               {
                               
 backgrou...
REGLAS BÁSICAS




viernes 27 de agosto de 2010
JERARQUÍA
    autor - usuario - navegador

        <h1>Hola</h1>




viernes 27 de agosto de 2010
JERARQUÍA
    autor - usuario - navegador
                                  Hola
        <h1>Hola</h1>




viernes 27 de a...
JERARQUÍA
    autor - usuario - navegador
                                  Hola
        <h1>Hola</h1>




        h1
    ...
JERARQUÍA
    autor - usuario - navegador
                                  Hola
        <h1>Hola</h1>




        h1
    ...
ESPECÍFICO - GENÉRICO
        <body>
        	 <h1>Hola</h1>
        	 <p>Contenido</p>
        </body>




viernes 27 de ...
ESPECÍFICO - GENÉRICO
                               Hola
        <body>                 Contenido
        	 <h1>Hola</h1>...
ESPECÍFICO - GENÉRICO
                               Hola
        <body>                 Contenido
        	 <h1>Hola</h1>...
ESPECÍFICO - GENÉRICO
                               Hola
        <body>                 Contenido
        	 <h1>Hola</h1>...
ESPECÍFICO - GENÉRICO
                               Hola
        <body>                 Contenido
        	 <h1>Hola</h1>...
ESPECÍFICO - GENÉRICO
                               Hola
        <body>                 Contenido
        	 <h1>Hola</h1>...
SINTAXIS ESTRICTA
    navegador omite definición
                                Hola
        <body>                  Conte...
SINTAXIS ESTRICTA
    navegador omite definición
                                Hola
        <body>                  Conte...
CONTENEDORES DIV
    La etiqueta <div> o división de bloque es un elemento de html
    utilizado para definir secciones de ...
COMO EXPLICAR UN DIV?




viernes 27 de agosto de 2010
COMO EXPLICAR UN DIV?
    Bueno, vamos a hacerlo gráfico: imaginen a los divs como cajas.




viernes 27 de agosto de 2010
viernes 27 de agosto de 2010
Tenemos el cuerpo de la página, y dentro de ella
    metemos cajas y las ubicamos como queremos y
    donde queremos.



v...
VAYAMOS A ALGO MAS
    GRÁFICO



viernes 27 de agosto de 2010
viernes 27 de agosto de 2010
El HTML de la página que armamos arriba sería:
    <body>
    
 <div>(header)</div>
    
 <div>(barra lateral)</div>
    
...
El HTML de la página que armamos sería:

    <body>
    
 <div>(header)</div>
    
 <div>(barra lateral)</div>
    
 <div>...
2 ATRIBUTOS BÁSICOS

    float
    clear

viernes 27 de agosto de 2010
float
                               La propiedad float permite sacar
                               a un elemento del flujo ...
FLOAT
       <div id=“caja1”>
       	   1                   1
       </div>
                               2
       <div ...
FLOAT
       <div id=“caja1”>
       	   1                   1
       </div>
                               2
       <div ...
FLOAT
       <div id=“caja1”>
       	   1
       </div>                  1 2
       <div id=“caja2”>        1 3
       	 ...
FLOAT
       <div id=“caja1”>
       	   1
       </div>                   1 2
       <div id=“caja2”>         1 3
       ...
FLOAT
       <div id=“caja1”>
       	   1
       </div>                   1 2 3
       <div id=“caja2”>
       	   2
    ...
clear
                               clear se utiliza conjuntamente con float para
                               indicar c...
CLEAR
       <div id=“caja1”>
       	   1
       </div>                   1 2 3
       <div id=“caja2”>
       	   2
    ...
CLEAR
       <div id=“caja1”>
       	   1
       </div>                   1 2 3
       <div id=“caja2”>
       	   2
    ...
CLEAR
       <div id=“caja1”>
       	   1
       </div>                   1 2 3
       <div id=“caja2”>         3
       ...
EL RESTO ES PRACTICAR, Y ES
    LO QUE VAMOS A HACER
    AHORA.




viernes 27 de agosto de 2010
Upcoming SlideShare
Loading in …5
×

Uso de selectores CSS

1,650 views
1,566 views

Published on

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

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

No Downloads
Views
Total views
1,650
On SlideShare
0
From Embeds
0
Number of Embeds
226
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Uso de selectores CSS

  1. 1. CSS Instrucciones que debe seguir un navegador para presentar la información viernes 27 de agosto de 2010
  2. 2. CSS Separar al máximo la forma (presentación) y el fondo (datos) viernes 27 de agosto de 2010
  3. 3. SINTAXIS como escribimos aquello que queremos visualizar viernes 27 de agosto de 2010
  4. 4. Selector: Etiqueta ¿Dónde? body { background-color:#FFFFFF; } viernes 27 de agosto de 2010
  5. 5. documento body { background-color:#FFFFFF; } viernes 27 de agosto de 2010
  6. 6. Selector: Identificador individual ¿Dónde? #encabezado { background-color:#666666; } 1 vez por documento viernes 27 de agosto de 2010
  7. 7. documento #encabezado { background-color:#666666; } viernes 27 de agosto de 2010 id
  8. 8. Selector: Identificador común ¿Dónde? .datos { background-color:#00FFCC; } +1 vez por documento viernes 27 de agosto de 2010
  9. 9. documento .datos { background-color:#00FFCC; } viernes 27 de agosto de 2010 class
  10. 10. REGLAS BÁSICAS viernes 27 de agosto de 2010
  11. 11. JERARQUÍA autor - usuario - navegador <h1>Hola</h1> viernes 27 de agosto de 2010
  12. 12. JERARQUÍA autor - usuario - navegador Hola <h1>Hola</h1> viernes 27 de agosto de 2010
  13. 13. JERARQUÍA autor - usuario - navegador Hola <h1>Hola</h1> h1 { color:red; } viernes 27 de agosto de 2010
  14. 14. JERARQUÍA autor - usuario - navegador Hola <h1>Hola</h1> h1 { color:red; } viernes 27 de agosto de 2010
  15. 15. ESPECÍFICO - GENÉRICO <body> <h1>Hola</h1> <p>Contenido</p> </body> viernes 27 de agosto de 2010
  16. 16. ESPECÍFICO - GENÉRICO Hola <body> Contenido <h1>Hola</h1> <p>Contenido</p> </body> viernes 27 de agosto de 2010
  17. 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. 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. 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. 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. 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. 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. 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. 24. COMO EXPLICAR UN DIV? viernes 27 de agosto de 2010
  25. 25. COMO EXPLICAR UN DIV? Bueno, vamos a hacerlo gráfico: imaginen a los divs como cajas. viernes 27 de agosto de 2010
  26. 26. viernes 27 de agosto de 2010
  27. 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. 28. VAYAMOS A ALGO MAS GRÁFICO viernes 27 de agosto de 2010
  29. 29. viernes 27 de agosto de 2010
  30. 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. 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. 32. 2 ATRIBUTOS BÁSICOS float clear viernes 27 de agosto de 2010
  33. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 43. EL RESTO ES PRACTICAR, Y ES LO QUE VAMOS A HACER AHORA. viernes 27 de agosto de 2010

×