Qué Son Las Css

2,272 views

Published on

Presentación para LC3 e[ad] Agosto de 2007

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,272
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
80
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Qué Son Las Css

  1. 1. CSS Diseñando desde el código Por: Maximiliano Martin
  2. 2. CSS C ascading S tyle S heets Hojas de Estilo en Cascadas
  3. 3. Hojas de Estilo en Cascadas W3C Un mecanismo simple para agregar el estilo a los documentos del Web Wikipedia Lenguaje formal usado para definir la presentación de un documento estructurado, escrito en XHTML
  4. 4. Prehistoria :) Mark-up o Marcación Término de imprenta “ conjunto de instrucciones estilísticas detalladas escritas en un manuscrito que debe ser tipografiado” {
  5. 5. { GML Lenguaje de marcas Generalizado IBM (Años ’80) Estudio/ Pseudolenguaje/ no diseño/ ‘ 70 ‘ 80 IBM Describir documentos Charles F. Goldfab (Años ’70) IBM GML
  6. 6. SGML Lenguaje de Marcación Generalizado Standard ISO 88879 (1986) Dictado/estructurado/Tags/ independencia / complejo y caro/css/ { ‘ 70 ‘ 80 1986 IBM GML SGML
  7. 7. Exponencial/ navegadores/sucio CHSS/SSP/CSS { HTML 1.0 Lenguaje de Marcación Hipertextual Tim Berners-Lee (1990) ‘ 70 ‘ 80 1986 1990 IBM GML SGML HTML
  8. 8. CSS Nivel 1 Primera recomendación oficial W3C (1994) (finales del 1996) ‘ 70 ‘ 80 1986 Internet/ 2.1/ 1990 { 1996 1998 CSS Nivel 2 Segunda recomendación oficial W3C (Mayo de 1998) IBM GML SGML HTML CSS1 CSS2
  9. 9. ¿Qué es CSS? Un lenguaje para controlar la presentación La mejor forma de separar contenido de presentación Obliga a crear documentos HTML/XHTML bien definidos la base de la Web semántica Mejora la Accesibilidad del documento Minimiza el esfuerzo de manutención Permite la visualización en dispositivos diferentes
  10. 10. ¿Y cómo es una CSS? Un “simple” documento de texto plano con extensión “.css”
  11. 11. Internet/ Glosario básico { <ul><li>Regla CSS </li></ul>h1{ color: #F00;} <ul><li>Selector </li></ul><ul><li>Declaración </li></ul><ul><ul><ul><li>Propiedad </li></ul></ul></ul><ul><ul><ul><li>Valor </li></ul></ul></ul>
  12. 12. Internet/ Selectores básicos { <ul><li>Universal </li></ul>*{ … } p{ … } p span{ … } <ul><li>Tipo o Etiqueta </li></ul><ul><li>Descendente </li></ul>.especial{ … } <ul><li>Clase </li></ul>#especial{ … } <ul><li>ID </li></ul>
  13. 13. Internet/ Selectores básicos { p a{ color: #F00;} <ul><li>Descendente </li></ul>p * a{ color: #F00;}
  14. 14. Internet/ Propiedades principales { <ul><li>Font </li></ul><ul><li>Color/Background </li></ul><ul><li>Text </li></ul><ul><li>Table </li></ul><ul><li>Aural </li></ul><ul><li>Misellaneus </li></ul><ul><li>Interface </li></ul><ul><li>Box Model </li></ul><ul><li>Font-size </li></ul><ul><li>Font-Family </li></ul><ul><li>Font-Style </li></ul><ul><li>Font-variant </li></ul><ul><li>Font-weight </li></ul><ul><li>Font- stretch </li></ul><ul><li>Margin </li></ul><ul><li>Padding </li></ul><ul><li>Dimensions </li></ul><ul><li>Positioning </li></ul><ul><li>Display </li></ul><ul><li>Border </li></ul>
  15. 15. Internet/ <ul><li>Área visible </li></ul><ul><li>Width </li></ul><ul><li>Height </li></ul><ul><li>Border </li></ul><ul><li>Padding </li></ul><ul><li>Margin </li></ul>{ Modelo de Caja Área Visible Width Height Border Padding Margin
  16. 16. Internet/ Valores principales { <ul><li>px </li></ul><ul><li>em </li></ul><ul><li>ex </li></ul><ul><li>% </li></ul><ul><li>in </li></ul><ul><li>cm </li></ul><ul><li>RGB </li></ul>
  17. 17. Internet/ Medios { <ul><li>all </li></ul><ul><li>Screen </li></ul><ul><li>Print </li></ul><ul><li>Braile </li></ul><ul><li>Speech </li></ul><ul><li>tv </li></ul><ul><li>otros </li></ul>
  18. 18. Diseño Front y CSS? Diseño XHTML CSS
  19. 19. Internet/ HTML CSS 2.0 1990 1998 ¿Cómo funciona? <html> <head> <title>Ejemplo de estilos con CSS</title> <link rel=&quot;stylesheet&quot; href=“ estilo.css &quot; type=&quot;text/css&quot; /> </head> <body> <h1>Titular de la página</h1> <p>Un párrafo de texto no muy largo.</p> </body> </html> ejemplo.html h1 { color: #F00; font-family: Arial; font-size: large; } p { color: #000; font-family: Verdana; font-size: medium; } estilo.css
  20. 20. Internet/ Ejemplo {
  21. 21. Internet/ Recursos { <ul><li>CSS Zen Garden http://www.csszengarden.com/ </li></ul><ul><li>CSSLab </li></ul><ul><li>http://www.csslab.cl/ </li></ul><ul><li>CSS Play </li></ul><ul><li>http://www.cssplay.co.uk/ </li></ul><ul><li>W3School </li></ul><ul><li>http://www.w3schools.com/css/css_mediatypes.asp </li></ul><ul><li>Ovillo – Lista de distribución en castellano </li></ul><ul><li>http://www.ovillo.org </li></ul>
  22. 22. Internet/ Referencias { <ul><li>W3C – Documentos traducidos </li></ul><ul><li>http://www.w3.org/2005/11/Translations/Query?titleMatch=css&lang=es&search1=Submit </li></ul><ul><li>Ilovejackdaniels </li></ul><ul><li>http://www.ilovejackdaniels.com/css_cheat_sheet.png </li></ul><ul><li>Sidar </li></ul><ul><li>http://www.sidar.org/recur/desdi/mcss/index.php </li></ul><ul><li>LibrosWeb </li></ul><ul><li>http://www.librosweb.es/css/index.html </li></ul><ul><li>W3C – Guía de referencia </li></ul><ul><li>http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/ </li></ul>
  23. 23. Gracias :) Por: Maximiliano Martin

×