Curso de Desarrollo Web

domingo, 9 de diciembre de 12

Curso de Desarrollo Web

Cascading Style Sheets

domingo, 9 de diciembre de 12

<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

<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

<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

<h2>Sintaxis</h2>

<h1>Introducción</h1>

<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

<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

<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}

<h1>ID, CLASS y Elementos</h1>

domingo, 9 de diciembre de 12

<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}

<h1>ID, CLASS y Elementos</h1>

domingo, 9 de diciembre de 12

<h2>Resumen</h2>

<h1>ID, CLASS y Elementos</h1>

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

<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><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>

<h1>Aplicando Estilos</h1>

NO

domingo, 9 de diciembre de 12

<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")

<h1>CSS Reset</h1>

domingo, 9 de diciembre de 12

<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>

<h1>Buenas Practicas</h1>

domingo, 9 de diciembre de 12

<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)" />

<h1>Hojas de estilo externas</h1>

domingo, 9 de diciembre de 12

<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>

<h1>Estilos</h1>

domingo, 9 de diciembre de 12

<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>

<h1>Estilos</h1>

domingo, 9 de diciembre de 12

<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>

<h1>Estilos</h1>

domingo, 9 de diciembre de 12

<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>

<h1>Estilos</h1>

domingo, 9 de diciembre de 12

Let´s play a gamedomingo, 9 de diciembre de 12