introducción a css en xhtml
TRANSCRIPT
![Page 1: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/1.jpg)
Diseño para la RedIntroducció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 Tzechttp://www.tzek-design.com/blog
![Page 2: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/2.jpg)
Como recordamos la idea de la que partimos es la separación del contenido de la presentación.
![Page 3: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/3.jpg)
contenido presentación
![Page 4: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/4.jpg)
xhtml css
![Page 6: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/6.jpg)
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
![Page 7: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/7.jpg)
CSS Cheat Sheethttp://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
![Page 8: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/8.jpg)
Sintaxis de una regla de estilo.
![Page 9: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/9.jpg)
selector {propiedad: valor;}
![Page 10: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/10.jpg)
selector {propiedad_1: valor; propiedad_2: valor; propiedad_3: valor; propiedad_4: valor;}
![Page 11: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/11.jpg)
selector {propiedad_1: valor; propiedad_2: valor; propiedad_3: valor; propiedad_4: valor;}
![Page 12: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/12.jpg)
h1 {color: red;}
![Page 13: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/13.jpg)
#principal {background-color: blue;}
![Page 14: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/14.jpg)
.importante {font-weight: bold;}
![Page 15: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/15.jpg)
.importante {font-weight: bold;}
#principal {background-color: blue;}
h1 {color: red;}
css
![Page 16: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/16.jpg)
.importante {font-weight: bold;}
#principal {background-color: blue;}
h1 {color: red;}
css HTML?
![Page 17: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/17.jpg)
¿Cómo incrustamos “diseño” dentro de la página web?
![Page 18: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/18.jpg)
.html .css
Cuando las reglas de estilo están en un archivo separado del archivo con el XHTML.
![Page 19: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/19.jpg)
.html
ReglasCSS
También se puede meter el CSS dentro del XHTML dentro de la etiqueta HEAD.
Por cuestiones de administración mejor separar las cosas en archivos diferentes.
![Page 20: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/20.jpg)
.html .css
.jpg
.js
.swf
Administración óptima.
![Page 21: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/21.jpg)
.html
ReglasCSS
![Page 22: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/22.jpg)
<html><head>
<title>Título de una página web con ISO en occidental/europeo</title><style> </style></head>
<body>...
</body></html>
![Page 23: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/23.jpg)
<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>
![Page 24: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/24.jpg)
<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>
![Page 25: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/25.jpg)
<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>
![Page 26: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/26.jpg)
.html .css
![Page 27: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/27.jpg)
<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>
Original.
![Page 28: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/28.jpg)
<html><head>
<title>Título de una página web con ISO en occidental/europeo</title></head>
<body><h1>Hola Mundo!!! </h1>
</body></html>
Quitamos las reglas de estilo del HEAD.
![Page 29: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/29.jpg)
<html><head>
<title>Título de una página web con ISO en occidental/europeo</title></head>
<body><h1>Hola Mundo!!! </h1>
</body></html>
Este es el archivo .html
![Page 30: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/30.jpg)
body { font: Arial;
background-color: navy;}
h1{ font-size:22px; color:white;}
En otro archivo colocamos las reglas.
![Page 31: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/31.jpg)
body { font: Arial;
background-color: navy;}
h1{ font-size:22px; color:white;}
Este es el archivo .css
![Page 32: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/32.jpg)
<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>
Quitamos las reglas de estilo del HEAD.
![Page 33: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/33.jpg)
Mayor información sobre la etiqueta link:
http://www.w3schools.com/TAGS/tag_link.asp
![Page 34: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/34.jpg)
No olvidar la organización y manejo de archivos.
![Page 35: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/35.jpg)
carpeta
index.html
miestilo.css
![Page 36: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/36.jpg)
<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>
![Page 37: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/37.jpg)
carpeta01
index.html
miestilo.css
carpeta02
![Page 38: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/38.jpg)
<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>
Quitamos las reglas de estilo del HEAD.
![Page 39: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/39.jpg)
.importante {font-weight: bold;}
#principal {background-color: blue;}
h1 {color: red;}
css
![Page 40: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/40.jpg)
.importante
#principal
h1
En el CSS En el XHTML
class=”importante”
id=”principal”
<h1></h1>
![Page 41: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/41.jpg)
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).
![Page 42: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/42.jpg)
(0,0,0) = #000000 = #000
(255,255, 255) = #ffffff = #fff
(255, 0, 0) = #ff0000
(197, 175, 228) = #cbade7
![Page 43: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/43.jpg)
Recurso básico para sacar esquemas de color:
http://colorschemedesigner.com/
![Page 44: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/44.jpg)
Background.
• background-color • background-image • background-repeat • background-position • background-position
![Page 45: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/45.jpg)
M
![Page 46: Introducción a CSS en XHTML](https://reader030.vdocuments.site/reader030/viewer/2022020106/55a4f5671a28ab1f188b47dc/html5/thumbnails/46.jpg)
Font.
• font-family • font-style • font-size • font-variant • font-weight