css separando forma de contenido prof. leonel del carpio 1

Prof. Leonel Del Carpio 1

CSS SEPARANDO FORMA DE CONTENIDO

Prof. Leonel Del Carpio


Cascading Style Sheet (Hojas de Estilo en Cascada)

• Proceso que permite aplicar estilos fácilmente y obtener un diseño uniforme.

• Es un lenguaje de programación web, usado para personalizar páginas web y mantener el mismo estilo en múltiples páginas.

• Separan el diseño del contenido y así logran mayor independencia a la hora de cambiar o renovar un diseño web.


• Un archivo que contiene estilos CSS tiene extensión

.css, por ej. “minag.css”. • Los estilos CSS se colocan en un archivo aparte, aunque se pueden poner en el mismo archivo html.• Esto no es recomendable ya

que aumentan el tamaño de la pagina web y hacen mas pesada su carga. Adjuntar hoja de estilos

Nueva regla CSS

Desvincular hoja de estilos CSS


1. Selectores de Etiqueta (html)

Cualquier etiqueta HTML es un selector, por ej: p {

font: 13px bold Arial;

}

Hace que todos los párrafos (la etiqueta p) tengan fuente 13 px, negrita y Arial.


2. Selectores de Clase

• Selector que afectará sólo a aquellas etiquetas que decidamos, por ejemplo: .rojo {color: red;} crea una clase que hace que el color de la letra sea rojo. La clase tiene un punto delante.

<p class="rojo">Este es un texto en rojo</p>

<div class="rojo"> bloque con texto rojo</div>• Los selectores de clase se escriben con caracteres alfa-

numéricos y sin espacios.


1

2

4

3


• Dos estilos aplicados a una etiqueta html: p, usando CSS• En la línea 2, se a agregado 9 px de padding.

Haz clic so

bre la im

agen

para ir al ejem

plo

1


<html >

<head>

<title>Documento sin título</title>

<style type="text/css">

p {

font-family: Verdana, sans-serif;

font-size: 60px;

}

.red {

font-size: 60px;

color: rgb(255,0,0);

}

.verde {

color: rgb(0,102,0);

font-weight: bold;

background-color: rgb(153,255,0);

}

.verde2 {color: rgb(0,102,0);font-weight: bold;background-color: rgb(153,255,0);padding: 9px;}</style></head><body><p class="red">este texto es de <span class="verde">color</span> rojo</p><p class="red">este texto es de <span class="verde2">color</span> rojo</p><h1 >ahora les toca a ustedes...</h1></body></html>


3. Selectores de Identidad• Los selectores de identidad sólo se aplican una vez y se

asocian a una etiqueta.

#contenedor {

background-color: green;

height: 400px;

width: 500px;

border: 1px solid gray;

margin: 10px;

margin-left: auto;

margin-right: auto;

padding: 10px;

}

En el código html encontramos:<div id="contenedor"> bloque con texto</div>

Se establece la regla CSS asociándola al atributo ID. Este atributo (id) recoge el nombre del elemento que se ha creado en la hoja de estilos.


• En el bloque o division DIV creado aparece un texto marcador de posición.

• Los valores margin-left: auto; y margin-right:auto; centran el bloque

Haz clic so

bre la im

agen

para ir al ejem

plo

2


Combinación de selectores• 3 tipos de selectores y diversas formas de combinarlos. • Agrupación: Los selectores se agrupan separados por

comas:

p { background-color: #000033; }

.azul_oscuro { bgcolor : #000033; }

#cabecera { bgcolor: #000033; }Puede escribirse como:

p, .azul_oscuro, #cabecera { bgcolor: #000033; }


• Descendencia: Podemos hacer que un estilo sólo se aplique sobre un elemento que esté dentro de otro. Por ejemplo:

h1 {

color: #0000FF;

font-weight: bold;

}

b {

color: #0000FF;

} • Esto hará que los encabezados H1 sean de color azul y en negrita, y los textos en negrita azules.


• ¿qué pasa si queremos resaltar texto en los encabezados? ¿no podremos utilizar la negrita?

• <h1>Título: El uso de la <b>Negrita</b></h1>• En este caso hacemos uso de la descendencia: h1 b {color: red; }

• Ahora los textos marcados con la etiqueta B en los encabezados H1 serán de color rojo. • Al escribir dos selectores seguidos obligamos a que el segundo

este dentro del anterior. Puedes utilizar todas las anidaciones que quieras y mezclar los selectores, por ejemplo:

#contenedor p .derecha { float: right; }• En este caso todas las etiquetas con la clase derecha que se

encuentren dentro de un párrafo del elemento definido como contenedor flotarán a la derecha.


• En la imagen se ve la vista dividir: Izq. el código CSS• A la der la vista previa. La etiqueta h1 a sido modificada y

la etiqueta b cuando esta anidada en h1 es de color rojo


• Un atributo es parte de un selector HTML. Por ej, en:

<a href="http://www.elpais.com" target="_blank">Enlace</a>

a es el selector, href y target son atributos.• CSS accede a los atributos contenidos en las etiquetas para cambiar estilos:


Nombre de Atributo: • Establecer estilos para etiquetas con atributos

definidos, por ej: a[href] { font-family: Arial, Helvetica; }

• Establece que la etiqueta a que tenga el atributo href cambie tipo de letra a Arial o Helvética.

Valor de Atributo: • Aplica estilos a etiquetas que tengan valor en un

atributo, por ej: a[target="_blank"] { font-weight: bold; }

• Hará que se convierta en negrita cualquier enlace que abra una nueva ventana al hacer clic.


Sintaxis CSS

• Un archivo CSS tiene una estructura definida,

selector {

propiedad:valor;

} • Se llama regla CSS. • La sintaxis: se escribe el nombre del selector (la etiqueta html, clase o identidad) seguido de una llave “{” y luego las propiedades a aplicar,al final cerramos con una llave “}”.


• Por ej. si quieres cambiar el tamaño de fuente de una página web, aplica el estilo a la etiqueta <body>:

body{

font-size:16px;

}

• Al final de cada atributo va un “;”.


• Para aplicar estilos a un bloque o div, antes del

nombre se inserta un “#”.• imagina que creas un bloque (capa o div) llamado “cabecera” y quieres asignarle 780px de ancho, así:

#cabecera{

width:780px;

}


Etiqueta DIV

• Una etiqueta div define las divisiones lógicas de una página Web.

• Se utilizan etiquetas div para centrar bloques de contenido, crear efectos de columna y crear diferentes áreas de color, entre otras posibilidades.

• Puede utilizar etiquetas div para crear bloques de diseño CSS e insertarlas en el documento. Esto resulta útil si ha adjuntado al documento una hoja de estilos CSS con estilos de posición.


Procedimiento para insertar DIV

• Sitúe el punto de inserción.• Siga uno de estos procedimientos:

• Seleccione Insertar > Objetos de diseño > Etiqueta Div.• En la categoría Diseño del panel Insertar, clic en el botón

Insertar etiqueta Div.

• Defina cualquiera de las opciones siguientes: • Insertar selecciona la ubicación de la etiqueta div y el

nombre de la etiqueta si no es una etiqueta nueva.• Clase Muestra el estilo de la clase aplicado actualmente.


• ID modifica el nombre de la etiqueta div. No aparecen en la lista los ID de bloques que ya están en el documento.• Nota: DW avisa si introduce el mismo ID de otra etiqueta.

• Nueva regla CSS Abre el cd Nueva regla CSS.

• Haz clic en Aceptar.• La etiqueta div aparece como cuadro con texto. Al desplazar el puntero sobre el borde, DW lo resaltará.

• Si la etiqueta div se sitúa con una posición absoluta, se convierte en un elemento PA. • (Puede editar las etiquetas div que no tengan una posición

absoluta.)


Atributos y propiedades CSS Haz clic so

bre la im

agen

para ir a la p

agin

a web

http://www.csszengarden.com/?cssfile=204/204.css

http://www.csszengarden.com/?cssfile=/210/210.css&page=0

http://www.csszengarden.com/?cssfile=/213/213.css&page=0




Modificar fuentes• font-family: cambia el tipo, ej:

• font-family: verdana,sans-serif;

• font-size: cambia el tamaño, ej: font-size: 15px;

• color: cambia el color, mediante una palabra (red, green, etc), formato RGB (255, 255, 255) o valor hexadecimal (#F4F4F4)), ej: color: #fff;

• font-style: cambia el estilo entre normal, oblique, italic: font-style: italic;


Modificar texto y párrafos

• text-align: modifica la alineación del texto: left, center, right, justify, ej:

text-align: left;• text-decoration: texto subrayado o tachado, escribe: text-decoration: seguido de alguna de estas palabras: underline, overline, line-through y si no queremos nada escribimos none, ej:

text-decoration: none;


Modificar el fondo

• background-image: una imagen de fondo, así: background-image: url(/imagenes/fond.jpg);

• si queremos que la imagen se repita usamos otro atributo llamado “repite-x” o “repite-y”.

• Background: color de fondo, de esta manera:

background: #000000;


Modificar un bloque o capa• margin: especifica un margen en px o em. Mas

especifico: margin-left (izquierdo), margin-right (derecho), margin-top (superior), margin-bottom (inferior).

• padding: especifica un espacio de relleno, padding-left (izquierdo), padding-right (derecho), padding-top (superior), padding-bottom (inferior).

• border: aplica un borde al bloque: border: 1px solid #000000; primero especifica el borde, luego el tipo (solid, double, etc) y finalmente el color.


h1 {

background: yellow;

}

h2 {

background: orange;

}


h1 {

background: yellow;

padding: 20px 20px 20px 80px;

}

h2 {

background: orange;

padding-left:120px;

}


Bordes

• Los bordes se pueden usar como elemento decorativo o para subrayar la separación entre dos cosas.

• CSS te ofrece muchas opciones para usar bordes en tus páginas:

• border-width• border-color• border-style

http://es.html.net/tutorials/css/lesson11.php#s1





Color del borde [border-color]

• La propiedad border-color define el color del borde.

• Los valores de esta propiedad son los valores de color normales, por ejemplo, "#ffffcc" (hexadecimal), "rgb(120,100,123)" (RGB) o "yellow" (nombre del color).


• Anchura del borde [border-width]• La anchura del borde se define por medio de la propiedad border-width, que dispone de los valores thin, medium y thick, o de un valor numérico indicado en píxeles. La siguiente imagen ilustra cómo funciona el sistema:


Estilo de borde [border-style]

• Diferentes estilos de borde. Todos los ejemplos se muestran con el valor del color a "oro" y el valor de la anchura a "thick",.

• Si no queremos mostrar ningún borde, se puede usar los valores none o hidden.


• P.ej. definimos en un documento diferentes bordes para los elementos <h1>, <h2>, <ul> y <p>. El resultado no es bonito, pero ilustra:


h1 {

border-width:thick; border-style:dotted; border-color:gold;

}

h2 {

border-width:20px; border-style:outset; border-color:red;

}

p {

border-width:1px; border-style:dashed; border-color:blue;

}

ul {

border-width:thin; border-style:solid; border-color:orange;

}


h1 {

border-top-width: thick;

border-top-style: solid;

border-top-color: red;

border-bottom-width: thick;

border-bottom-style: solid;

border-bottom-color: blue;

border-right-width: thick;

border-right-style: solid;

border-right-color: green;

border-left-width: thick;

border-left-style: solid;

border-left-color: orange;

}


Usando la propiedad border se pueden combinar otras propiedades en una sola. por ejemplo:

p {

border-width: 1px;

border-style: solid;

border-color: blue;

}

La declaración anterior se puede combinar así:

p {

border: 1px solid blue;

}


Altura y anchura width y height• Estableciendo la propiedad width• width define la anchura de un elemento.

• El ejemplo proporciona una caja en la que se introduce texto:

div.box {width: 200px;

border: 1px solid black;

background: orange;

}




• La propiedad height• La altura de la caja queda establecida por el contenido de la misma. Se puede influir en la altura de un elemento con la propiedad height. Por ej, fijamos la altura de la caja en 500px:

div.box {

height: 500px;

width: 200px;

border: 1px solid black;

background: orange;

}


Elementos flotantes (propiedad float)

• Los elementos flotan a la derecha o a la izquierda usando la propiedad float.

• La caja con su contenido flota bien a la derecha o la izquierda de un documento (o de la caja contenedora). ASI:


Modificar un bloque o capa

• float: con este atributo “flotamos” el bloque, podemos elegir right, none, left, así: float: left;

• clear: modificamos la alineación de los elementos que están a los lados, podemos elegir entre: both, none, right, left. así: clear: both;


• Por ejemplo, si quisiéramos texto con ajuste de línea alrededor de una imagen, el resultado sería el siguiente:


• El código HTML del ejemplo anterior es:

<div id="picture">

<img src="bill.jpg" alt="Bill Gates">

</div>

<p>causas naturales et anteceden, nostrarum...</p> • Para conseguir que la imagen flote a la izquierda y el

texto se ajuste a su alrededor, hay que definir el ancho de la caja que rodea la imagen y fijar la propiedad float con el valor left:

#picture {

float:left;

width: 100px;

}


Columnas• La propiedad float se usa para crear columnas. Para crear dichas columnas estructúralas en el código HTML con la etiqueta <div>:

• <div id="columna1"> <p>Haec disserens qua de re agatur et in quo causa consistat...</p> </div>

• <div id="columna2"> <p>causas naturales et antecedentes, idciro etiam nostrarum...</p>

• </div> <div id="columna3"> <p>nam nihil esset in nostra potestate si res ita...</p> </div>


• Ancho de columna se fija en un porcentaje equivalente a 33%, y luego se flota cada columna a la izquierda con float:

#columna1 {

float:left;

width: 33%;

padding-right: 2px;

}

#columna2 {

float:left;

width: 33%;

}

#columna3 {

float:left;

width: 33%;

padding-left: 2px;

}


La propiedad clear• La propiedad clear controla cómo se comportan los

elementos que siguen a los elementos flotados de un documento.

• Por defecto, los elementos siguientes se mueven hacia arriba para rellenar el espacio disponible que quedará libre al flotar una caja hacia un lado.

• La propiedad clear puede tomar los valores: left, right, both o none. El principio consiste en que, si clear, por ejemplo, se fija en both para una caja, el borde del margen superior de esta caja siempre estará debajo del borde del margen inferior para las posibles cajas flotantes que vengan de arriba.


Asociar estilos CSS con pagina web• Se hace con la etiqueta <link> donde indicamos la

dirección del archivo, para hacerlo ponemos esa etiqueta en la cabecera <head>, así:

<link href="estilos.css" rel="stylesheet" type="text/css">

si la ubicación de nuestra hoja de estilos es otra, por ejemplo, se encuentra en “/css/estilos.css” solo lo cambiamos en el atributo href.


<div id="picture">

<img src="bill.jpg" alt="Bill Gates"> </div>

<h1>Bill Gates</h1>

<p class="floatstop"> causas naturales et antecedentes, idciro etiam...</p>

• Para evitar que el texto flote hacia arriba junto a la imagen, podemos añadir lo siguiente al código CSS:

#picture {

float:left; width: 100px; }

.floatstop {

clear:both;

}


Maquetando web css

• Usaremos estilos CSS y separamos el diseño del contenido para rediseñar nuestra pagina web las veces que sea necesario sin modificar todas las paginas de nuestro sitio.

http://www.comocrearunsitioweb.com/curso-de-estilos-css

http://www.comocrearunsitioweb.com/curso-de-estilos-css


Posicionamiento de elementos• la ventana del navegador como sistema de coordenadas:


• Digamos que queremos posicionar un título.• Para posicionar el titulo a 100 px del borde superior y a

200px del borde izquierdo del documento, tendríamos que escribir el siguiente código CSS:

h1 {

position:absolute;

top: 100px;

left: 200px;

}


Posicionamiento absoluto• Propiedad position se establece como absolute. Puedes usar

las propiedades left, right, top, y bottom para colocar la caja.

• Posicionamiento absoluto, coloca 4 cajas en cada esquina del:

#box1 {

position:absolute;

top: 50px; left: 50px;

}

#box2 {

position:absolute;

top: 50px; right: 50px;

}

#box3 { position:absolute; bottom: 50px; right: 50px; } #box4 { position:absolute; bottom: 50px; left: 50px; }


Posicionamiento relativo• La propiedad position se establece como relative. La

diferencia entre posicionamiento absoluto y relativo consiste en cómo se calcula la posición.

• La posición para un elemento que se posiciona de forma relativa se calcula desde la posición original en el documento. Esto significa que se mueve el elemento hacia la derecha, la izquierda, arriba o abajo. De este modo, el elemento sigue ocupando espacio en el documento después de haberse posicionado.


Posicionamiento relativo• Como ejemplo de posicionamiento relativo, posiciona tres imágenes de

forma relativa respecto a su posición original en la página. Fíjate cómo las imágenes dejan espacios vacíos en sus posiciones originales en el documento:

#dog1 {

position:relative;

left: 350px;

bottom: 150px;

}

#dog2 {

position:relative;

left: 150px;

bottom: 500px;

}

#dog3 { position:relative; left: 50px; bottom: 700px; }


I Diagramando el diseño

• El primer paso es diagramar la estructura, el esqueleto de la pagina por así decirlo:

• Encabezado (donde irá el logo)• Barra lateral (acá pondremos los enlaces)• Contenido (texto, imágenes, videos, etc)• Pie de página (créditos, copyrigth)• Definida la idea de la estructura comenzamos

a escribir nuestro código.


Primero: crear la hoja de estilos CSS

• Lo primero es crear la hoja de estilos “minag.css” y guardarla en el carpeta principal de nuestra página web.

• definimos el color, tamaño y tipo de fuente que usará nuestra página web:

body{

color: black;

font-size: 12px;

font-family: verdana, sans-serif;

}


• ingresamos el código para estructurar los bloques.• creamos el bloque contenedor y asignamos el

ancho, los márgenes y demás atributos de la página web:

#contenedor {

width: 760px;

border: 1px solid gray;

margin: 10px;

margin-left: auto;

margin-right: auto;

padding: 10px;

}


• y ahora si comenzamos a crear los bloques de nuestro diagrama, primero el encabezado:

#encabezado {

padding: 5px;

margin-bottom: ;


}


• Es el turno del bloque que contendrá lo mas importante, el contenido:

#contenido {

padding: 5px;

margin-left: ;

background-color: gray;

}


• Lo que sigue es crear la barra lateral:

#barra{

float: left;

width: ;

margin: 0;

margin-right: ;

padding: 5px;

background-color: rgb(235, 235, 235);

}


• y por último el pie de página:

#pie{

clear: both;

padding: 5px;

margin-top: ;

background-color: rgb(213, 219, 225);

}• Con esto tenemos los bloques creados, ahora

viene lo más importante, la maquetación.


Maquetando los bloques CSS

• Ya tenemos nuestra hoja de estilos creada, ahora debemos vincularla al código HTML, para eso insertamos la etiqueta <link> dentro de la sección <head></head> indicando la ubicación del archivo css:

•<link href="estilos.css" rel="stylesheet" type="text/css">

• Para ello vamos a la carpeta raiz del sitio, creamos un archivo html: minag.html y desde el panel estilos css

adjuntamos la hoja de estilos minag.css


• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• <html xmlns="http://www.w3.org/1999/xhtml">• <head>• <meta http-equiv="Content-Type" content="text/html;

charset=utf-8" />• <title>maquetando con estilos css</title>• <link href="CSS/minag.css" rel="stylesheet" type="text/css"/>• </head>• <body>• </body>• </html>


El orden en que llamamos los bloques es importante para que quede como queremos:

<html>

<head>

<title>Maquetando con estilos CSS</title>

<link href=“CSS/minag.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="contenedor">

<div id="encabezado">ENCABEZADO</div>

<div id="barra">BARRA LATERAL</div>

<div id="contenido">CONTENIDO</div>

<div id="pie">PIE DE PÁGINA</div>

</div>

</body>

</html>


II Creando un pagina con DIV(capas)• La forma de crear una capa DIV es menu insertar/ objetos de diseño/ etiqueta div:

<div></div>recuerda que todo contenido visible de la página va entre las etiquetas <body></body>

con el código HTML completo quedaría así:

<html><head>

<title>maquetacion CSS 2</title></head><body>

<div>mi primera capa </div></body></html>


• En el cuadro de texto ID escribe el nombre de la capa


Dar formato a un DIV

• Esto se hace con estilos CSS.

Formato/estilos css/nuevo• Para darle formato a un DIV tenemos que identificarlo, para esto existe el atributo ID, en el pondremos el nombre del DIV para luego llamarlo desde la hoja de estilos, la forma de escribirlo es así:

<div id="capa1">mi primera capa</div>


• Formato/ Estilos CSS/Nuevo


• Como vemos, a esta capa le pusimos "capa1" de nombre, ahora solo nos falta abrir la hoja de estilos que creamos y llamarlo de esta manera:

#capa1{ background-color:green;}

• esto hará que el color de fondo de esa capa sea verde, en la siguiente imagen se puede apreciar:


• El color se estira, porque no le definimos un ancho determinado, para hacer agregaremos el atributo width a #capa1 de la siguiente forma:

#capa1{width:210px;background-color:green;

}• Ahora el fondo verde en un área mas corta, pero ¿que

pasa si queremos que la capa sea mas alta?

Simple, le agregamos el atributo height con el valor en pixeles que queramos, de esta forma:


#capa1{ width:210px; height:300px; background-color:green; }


Flotar y acomodar un DIV

• La maquetación por divs CSS se basa en "flotar" unas capas dentro de otras para conseguir la estructura que queremos, para esto se utiliza la propiedad float.


• Crea otra capa #capa2, le aplicas otro color de fondo con igual alto y ancho pero flotas ambas capas hacia la izquierda:

#capa1 {

font-family: Verdana, Geneva, sans-serif;


width: 210px;

height: 300px;

float: left;

}

#capa2 {

font-family: Verdana, Geneva, sans-serif;


height: 300px;

width: 210px;

float: left;

}


• y el código HTML sería este:• <html> <head> <title>maquetacion CSS</title> <link href="estilos.css" type="text/css" rel="stylesheet"> </head><body> <div id="capa1">mi primer capa 1</div> <div id="capa2">mi segunda capa 2</div>

<div id="capa3">mi tercera capa 3</div>

</body></html>


• Escribe bien los ID, tanto en la hoja de estilos como en el código HTML, que coincidan, de lo contrario no funcionará.

• Esto se vería así:


• Ahora, ¿qué pasa si aplicamos un margen izquierdo a la capa2?

#capa2{ width:210px; height:300px; background-color:gray; float:left; margin-left:10px;}


• se vería así:


Evitar que DIV capa se superponga con otra

• Cuando maquetas tu sitio web necesitarás tener una capa o bloque que no tenga capas a su/s lados, para eso está la propiedad CSS Clear.

• Se utiliza en conjunto con float y sirve para evitar que una capa se posicione a cualquiera de los lados, los valores que admite son:

• left: no deja que una capa flote a la izquierda• right: evita que una capa flote a la derecha• both: evita que haya capas flotantes en cualquiera de sus lados


• Crea una tercer capa #capa3 y le aplicas esta propiedad, añade un ancho de 430 pixeles y un alto de 30 pixeles, también le aplicas un color de fondo naranja.

• #capa3{ width:430px; height:30px; background-color:orange; float:left; clear:both;}


• El código HTML quedaría así:• <html> <head> <title>maquetacion CSS</title> <link href=“minag_web.css" type="text/css" rel="stylesheet"> </head><body> <div id="capa1">primer capa</div> <div id="capa2">segunda capa</div> <div id="capa3">mi tercer capa</div></body></html>


• Ahora agrega un margen superior para separar un poco el pie de pagina (#capa3) de las demás capas o divs.

• #capa3{ width:430px; height:30px; background-color:orange; float:left; clear:both; margin-top:10px;}


Maquetar una pagina con DIVs o Capas

• Pon en práctica lo aprendido para maquetar una pagina con la siguiente estructura:

• Cabecera: para un logo o el nombre de tu página web

• Barra lateral: para un menu vertical con listas HTML

• Contenido: para el contenido de la web• Pie de pagina: para el copyright y el nombre del autor


Ejemplos de páginas creadas con CSS

• www.cssmania.com • www.cssbeauty.com

• www.csszengarden.com • www.camaleoncss.com

• Desarrolloweb • Tejedores del Web • Inconciente Colectivo • Diseñorama • Juque

http://www.cssmania.com/

http://www.cssbeauty.com/

http://www.csszengarden.com/

http://www.camaleoncss.com/

http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html

http://www.tejedoresdelweb.com/307/article-1061.html#h2_8

http://www.tejedoresdelweb.com/307/article-1061.html#h2_8

http://www.inconcientecolectivo.cl/especiales/633



http://www.disenorama.com/

http://www.juque.cl/weblog/2004/10/25/diseao-sin-tablas-cochinan-inicia-la-construccian-de-su-casa.html

css separando forma de contenido prof. leonel del carpio 1

Documents