Search

Guía básica para entender CSS (Segunda parte)

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

3 comments

Comments 1 - 3 of 3 previous next Post a comment

Post a comment
Embed Video
Edit your comment Cancel

Notes on slide 1

10 Favorites

Guía básica para entender CSS (Segunda parte) - Presentation Transcript

  1.  
  2. Hojas de estilos en cascada. Instrucciones que debe seguir un navegador para presentar la información css
  3. 1996. Recomendaciones para mejorar la visualización de un html. css
  4. Separar al máximo la forma (presentación) y el fondo (datos) css
  5. Determina la presentación de la información de acuerdo con el dispositivo que se emplee. css
  6. media=“screen” media=“print” media=“aural”
  7. Su sintáxis
  8. body { background-color:#FFFFFF; }
  9. body { background-color:#FFFFFF; } Selector : Etiqueta ¿Dónde?
  10. #encabezado { background-color:#FFFFFF; } Selector : Identificador individual ¿Dónde?
  11. .datos { background-color:#FFFFFF; } Selector : Identificador común ¿Dónde?
  12. p strong { background-color:#FFFFFF; } Selector : Elemento contextual ¿Dónde?
  13. a:hover { background-color:#FFFFFF; } Selector : Pseudo elemento ¿Dónde?
  14. a:hover { background-color:#FFFFFF; } Declaración Selector : Pseudo elemento ¿Dónde?
  15. a:hover { background-color:#FFFFFF; } Declaración Propiedad : Atributo ¿Qué? Selector : Pseudo elemento ¿Dónde?
  16. a:hover { background-color:#FFFFFF; } Declaración Propiedad : Atributo ¿Qué? Valor : ¿Cómo? Selector : Pseudo elemento ¿Dónde?
  17. Reglas básicas
  18. 01 Jerarquía
  19. Autor - Usuario - Navegador
  20. <h1>Hola</h1>
  21. Hola <h1>Hola</h1>
  22. <h1>Hola</h1> Hola h1 { color:red; }
  23. Hola <h1>Hola</h1> h1 { color:red; }
  24. 02 Lo específico vence a lo genérico
  25. Ante un conflicto de definiciones el navegador tomará la que se determinó con mayor especificidad
  26. <body> <h1>Hola</h1> <p>Contenido</p> </body>
  27. Hola Contenido <body> <h1>Hola</h1> <p>Contenido</p> </body>
  28. Hola Contenido body { color:red; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
  29. Hola Contenido body { color:red; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
  30. Hola Contenido body { color:red; } body p { color:blue; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
  31. Hola Contenido body { color:red; } body p { color:blue; } <body> <h1>Hola</h1> <p>Contenido</p> </body> Elemento contextual
  32. Hola Contenido body { color:red; } body p { color:blue; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
  33. 03 Orden
  34. El último en ser leído es quien define la propiedad
  35. Hola Contenido h1 { color:red; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
  36. Hola Contenido <body> <h1>Hola</h1> <p>Contenido</p> </body> h1 { color:red; } h1 { color:blue; }
  37. Hola Contenido <body> <h1>Hola</h1> <p>Contenido</p> </body> h1 { color:red; } h1 { color:blue; }
  38. 04 Sintaxis estricta
  39. Un error provoca que el navegador omita la definición del estilo
  40. Hola Contenido BODY { color:red; } <body> <h1>Hola</h1> <p>Contenido</p> </body>
  41. 05 Unidades de medida
  42. Absolutas p { font-size:14px; }
  43. Absolutas p { font-size:12pt; }
  44. Relativas h1 { font-size:4em; }
  45. Porcentuales #encabezado { width:50%; }
  46. Propiedades importantes
  47. 01 position
  48. www.kiutnorma.com
  49. <div id=“marco”> <input id=“campo” /> </div>
  50. #marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> </div>
  51. #marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> </div>
  52. 02 float
  53. <div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> 1 2 3
  54. #caja1 { border-color:red float:left; } <div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> 1 2 3
  55. #caja1 { border-color:red float:left; width:25px; } <div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> 1 2 3
  56. #caja1 { border-color:red float:left; width:25px } #caja2 { border-color:blue float:left; width:25px; } <div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> 2 3 1
  57. <div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> 1 2 3 #caja1 { border-color:red float:left; width:25px } #caja2 { border-color:blue float:left; width:25px; }
  58. 03 clear
  59. <div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> 1 2 3 #caja1 { border-color:red float:left; width:25px } #caja2 { border-color:blue float:left; width:25px; }
  60. <div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> 1 2 3 #caja2 { border-color:blue float:left; width:25px; } #caja3 { width:25px; clear:both; }
  61. <div id=“caja1”> 1 </div> <div id=“caja2”> 2 </div> <div id=“caja3”> 3 </div> 1 3 2 #caja2 { border-color:blue float:left; width:25px; } #caja3 { width:25px; clear:both; }
  62. 04 z-index
  63. #marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> </div>
  64. #marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> <button> </button> </div>
  65. #marco { position:relative; border-color:red } input#campo { position:absolute; left:25px; top:10px; } <div id=“marco”> <input id=“campo” /> <button> </button> </div>
  66. input#campo { position:absolute; left:25px; top:10px; } #marco button { position:absolute; left:100px; top:10px; } <div id=“marco”> <input id=“campo” /> <button> </button> </div>
  67. input#campo { position:absolute; left:10px; top:10px; } #marco button { position:absolute; left:100px; top:10px; } <div id=“marco”> <input id=“campo” /> <button> </button> </div>
  68. input#campo { position:absolute; left:10px; top:10px; } #marco button { position:absolute; left:100px; top:10px; } <div id=“marco”> <input id=“campo” /> <button> </button> </div>
  69. input#campo { position:absolute; left:10px; top:10px; z-index:1; } #marco button { position:absolute; left:100px; top:10px; z-index:2; } <div id=“marco”> <input id=“campo” /> <button> </button> </div>
  70. input#campo { position:absolute; left:10px; top:10px; z-index:1; } #marco button { position:absolute; left:100px; top:10px; z-index:2; } <div id=“marco”> <input id=“campo” /> <button> </button> </div>
  71. 05 contenedores
  72. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; }
  73. <div id=“caja1”> 1 </div> #caja1 { border-color:red float:left; width:25px; } 1
  74. <div id=“caja1”> 1 </div> #caja1 { border-color:red float:left; width:25px; padding: } 1
  75. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding: }
  76. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; }
  77. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; } 5px 10px 4px 9px
  78. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; margin: }
  79. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; margin: }
  80. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } 7px 3px 2px 8px
  81. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; }
  82. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; }
  83. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; }
  84. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dotted; }
  85. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dotted; }
  86. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dashed; }
  87. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:dashed; }
  88. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:none; }
  89. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:none; }
  90. <div id=“caja1”> 1 </div> 1 #caja1 { border-color:red float:left; width:25px; border-width:4px; border-style:solid; }
  91. <div id=“caja1”> 1 </div> 1 #caja1 { float:left; width:25px; border:4px solid red; }
  92. Los dolores de cabeza
  93.  
  94. Primer Advil: Las márgenes
  95. <h1>Titulo</h1> <p>Contenido</p> IE MF Titulo Contenido
  96. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; } p { color:blue; } IE MF Titulo Contenido
  97. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; } p { color:blue; } IE MF Titulo Contenido
  98. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; } p { color:blue; } IE MF Titulo Contenido ¿?
  99. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; } p { color:blue; } IE MF Titulo Contenido Titulo Contenido
  100. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; margin:0 0 0 0; } p { color:blue; margin:0 0 0 0; } IE MF Titulo Contenido Titulo Contenido
  101. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; margin:0 0 0 0; } p { color:blue; margin:0 0 0 0; } IE MF Titulo Contenido Titulo Contenido
  102. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; margin:10px 0 10px 25px; } p { color:blue; margin:0 0 10px 25px; } IE MF Titulo Contenido Titulo Contenido
  103. <h1>Titulo</h1> <p>Contenido</p> h1 { color:red; margin:10px 0 10px 25px; } p { color:blue; margin:0 0 10px 25px; } IE MF Titulo Contenido Titulo Contenido
  104. <h1>Titulo</h1> <p>Contenido</p> <p>Contenido</p> h1 { color:red; margin:10px 0 10px 25px; } p { color:blue; margin:0 0 10px 25px; } IE MF Titulo Contenido Titulo Contenido
  105. <h1>Titulo</h1> <p>Contenido</p> <p>Contenido</p> h1 { color:red; margin:10px 0 10px 25px; } p { color:blue; margin:0 0 10px 25px; } IE MF Titulo Contenido Titulo Contenido Contenido Contenido
  106. Doce tabletas: El problema de la caja
  107. <div id=“caja1”> 1 </div> 1 #caja1 { border:1px solid red width:25px; height:25px; } 25px
  108. <div id=“caja1”> 1 </div> 1 25px #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; }
  109. <div id=“caja1”> 1 </div> 1 #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; } 5px 10px 4px 9px 25px
  110. <div id=“caja1”> 1 </div> 1 #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } 5px 10px 4px 9px 25px
  111. <div id=“caja1”> 1 </div> #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  112. IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  113. IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px
  114. IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px ¿?
  115. IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  116. IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  117. IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px
  118. IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 61px 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px
  119. IE MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 61px=8+1+9+25+10+1+7 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 30px 40px
  120. #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } <div id=“caja1”> 1 </div> 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  121. IE MF <div id=“caja1”> 1 </div> #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } ¿? ¿?
  122. IE MF <div id=“caja1”> 1 </div> #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } ¿? ¿ Javascript ?
  123. IE MF <div id=“caja1”> 1 </div> #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } ¿? ¿?
  124. IE MF #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  125. IE #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } /*Comienza el hack-box*/ /*Termina el hack-box*/ 1 7px 3px 2px 8px 5px 10px 4px 9px 25px MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  126. IE #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } /*Comienza el hack-box*/ #caja { voice-family: &quot;&quot;}&quot;&quot;; voice-family:inherit; } html>body div#caja { } /*Termina el hack-box*/ 1 7px 3px 2px 8px 5px 10px 4px 9px 25px MF 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  127. IE MF #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } /*Comienza el hack-box*/ #caja { voice-family: &quot;&quot;}&quot;&quot;; voice-family:inherit; width:4px; height:14px; } html>body div#caja { width:4px; height:14px; } /*Termina el hack-box*/ 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  128. IE MF #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } /*Comienza el hack-box*/ #caja { voice-family: &quot;&quot;}&quot;&quot;; voice-family:inherit; width:4px; height:14px; } html>body div#caja { width:4px; height:14px; } /*Termina el hack-box*/ 4+1+10+1+9 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  129. IE MF #caja1 { border:1px solid red width:25px; height:25px; padding:5px 10px 4px 9px; margin:3px 7px 2px 8px; } /*Comienza el hack-box*/ #caja { voice-family: &quot;&quot;}&quot;&quot;; voice-family:inherit; width:4px; height:14px; } html>body div#caja { width:4px; height:14px; } /*Termina el hack-box*/ 4+1+10+1+9 14+1+5+1+4 1 7px 3px 2px 8px 5px 10px 4px 9px 25px 1 7px 3px 2px 8px 5px 10px 4px 9px 25px
  130.  

+ Carlos CaicedoCarlos Caicedo, 3 years ago

custom

3505 views, 10 favs, 1 embeds more stats

Esta presentación es un apoyo para una capacitaci more

More info about this document

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Go to text version

  • Total Views 3505
    • 3501 on SlideShare
    • 4 from embeds
  • Comments 3
  • Favorites 10
  • Downloads 116
Most viewed embeds
  • 4 views on https://aulaglobal2.uc3m.es

more

All embeds
  • 4 views on https://aulaglobal2.uc3m.es

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Tags

-->
Search
RSS Feed
What's new?

© 2009 SlideShare Inc. All Rights Reserved