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 Pu...
Como recordamos la idea de la quepartimos es la separación del contenidode la presentación.
contenido   presentación
xhtml   css
CSS Zen Gardenhttp://www.csszengarden.com/
Un recurso básico para aprender herramientas para diseño ydesarrollo web:http://www.w3schools.com/* Para CSS es altamente ...
CSS Cheat Sheethttp://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
Sintaxis de una regla de estilo.
selector {propiedad: valor;}
selector {propiedad_1: valor; propiedad_2: valor;propiedad_3: valor; propiedad_4: valor;}
selector {propiedad_1: valor;          propiedad_2: valor;          propiedad_3: valor;          propiedad_4: valor;}
h1 {color: red;}
#principal {background-color: blue;}
.importante {font-weight: bold;}
h1 {color: red;}#principal {background-color: blue;}.importante {font-weight: bold;}              css
h1 {color: red;}#principal {background-color: blue;}.importante {font-weight: bold;}              css        ?            ...
¿Cómo incrustamos “diseño” dentro dela página web?
Cuando las reglas de estilo están en un archivoseparado del archivo con el XHTML.              .html                      ...
También se puede meter el CSS dentro delXHTML dentro de la etiqueta HEAD.            Reglas             CSS             .h...
.swf                                .jpg             .html                       .css                                   .j...
Reglas CSS.html
<html>     <head>        <title>Título de una página web con ISO en occidental/europeo</title>     <style>     </style>   ...
<html>     <head>        <title>Título de una página web con ISO en occidental/europeo</title>     <style>             bod...
<html>     <head>        <title>Título de una página web con ISO en occidental/europeo</title>     <style>             bod...
<html>     <head>        <title>Título de una página web con ISO en occidental/europeo</title>     <style>             bod...
.html   .css
Original.<html>     <head>        <title>Título de una página web con ISO en occidental/europeo</title>     <style>       ...
Quitamos las reglas de estilo del HEAD.<html>     <head>        <title>Título de una página web con ISO en occidental/euro...
Este es el archivo .html<html>     <head>        <title>Título de una página web con ISO en occidental/europeo</title>    ...
En otro archivo colocamos las reglas.    body {             font: Arial;             background-color: navy;    }    h1{  ...
Este es el archivo .css    body {             font: Arial;             background-color: navy;    }    h1{             fon...
Quitamos las reglas de estilo del HEAD.<html>     <head>        <title>Título de una página web con ISO en occidental/euro...
Mayor información sobre la etiqueta link:http://www.w3schools.com/TAGS/tag_link.asp
No olvidar la organización ymanejo de archivos.
carpeta          index.html          miestilo.css
<html>     <head>        <title>Título de una página web con ISO en occidental/europeo</title>        <link rel="styleshee...
carpeta01               index.html            carpeta02                            miestilo.css
Quitamos las reglas de estilo del HEAD.<html>     <head>        <title>Título de una página web con ISO en occidental/euro...
h1 {color: red;}#principal {background-color: blue;}.importante {font-weight: bold;}              css
En el CSS     En el XHTMLh1            <h1></h1>#principal    id=”principal”.importante   class=”importante”
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...
(0,0,0) = #000000 = #000(255,255, 255) = #ffffff = #fff(255, 0, 0) = #ff0000(197, 175, 228) = #cbade7
Recurso básico para sacar esquemas de color:http://colorschemedesigner.com/
Background.  •   background-color  •   background-image  •   background-repeat  •   background-position  •   background-po...
M
Font.  •     font-family  •     font-style  •     font-size  •     font-variant  •     font-weight
Upcoming SlideShare
Loading in …5
×

Introduccion a css

522 views

Published on

fdgfdgfdffxgf

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
522
On SlideShare
0
From Embeds
0
Number of Embeds
74
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduccion a css

  1. 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. 2. Como recordamos la idea de la quepartimos es la separación del contenidode la presentación.
  3. 3. contenido presentación
  4. 4. xhtml css
  5. 5. CSS Zen Gardenhttp://www.csszengarden.com/
  6. 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. 7. CSS Cheat Sheethttp://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
  8. 8. Sintaxis de una regla de estilo.
  9. 9. selector {propiedad: valor;}
  10. 10. selector {propiedad_1: valor; propiedad_2: valor;propiedad_3: valor; propiedad_4: valor;}
  11. 11. selector {propiedad_1: valor; propiedad_2: valor; propiedad_3: valor; propiedad_4: valor;}
  12. 12. h1 {color: red;}
  13. 13. #principal {background-color: blue;}
  14. 14. .importante {font-weight: bold;}
  15. 15. h1 {color: red;}#principal {background-color: blue;}.importante {font-weight: bold;} css
  16. 16. h1 {color: red;}#principal {background-color: blue;}.importante {font-weight: bold;} css ? HTML
  17. 17. ¿Cómo incrustamos “diseño” dentro dela página web?
  18. 18. Cuando las reglas de estilo están en un archivoseparado del archivo con el XHTML. .html .css
  19. 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. 20. .swf .jpg .html .css .jsAdministración óptima.
  21. 21. Reglas CSS.html
  22. 22. <html> <head> <title>Título de una página web con ISO en occidental/europeo</title> <style> </style> </head> <body> . . . </body></html>
  23. 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. 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. 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. 26. .html .css
  27. 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. 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. 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. 30. En otro archivo colocamos las reglas. body { font: Arial; background-color: navy; } h1{ font-size:22px; color:white; }
  31. 31. Este es el archivo .css body { font: Arial; background-color: navy; } h1{ font-size:22px; color:white; }
  32. 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. 33. Mayor información sobre la etiqueta link:http://www.w3schools.com/TAGS/tag_link.asp
  34. 34. No olvidar la organización ymanejo de archivos.
  35. 35. carpeta index.html miestilo.css
  36. 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. 37. carpeta01 index.html carpeta02 miestilo.css
  38. 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. 39. h1 {color: red;}#principal {background-color: blue;}.importante {font-weight: bold;} css
  40. 40. En el CSS En el XHTMLh1 <h1></h1>#principal id=”principal”.importante class=”importante”
  41. 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. 42. (0,0,0) = #000000 = #000(255,255, 255) = #ffffff = #fff(255, 0, 0) = #ff0000(197, 175, 228) = #cbade7
  43. 43. Recurso básico para sacar esquemas de color:http://colorschemedesigner.com/
  44. 44. Background. • background-color • background-image • background-repeat • background-position • background-position
  45. 45. M
  46. 46. Font. • font-family • font-style • font-size • font-variant • font-weight

×