introduccion a css
DESCRIPTION
fdgfdgfdffxgfTRANSCRIPT
![Page 1: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/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: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/2.jpg)
Como recordamos la idea de la que partimos es la separación del contenido de la presentación.
![Page 3: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/3.jpg)
contenido presentación
![Page 4: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/4.jpg)
xhtml css
![Page 6: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/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: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/7.jpg)
CSS Cheat Sheethttp://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
![Page 8: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/8.jpg)
Sintaxis de una regla de estilo.
![Page 9: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/9.jpg)
selector {propiedad: valor;}
![Page 10: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/10.jpg)
selector {propiedad_1: valor; propiedad_2: valor; propiedad_3: valor; propiedad_4: valor;}
![Page 11: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/11.jpg)
selector {propiedad_1: valor; propiedad_2: valor; propiedad_3: valor; propiedad_4: valor;}
![Page 12: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/12.jpg)
h1 {color: red;}
![Page 13: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/13.jpg)
#principal {background-color: blue;}
![Page 14: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/14.jpg)
.importante {font-weight: bold;}
![Page 15: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/15.jpg)
.importante {font-weight: bold;}
#principal {background-color: blue;}
h1 {color: red;}
css
![Page 16: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/16.jpg)
.importante {font-weight: bold;}
#principal {background-color: blue;}
h1 {color: red;}
css HTML?
![Page 17: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/17.jpg)
¿Cómo incrustamos “diseño” dentro de la página web?
![Page 18: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/18.jpg)
.html .css
Cuando las reglas de estilo están en un archivo separado del archivo con el XHTML.
![Page 19: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/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: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/20.jpg)
.html .css
.jpg
.js
.swf
Administración óptima.
![Page 21: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/21.jpg)
.html
ReglasCSS
![Page 22: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/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: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/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: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/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: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/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: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/26.jpg)
.html .css
![Page 27: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/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: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/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: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/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: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/30.jpg)
body { font: Arial;
background-color: navy;}
h1{ font-size:22px; color:white;}
En otro archivo colocamos las reglas.
![Page 31: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/31.jpg)
body { font: Arial;
background-color: navy;}
h1{ font-size:22px; color:white;}
Este es el archivo .css
![Page 32: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/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: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/33.jpg)
Mayor información sobre la etiqueta link:
http://www.w3schools.com/TAGS/tag_link.asp
![Page 34: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/34.jpg)
No olvidar la organización y manejo de archivos.
![Page 35: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/35.jpg)
carpeta
index.html
miestilo.css
![Page 36: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/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: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/37.jpg)
carpeta01
index.html
miestilo.css
carpeta02
![Page 38: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/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: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/39.jpg)
.importante {font-weight: bold;}
#principal {background-color: blue;}
h1 {color: red;}
css
![Page 40: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/40.jpg)
.importante
#principal
h1
En el CSS En el XHTML
class=”importante”
id=”principal”
<h1></h1>
![Page 41: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/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: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/42.jpg)
(0,0,0) = #000000 = #000
(255,255, 255) = #ffffff = #fff
(255, 0, 0) = #ff0000
(197, 175, 228) = #cbade7
![Page 43: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/43.jpg)
Recurso básico para sacar esquemas de color:
http://colorschemedesigner.com/
![Page 44: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/44.jpg)
Background.
• background-color • background-image • background-repeat • background-position • background-position
![Page 45: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/45.jpg)
M
![Page 46: Introduccion a css](https://reader033.vdocuments.co/reader033/viewer/2022051816/54574b9faf795997098bbe15/html5/thumbnails/46.jpg)
Font.
• font-family • font-style • font-size • font-variant • font-weight