CSS, Introducción
Upcoming SlideShare
Loading in...5
×
 

CSS, Introducción

on

  • 515 views

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

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

Statistics

Views

Total Views
515
Views on SlideShare
515
Embed Views
0

Actions

Likes
0
Downloads
12
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS, Introducción CSS, Introducción Presentation Transcript

    • Curso de Desarrollo Webdomingo, 9 de diciembre de 12
    • Curso de Desarrollo Web Cascading Style Sheetsdomingo, 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
    • <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
    • <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
    • <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
    • <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
    • <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
    • <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
    • <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
    • <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
    • <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
    • <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
    • <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
    • <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
    • <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
    • Let´s play a gamedomingo, 9 de diciembre de 12