Introduccion a css
- 1. Diseño para la Red Introducción a XHTML y CSS Lic. en Diseño de Información Visual. Otoño 2009. Universidad de las Américas Puebla. Mtro. Omar Sosa Tzec http://www.tzek-design.com/blog
- 2. Como recordamos la idea de la que partimos es la separación del contenido de la presentación.
- 3. contenido presentación
- 4. xhtml css
- 6. Un recurso básico para aprender herramientas para diseño y desarrollo web: http://www.w3schools.com/ * Para CSS es altamente recomendable repasar o aclarar dudas en: http://www.w3schools.com/css/default.asp
- 8. Sintaxis de una regla de estilo.
- 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;}
- 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 de la página web?
- 18. Cuando las reglas de estilo están en un archivo separado del archivo con el XHTML. .html .css
- 19. También se puede meter el CSS dentro del XHTML 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 .js Administració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 y manejo 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 XHTML h1 <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