Introduccion a css

  • 381 views
Uploaded on

fdgfdgfdffxgf

fdgfdgfdffxgf

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
381
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
18
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Diseño para la RedIntroducción a XHTML y CSSLic. en Diseño de Información Visual.Otoño 2009.Universidad de las Américas Puebla.Mtro. Omar Sosa Tzechttp://www.tzek-design.com/blog
  • 2. Como recordamos la idea de la quepartimos es la separación del contenidode la presentación.
  • 3. contenido presentación
  • 4. xhtml css
  • 5. CSS Zen Gardenhttp://www.csszengarden.com/
  • 6. Un recurso básico para aprender herramientas para diseño ydesarrollo web:http://www.w3schools.com/* Para CSS es altamente recomendable repasar o aclarar dudas en:http://www.w3schools.com/css/default.asp
  • 7. CSS Cheat Sheethttp://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
  • 8. Sintaxis de una regla de estilo.
  • 9. selector {propiedad: valor;}
  • 10. selector {propiedad_1: valor; propiedad_2: valor;propiedad_3: valor; propiedad_4: valor;}
  • 11. selector {propiedad_1: valor; propiedad_2: valor; propiedad_3: valor; propiedad_4: valor;}
  • 12. h1 {color: red;}
  • 13. #principal {background-color: blue;}
  • 14. .importante {font-weight: bold;}
  • 15. h1 {color: red;}#principal {background-color: blue;}.importante {font-weight: bold;} css
  • 16. h1 {color: red;}#principal {background-color: blue;}.importante {font-weight: bold;} css ? HTML
  • 17. ¿Cómo incrustamos “diseño” dentro dela página web?
  • 18. Cuando las reglas de estilo están en un archivoseparado del archivo con el XHTML. .html .css
  • 19. También se puede meter el CSS dentro delXHTML dentro de la etiqueta HEAD. Reglas CSS .html Por cuestiones de administración mejor separar las cosas en archivos diferentes.
  • 20. .swf .jpg .html .css .jsAdministración óptima.
  • 21. Reglas CSS.html
  • 22. <html> <head> <title>Título de una página web con ISO en occidental/europeo</title> <style> </style> </head> <body> . . . </body></html>
  • 23. <html> <head> <title>Título de una página web con ISO en occidental/europeo</title> <style> body { font: Arial; background-color: navy; } h1{ font-size:22px; color:white; } </style> </head> <body> <h1>Hola Mundo!!! </h1> </body></html>
  • 24. <html> <head> <title>Título de una página web con ISO en occidental/europeo</title> <style> body { font: Arial; background-color: navy; } h1{ font-size:22px; color:white; } </style> </head> <body> <h1>Hola Mundo!!! </h1> </body></html>
  • 25. <html> <head> <title>Título de una página web con ISO en occidental/europeo</title> <style> body { font: Arial; background-color: navy; } h1{ font-size:22px; color:white; } </style> </head> <body> <h1>Hola Mundo!!! </h1> </body></html>
  • 26. .html .css
  • 27. Original.<html> <head> <title>Título de una página web con ISO en occidental/europeo</title> <style> body { font: Arial; background-color: navy; } h1{ font-size:22px; color:white; } </style> </head> <body> <h1>Hola Mundo!!! </h1> </body></html>
  • 28. Quitamos las reglas de estilo del HEAD.<html> <head> <title>Título de una página web con ISO en occidental/europeo</title> </head> <body> <h1>Hola Mundo!!! </h1> </body></html>
  • 29. Este es el archivo .html<html> <head> <title>Título de una página web con ISO en occidental/europeo</title> </head> <body> <h1>Hola Mundo!!! </h1> </body></html>
  • 30. En otro archivo colocamos las reglas. body { font: Arial; background-color: navy; } h1{ font-size:22px; color:white; }
  • 31. Este es el archivo .css body { font: Arial; background-color: navy; } h1{ font-size:22px; color:white; }
  • 32. Quitamos las reglas de estilo del HEAD.<html> <head> <title>Título de una página web con ISO en occidental/europeo</title> <link rel="stylesheet" type="text/css" href="miestilo.css" /> </head> <body> <h1>Hola Mundo!!! </h1> </body></html>
  • 33. Mayor información sobre la etiqueta link:http://www.w3schools.com/TAGS/tag_link.asp
  • 34. No olvidar la organización ymanejo de archivos.
  • 35. carpeta index.html miestilo.css
  • 36. <html> <head> <title>Título de una página web con ISO en occidental/europeo</title> <link rel="stylesheet" type="text/css" href="miestilo.css" /> </head> <body> <h1>Hola Mundo!!! </h1> </body></html>
  • 37. carpeta01 index.html carpeta02 miestilo.css
  • 38. Quitamos las reglas de estilo del HEAD.<html> <head> <title>Título de una página web con ISO en occidental/europeo</title> <link rel="stylesheet" type="text/css" href="carpeta02/miestilo.css" /> </head> <body> <h1>Hola Mundo!!! </h1> </body></html>
  • 39. h1 {color: red;}#principal {background-color: blue;}.importante {font-weight: bold;} css
  • 40. En el CSS En el XHTMLh1 <h1></h1>#principal id=”principal”.importante class=”importante”
  • 41. Básico: el manejo de color en pantalla.(R, G, B) - 8 bits de profundidad (de 0 a 255).#RGB - 8 bits de profundidad (de 0 a FF).
  • 42. (0,0,0) = #000000 = #000(255,255, 255) = #ffffff = #fff(255, 0, 0) = #ff0000(197, 175, 228) = #cbade7
  • 43. Recurso básico para sacar esquemas de color:http://colorschemedesigner.com/
  • 44. Background. • background-color • background-image • background-repeat • background-position • background-position
  • 45. M
  • 46. Font. • font-family • font-style • font-size • font-variant • font-weight