Breve introducción a CSS para el curso de Desarrollo Web, impartido por el I.S.C Juan Manuel Padilla Carmona en UNIVAC. Cuernavaca Morelos, México. Noviembre 2012

1. Curso de Desarrollo Web
domingo, 9 de diciembre de 12

2. Curso de Desarrollo Web
Cascading Style Sheets
domingo, 9 de diciembre de 12

3. <h1>Agenda</h1>
<ol class=”agendaCSS”>
<li>Introducción</li>
<li>ID, CLASS y Elementos</li>
<li>Aplicando Estilos</li>
<li>CSS Reset</li>
<li>Buenas Practicas</li>
<li>Hojas de estilo externas</li>
<li>Estilos</li>
</ol>
domingo, 9 de diciembre de 12

4. <h1>Introducción</h1>
<h2>¿Qué es CSS</h2>
<p>El nombre hojas de estilo en cascada viene del inglés Cascading
Style Sheets, del que toma sus siglas. CSS es un lenguaje usado para
definir la presentación de un documento estructurado escrito en HTML
o XML.</p>
<span class=”fuenteDefinicion”> Wikipedia </span>
domingo, 9 de diciembre de 12

5. <h1>Introducción</h1>
<h2>¿Por qué usar CSS?</h2>
<ul class=”CSSOferta”>
<li>Separación del contenido y la presentación.</li>
<li>Flexibilidad.</li>
<li>Unificación del diseño.</li>
<li>Optimización de los tiempos de carga y tráfico en el servidor.</li>
<li>Accesibilidad y Estructuración.</li>
<li>Limpieza del código fuente.</li>
<li>Compatibilidad y continuidad.</li>
<li>Estandarización</li>
<li>Y muchas otras cosas buenas más</li>
</ul>
domingo, 9 de diciembre de 12

6. <h1>Introducción</h1>
<h2>Sintaxis</h2>
<ul class=”CSSSintaxis”>
<li>Usualmente el selector es un elemento al que se le desea aplicar
el estilo</li>
<li>Cada declaración consiste de una propiedad y un valor.</li>
<li>La propiedad es un atributo de estilo que se cambiará.</li>
</ul>
domingo, 9 de diciembre de 12

7. <h1>ID, CLASS y Elementos</h1>
<h2>CSS ID</h2>
<p>CSS permite especificar selectores específicos llamados “id” y
“class”</p>
<ul class=”CSSId”>
<li>El selector ID especifica un estilo solo y único elemento.</li>
<li>Para definirlo se utiliza un “#”.</li>
<li>Para ser aplicado en HTML se escribe id=”esitloID”.</li>
</ul>
<p>Ejemplo</p>
#contenedor {magin:0 auto; width:80%}
domingo, 9 de diciembre de 12

8. <h1>ID, CLASS y Elementos</h1>
<h2>CSS CLASS</h2>
<ul class=”CSSClass”>
<li>El selector CLASS especifica un estilo y puede aplicarse a distintos
elementos.</li>
<li>Para definirlo se utiliza un “.”.</li>
<li>Para ser aplicado en HTML se escribe class=”esitloCLASS”.</li>
</ul>
<p>Ejemplo</p>
.subtitulo {font-size:2em}
domingo, 9 de diciembre de 12

9. <h1>ID, CLASS y Elementos</h1>
<h2>Elementos</h2>
<p>Los elementos son las etiquetas de HTML a las que se les puede
definir un estilo el cual heredan todas las que estén presentes en el
documento.</p>
<p>Ejemplo</p>
p {font-size:1em}
domingo, 9 de diciembre de 12

10. <h1>ID, CLASS y Elementos</h1>
<h2>Resumen</h2>
En CSS En HTML
Elementos HTML p <p><p>
Identificadores de elementos #id1 id="id1"
Clases de elementos . clase1 class="clase1"
Combinaciones p, clase1,…
domingo, 9 de diciembre de 12

11. <h1>Aplicando Estilos</h1>
<h2>¿Cómo agrego estilos?</h2>
<p>CSS puede aplicarse a un documento de 3 formas:</p>
<ul class=”CSSAplicacion”>
<li>Estilos en línea (inline styles), donde los estilos se escriben por
cada linea a la que se desea modificar</li>
NO <li>Estilos internos (internal style sheet), cuando los estilos se definen
en la cabecera del documento a modificar.</li>
<li>Estilos externos (external style sheet), donde los estilos son
definidos desde una hoja de estilos externa la cual es llamada por el
documento HTML.</li>
</ul>
domingo, 9 de diciembre de 12

12. <h1>CSS Reset</h1>
<h2>Borrar estilos por default</h2>
<p>Los navegadores web ya tienen definidos estilos para las diferentes
etiquetas en HTML, para evitar que estos estilos causen conflicto con
los que definimos, aplicamos un reseteo mediante un archivo reset.css</
p>
<p>El CSS Reset más popular, fue desarrollado por Eric Meyer´s</p>
@import url("reset.css")
domingo, 9 de diciembre de 12

13. <h1>Buenas Practicas</h1>
<h2>Mejores desarrollos</h2>
<p>Las buenas practicas nos ayudan a tener mejores desarrollos, mas
limpio y óptimos que nos hacen generar productos de calidad. Algunas
buenas practicas:</p>
<ul class=”CSSBuenasPracticas”>
<li>Acomodar los elementos en orden jerárquico y alfabético.</li>
<li>Utilizar comentarios y separadores.</li>
<li>Combinar elementos.</li>
<li>Uso de múltiples clases.</li>
<li>Al usar 0 no es necesario definir la unidad (px, em, %,…).</li>
<li>Utilizar em para tamaños de fuente.</li>
</ul>
domingo, 9 de diciembre de 12

14. <h1>Hojas de estilo externas</h1>
<h2>Insertando una hoja de estilos externa</h2>
<p>Para insertar una hoja de estilos externa en un documento HTML,
agregaremos la siguiente linea en el head del documento HTML.</p>
<link rel='stylesheet' href='ces/stylesheet.css' type='text/css' />
<link rel='stylesheet' href='css/stylesheetPrint.css' type='text/css'
media="print" />
<link rel='stylesheet' href='css/stylesheet.css' type='text/css'
media="only screen and (max-device-width: 480px)" />
domingo, 9 de diciembre de 12

15. <h1>Estilos</h1>
<h2>Fondos</h2>
<p>Los fondos son definidos por la etiqueta Background, las
propiedades que se pueden usar son:</p>
<ul class=”CSSFondos”>
<li>background-color</li>
<li>background-image</li>
<li>background-repeat</li>
<li>background-attachment</li>
<li>background-position</li>
</ul>
domingo, 9 de diciembre de 12

16. <h1>Estilos</h1>
<h2>Texto</h2>
<p>Se pueden aplicar diversos estilos, algunos de ellos con las siguiente
propiedades:</p>
<ul class=”CSSTexto”>
<li>color</li>
<li>direction</li>
<li>letter-spacing</li>
<li>line-height</li>
<li>text-align</li>
<li>text-decoration</li>
<li>text-indent</li>
<li>text-shadow</li>
<li>text-transform</li>
</ul>
domingo, 9 de diciembre de 12

17. <h1>Estilos</h1>
<h2>Listas</h2>
<p>Para aplicar estilos a las listas, se pueden utilizar las siguientes
etiquetas:</p>
<ul class=”CSSListas”>
<li>list-style</li>
<li>list-style-image</li>
<li>list-style-position</li>
<li>list-style-type</li>
</ul>
domingo, 9 de diciembre de 12

18. <h1>Estilos</h1>
<h2>Cajas</h2>
<p>Las cajas son los “contenedores de información” que mantienen
agrupado y agrupado el contenido de nuestro HTML, algunos estilos
que se pueden aplicar:</p>
<ul class=”CSSCajas”>
<li>margin</li>
<li>border</li>
<li>padding</li>
</ul>
domingo, 9 de diciembre de 12

19. Let´s play a game
domingo, 9 de diciembre de 12