CSS, Introducción

Curso de Desarrollo Web

domingo, 9 de diciembre de 12

Curso de Desarrollo Web

Cascading Style Sheets


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


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


http://es.wikipedia.org/wiki/Idioma_ingl%C3%A9s

http://es.wikipedia.org/wiki/Idioma_ingl%C3%A9s

http://es.wikipedia.org/wiki/HTML

http://es.wikipedia.org/wiki/HTML

http://es.wikipedia.org/wiki/XML

http://es.wikipedia.org/wiki/XML


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


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


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


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



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



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


<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


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


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


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


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


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


http://w3schools.com/cssref/pr_text_text-decoration.asp

http://w3schools.com/cssref/pr_text_text-decoration.asp

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


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


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

CSS, Introducción

Technology

Transcript of CSS, Introducción