Post on 14-Jul-2015
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
Como recordamos la idea de la que partimos es la separación del contenido de la presentación.
contenido presentación
xhtml css
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
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;}
.importante {font-weight: bold;}
#principal {background-color: blue;}
h1 {color: red;}
css
.importante {font-weight: bold;}
#principal {background-color: blue;}
h1 {color: red;}
css HTML?
¿Cómo incrustamos “diseño” dentro de la página web?
.html .css
Cuando las reglas de estilo están en un archivo separado del archivo con el XHTML.
.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.
.html .css
.jpg
.js
.swf
Administración óptima.
.html
ReglasCSS
<html><head>
<title>Título de una página web con ISO en occidental/europeo</title><style> </style></head>
<body>...
</body></html>
<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>
<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>
<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>
.html .css
<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.
<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.
<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
body { font: Arial;
background-color: navy;}
h1{ font-size:22px; color:white;}
En otro archivo colocamos las reglas.
body { font: Arial;
background-color: navy;}
h1{ font-size:22px; color:white;}
Este es el archivo .css
<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.
Mayor información sobre la etiqueta link:
http://www.w3schools.com/TAGS/tag_link.asp
No olvidar la organización y manejo 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="stylesheet" type="text/css" href="miestilo.css" />
</head>
<body><h1>Hola Mundo!!! </h1>
</body></html>
carpeta01
index.html
miestilo.css
carpeta02
<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.
.importante {font-weight: bold;}
#principal {background-color: blue;}
h1 {color: red;}
css
.importante
#principal
h1
En el CSS En el XHTML
class=”importante”
id=”principal”
<h1></h1>
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).
(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-position
M
Font.
• font-family • font-style • font-size • font-variant • font-weight