Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Estilo css

200 views

Published on

Para poder llegar a utilizar un solo tema en todas las páginas de nuestra Web...aquí en este curso estarás capacitado para dejar con característica muy llamativas en tu página...

Published in: Education
  • Be the first to comment

  • Be the first to like this

Estilo css

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

×