Maquetacion CSS

Este documento fue Extractado
James Ir Salazar Torres

Curso Bsico De Estilos
Los estilos CSS nos ahorran muchsimo trabajo y permiten:
Separar el diseo del contenido
Hacer que nuestras
Aligerar la carga de nuestras
Hacer ms livianas nuest
Aplicar estilos fcilmente
Al principio puede parecer difcil, pero cua
fcil.
En las prximas lecciones
fcilmente al momento de
la maquetacin, habilidad que he detectado como dbil en esta asignatura)
Hoja de Estilos CSS
Introduccin a los aspectos tcnicos de los estilos CSS, como crear una hoja
de estilos y relacionarla con nuestra
Muchas veces nos vemos un poco limitados al trabajar solo con HTML, aplicar
colores, tamao de fuentes y dems puede ser casi imposible si nuestra
web tiene mucho contenido.
Para eso usaremos los estilos CSS
fuentes, mrgenes, espacios, etc. a la web mucho
Crear la hoja de estilos CSS
La hoja de estilos CSS no contiene cdigo HTML, por lo tanto
escribir etiquetas HTML en el
1. Abrir el bloc de notas
2. Clic en Archivo
tendremos que decirle en que ubicacin queremos guardar la hoja de
estilos(recordemos lo ideal es que este al mismo nivel de carpetas qu
en archivo o en su defecto en niveles inferiores )

Extractado y articulado de http://www.comocrearunsitioweb.com/
James Ir Salazar Torres (Docente IES-CINOC)
Curso Bsico De Estilos CSS
Los estilos CSS nos ahorran muchsimo trabajo y permiten:
Separar el diseo del contenido
Hacer que nuestras pginas web funcionen igual en todos los navegadores
Aligerar la carga de nuestras pginas web
livianas nuestras pginas web
Aplicar estilos fcilmente
Al principio puede parecer difcil, pero cuando te acostumbre
s prximas lecciones aprendern las nociones bsicas para aplicar estilos CSS
fcilmente al momento de crear una pgina web (En especial lo relacionado con
la maquetacin, habilidad que he detectado como dbil en esta asignatura)
stilos CSS (Repaso)
de estilos y relacionarla con nuestra pgina web.
colores, tamao de fuentes y dems puede ser casi imposible si nuestra
web tiene mucho contenido.
estilos CSS, con ellos podemos aplicar cambios
, espacios, etc. a la web mucho ms fcil.
Crear la hoja de estilos CSS
La hoja de estilos CSS no contiene cdigo HTML, por lo tanto
escribir etiquetas HTML en el, para crear la hoja de estilos vamos a:
loc de notas (NOTA: sirve cualquier editor de texto
Archivo -> Guardar Como... se nos abrir una ventana donde
(recordemos lo ideal es que este al mismo nivel de carpetas qu
en archivo o en su defecto en niveles inferiores )
http://www.comocrearunsitioweb.com/ por
web funcionen igual en todos los navegadores
acostumbres todo ser ms
las nociones bsicas para aplicar estilos CSS
En especial lo relacionado con
la maquetacin, habilidad que he detectado como dbil en esta asignatura).
colores, tamao de fuentes y dems puede ser casi imposible si nuestra pgina
, con ellos podemos aplicar cambios de colores,
La hoja de estilos CSS no contiene cdigo HTML, por lo tanto no deberemos
, para crear la hoja de estilos vamos a:
(NOTA: sirve cualquier editor de texto)
se nos abrir una ventana donde
(recordemos lo ideal es que este al mismo nivel de carpetas que
3. Guardamos el archivo con el nombre
"estilos.css", recuerda, debe terminar en ".css" sin ms.
Muy bien, una vez que tengamos el archivo estilos.css
de alguna forma, que los estilos que escribamos en ese archivo sean tomados en
cuenta por el archivo HTML.
Nota: recuerda que NO hay que escribir cdigo HTML en la hoja de estilos.

Relacionar la hoja de estilos CSS con nuestra pagina web
Para relacionar la hoja de estilos CSS utilizaremos la etiqueta
deberemos especificar la ubicacin, tipo de archivo y la relacin entre la hoja de
estilos y la pagina web, debes acordarte SIEMPRE, que la etiqueta
dentro de la etiqueta <head>
<link href="estilos.css" rel="stylesheet" type="text/css" />
Ah vemos que se especifican varios atributos, cada uno sirve para:
href: busca la hoja de estilos
rel: le dice la relacin
type: le dice que tipo de archivo es, o mejor dicho, que conten
llevar dentro.
Para probar si lo hicimos bien, abriremos la hoja de estilos (estilos.css) y
escribimos esto:
body{background-color:black;}
Guardamos y abrimos el archivo index.html con nuestro navegador (Internet
Explorer, Firefox, Opera, etc), si tod
nuestra pgina de color negro.

Conceptos Bsicos De Estilos
Ahora aprenderemos los conceptos bsicos de los estilos CSS, totalmente
desde cero.

Guardamos el archivo con el nombre que le queramos dar
", recuerda, debe terminar en ".css" sin ms.
Muy bien, una vez que tengamos el archivo estilos.css vacio tenemos que lograr,
alguna forma, que los estilos que escribamos en ese archivo sean tomados en
cuenta por el archivo HTML.
recuerda que NO hay que escribir cdigo HTML en la hoja de estilos.
Relacionar la hoja de estilos CSS con nuestra pagina web
oja de estilos CSS utilizaremos la etiqueta
estilos y la pagina web, debes acordarte SIEMPRE, que la etiqueta
<head>, de esta forma:
<link href="estilos.css" rel="stylesheet" type="text/css" />
: busca la hoja de estilos
: le dice la relacin
: le dice que tipo de archivo es, o mejor dicho, que conten
llevar dentro.
color:black;}
Explorer, Firefox, Opera, etc), si todo fue bien tendriamos que ver el fondo de
nuestra pgina de color negro.
Conceptos Bsicos De Estilos CSS
aprenderemos los conceptos bsicos de los estilos CSS, totalmente
que le queramos dar: Ejm:
", recuerda, debe terminar en ".css" sin ms.
tenemos que lograr,
alguna forma, que los estilos que escribamos en ese archivo sean tomados en
recuerda que NO hay que escribir cdigo HTML en la hoja de estilos.
oja de estilos CSS utilizaremos la etiqueta <link>, en ella
estilos y la pagina web, debes acordarte SIEMPRE, que la etiqueta <link> va
: le dice que tipo de archivo es, o mejor dicho, que contenido
o fue bien tendriamos que ver el fondo de
CSS
aprenderemos los conceptos bsicos de los estilos CSS, totalmente

Conceptos bsicos
CSS sirve para aplicar estilos a las etiqueta

Estructura bsica del cdigo CSS
Para aplicar estilos CSS a una etiqueta HTML tenemos que hacerlo as:
etiqueta{atributo:valor;}
por ejemplo:
body{font-size:12px;}
Esa instruccin CSS har que el tamao de fuente del texto en todo el contenido
dentro de "body" (o sea, todo el contenido del sitio) sea de 12px (pixeles).
Nota: asegurate de escribir todo bien, si te falta un signo ":" o "{" "}" no te
funcionaran los estilos.
Si lo que queremos modificar es un bloque, entonces al nombre del bloque o di
le anteponemos un numeral (#), por ejemplo:
#mibloque{ font-size:12px; }
y para que ese estilo funcione, deberemos aplicarlo a un bloque o div dentro del
cdigo HTML de nuestra pagina web, de esta forma:
<div id="mibloque">Este es mi primer bloque creado
Ese cdigo har que todo el texto dentro de
fuente de 12px, lo que este fuera de ese bloque no
Y por ultimo si queremos crear una clase, en lugar de anteponer un numeral o
almohadilla (#) pondremos un punto (.), as:
.miclase{font-family: arial}
y desde el cdigo HTML la llamaremos as:
<span class="miclase">Esta es mi primer clase creada
o tambin as:

CSS sirve para aplicar estilos a las etiquetas HTML.
Estructura bsica del cdigo CSS
;}
tro de "body" (o sea, todo el contenido del sitio) sea de 12px (pixeles).
asegurate de escribir todo bien, si te falta un signo ":" o "{" "}" no te

Si lo que queremos modificar es un bloque, entonces al nombre del bloque o di
le anteponemos un numeral (#), por ejemplo:
size:12px; }
cdigo HTML de nuestra pagina web, de esta forma:
<div id="mibloque">Este es mi primer bloque creado CINOC 2011
que todo el texto dentro de ese bloque tenga un tamao de
fuente de 12px, lo que este fuera de ese bloque no tendr ningn
la (#) pondremos un punto (.), as:
family: arial}
y desde el cdigo HTML la llamaremos as:
<span class="miclase">Esta es mi primer clase creada CINOC 2011
tro de "body" (o sea, todo el contenido del sitio) sea de 12px (pixeles).
asegurate de escribir todo bien, si te falta un signo ":" o "{" "}" no te
Si lo que queremos modificar es un bloque, entonces al nombre del bloque o div
CINOC 2011</div>
bloque tenga un tamao de
ningn estilo.
CINOC 2011</span>
<div class="miclase">Mi primer clase otra vez</div>
Entonces todo lo que este dentro de esas etiquetas la veremos con la fuente
"Arial".
Nota: La diferencia entre una clase (.) y un bloque (#) es que el bloque es nico
e irrepetible en la pagina, es decir, si creamos un estilo de bloque "
para mostrar el cuadro de bsqueda no podremos usarlo otra vez en la misma
pagina, en cambio si a "
podremos usarlo cuantas veces queramos.
Poner Fondo Con Est
Ahora vamos a
fondo con CSS a nuestra
Poner un color de fondo con CSS
Para poner un color de fondo con CSS utilizaremos
propiedad acepta los siguiente atributos:
Cdigo hexadecimal:
Nombre: podemos
colores y siempre tendremos que especificarlo en ingls, alguno de ellos
son; gray, green, red, etc.
Para este ejemplo usaremos el nombre del color, pero antes tenemos que abrir el
archivo estilos.css (que creamos en la leccin de
esto:
body{background-color:gray}
luego lo guardamos y abrimos el archivo index.html (que venimos haciendo a lo
largo del curso-tutorial
estilos con el archivo HTML
Vemos que aplicandole el estilo a la etiqueta

<div class="miclase">Mi primer clase otra vez</div>
es todo lo que este dentro de esas etiquetas la veremos con la fuente
La diferencia entre una clase (.) y un bloque (#) es que el bloque es nico
e irrepetible en la pagina, es decir, si creamos un estilo de bloque "
l cuadro de bsqueda no podremos usarlo otra vez en la misma
pagina, en cambio si a "#busqueda" lo convertimos en una clase "
podremos usarlo cuantas veces queramos.
Poner Fondo Con Estilos CSS
Ahora vamos a poner un color o una imagen de
ondo con CSS a nuestra pgina web.
Poner un color de fondo con CSS
Para poner un color de fondo con CSS utilizaremos background
propiedad acepta los siguiente atributos:
Cdigo hexadecimal: as #000000 este sera el color negro.
podemos elegir el nombre, aunque no funciona con todos los
son; gray, green, red, etc.
e creamos en la leccin de hojas de estilos CSS

tutorial), primero asegrate de haber relacionado la hoja
estilos con el archivo HTML.
Vemos que aplicandole el estilo a la etiqueta <body> funciona perfectamente
es todo lo que este dentro de esas etiquetas la veremos con la fuente
La diferencia entre una clase (.) y un bloque (#) es que el bloque es nico
e irrepetible en la pagina, es decir, si creamos un estilo de bloque "#busqueda"
l cuadro de bsqueda no podremos usarlo otra vez en la misma
" lo convertimos en una clase ".busqueda"
un color o una imagen de
background-color, esta
as #000000 este sera el color negro.
elegir el nombre, aunque no funciona con todos los
hojas de estilos CSS) y escribir
relacionado la hoja de
perfectamente.
Poner imagen de fondo con CSS
Ahora si queremos poner una imagen de fondo que se repita (un patrn), lo
haremos con el atributo
body{ background: url(ruta/imagen.jpg); }
En este sitio he utilizado esta imagen:
Es una imagen muy chica, pero se repetir de arriba a abajo y quedar as:
Si nuestra intencin es que no se repita, el cdigo sera as:
body{background: url(imagen.jpg) no
Si queremos que repita horizontalmente, sera as:
body{background: url(imagen.jpg) r
Y si queremos que se repita verticalmente, lo hacemos as:

Poner imagen de fondo con CSS
haremos con el atributo background as:
body{ background: url(ruta/imagen.jpg); }
En este sitio he utilizado esta imagen:
muy chica, pero se repetir de arriba a abajo y quedar as:
Si nuestra intencin es que no se repita, el cdigo sera as:
body{background: url(imagen.jpg) no-repeat;}
Si queremos que repita horizontalmente, sera as:
body{background: url(imagen.jpg) repeat-x;}
Y si queremos que se repita verticalmente, lo hacemos as:
muy chica, pero se repetir de arriba a abajo y quedar as:

body{background: url(imagen.jpg) repeat
Bien, ya hemos aprendido a
empieza a tomar forma, vamos a la siguiente leccin.

Centrar contenido
Ya tenemos un poco mas de idea de lo que hace CSS
centrar contenido con CSS, primero crearemos una clase y luego la
llamaremos desde el cdigo HTML de nuestra
Vamos a suponer que vienes siguiendo el curso desde el principio, o por lo
menos, desde la leccin de
crearlas.
La clase que crearemos para centrar texto se llamar "centrar
el atributo "text-align" con el valor "
.centrar-texto{ text-align:center;
y la usaremos desde el cdigo HTML as:
< span class="centrar-texto">Este

body{background: url(imagen.jpg) repeat-y;}
Bien, ya hemos aprendido a colocar fondos con CSS y nuestra
empieza a tomar forma, vamos a la siguiente leccin.
Centrar contenido con CSS
tenemos un poco mas de idea de lo que hace CSS, ahora
llamaremos desde el cdigo HTML de nuestra pgina web.
n de estilos CSS donde vemos que es una clase y como
La clase que crearemos para centrar texto se llamar "centrar-texto" y contendr
" con el valor "center" de esta forma:
align:center; }
y la usaremos desde el cdigo HTML as:
texto">Este es el texto que ir centrado</span>
y nuestra pgina web
ahora aprenderemos a
donde vemos que es una clase y como
texto" y contendr
centrado</span>
este cdigo se ver as:
Nuestro archivo estilos.css va quedando as:


va quedando as:


En rojo vemos la clase que creamos.

Margen Y Padding Con Estilos
Que es el margen? Y el padding? Para que sirven? En esta leccin
responderemos todas estas preguntas y veremos ejemplos prcticos.
Margin o margen CSS
Para que sirve? margin
elementos, aunque parezca complicado de entender, no lo es :). Supongamos
que tenemos una imagen y pegado un bloque con texto dentro, bien, usando la
propiedad margin podremos separar esos dos elementos, asi esta mejor eh?.
Se utiliza as:
.clase{ margin: 10px ;}
Haciendo eso separaremos 10px la imagen del texto, ojo que estamos separando
10px de arriba, derecha, abajo e izquierda, si queremos separar 10px solo de la
izquierda, hacemos esto:
.clase{ margin: 10px 0px 0px 0px}
Como vemos, podemos aplicar ma
siguiendo el sentido de las agujas del reloj
.clase{margin: arriba derecha abajo izquierda;}
o tambin podemos hacerlo as:
.clase{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
Claro que no hace falta especificar todas las orientaciones, solo basta con poner
la que queremos especificar.

En rojo vemos la clase que creamos.
Margen Y Padding Con Estilos CSS
margin sirve para establecer la separacion entre dos
, aunque parezca complicado de entender, no lo es :). Supongamos
podremos separar esos dos elementos, asi esta mejor eh?.
izquierda, hacemos esto:
.clase{ margin: 10px 0px 0px 0px}
Como vemos, podemos aplicar margenes por orientacin, los valores se aplican
siguiendo el sentido de las agujas del reloj, es decir:
.clase{margin: arriba derecha abajo izquierda;}
o tambin podemos hacerlo as:
top: 0px;
right: 0px;
bottom: 0px;
t: 10px;
la que queremos especificar.
CSS
sirve para establecer la separacion entre dos
, aunque parezca complicado de entender, no lo es :). Supongamos
podremos separar esos dos elementos, asi esta mejor eh?.
rgenes por orientacin, los valores se aplican
top: 0px;
right: 0px;
bottom: 0px;
t: 10px;
Nota: siempre debes poner la unidad luego del valor, es decir, si quieres un
margen de 10 pxeles debes asegurarte de poner "px" luego
forma: margin:10px;
Padding CSS
El padding a primera vista es igual al margin, incluso en determinadas ocaciones
podremos usar las dos y conseguiremos el mismo resultado visual, la diferencia
esta en que padding no separa dos elementos, ma
dentro uno de ellos, por ejemplo, si tenemos un bloque con texto dentro y una
imagen al lado bien pegada, al aplicarle padding al bloque con texto, los
elementos siguen pegados, pero vemos un espacio al igual que si usaramos la
propiedad margin, solo que esta vez se creo un espacio
margin se hubiera creado el espacio fuera del bloque) con texto dentro.
La forma de aplicarlo es igual que margin, solo que esta vez el nombre ser
padding:
.clase{ padding: 10px; }

.clase{ padding: 10px 0px 0px 0px; }

.clase{ padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
}
Como vemos, su uso es idntico a
Ahora vamos a aplicar lo que aprendimos en nuestra pagina web, la que venimos
creando en el curso, lo que haremos es aplicar un padding a la imagen para que
quede centrada igual que el texto, vamos a aplicar un estilo a la etiqueta img
desde el archivo estilos.css de esta forma:
img{ padding-left:320px }
esto modificar solo a la etiqueta img

siempre debes poner la unidad luego del valor, es decir, si quieres un
margen de 10 pxeles debes asegurarte de poner "px" luego
padding no separa dos elementos, mas bien crea un espacio
, por ejemplo, si tenemos un bloque con texto dentro y una
edad margin, solo que esta vez se creo un espacio dentro del bloque

.clase{ padding: 10px 0px 0px 0px; }
top: 0px;
Como vemos, su uso es idntico a margin.
el curso, lo que haremos es aplicar un padding a la imagen para que
desde el archivo estilos.css de esta forma:
left:320px }
esto modificar solo a la etiqueta img:
siempre debes poner la unidad luego del valor, es decir, si quieres un
margen de 10 pxeles debes asegurarte de poner "px" luego del 10, de esta
s bien crea un espacio
, por ejemplo, si tenemos un bloque con texto dentro y una
dentro del bloque (con
el curso, lo que haremos es aplicar un padding a la imagen para que
y la pagina se ver as:
Crear listas con HTML
Que son las listas HTML? Aqu aprenderemos que son las famosas listas HTML, para
que sirven y como se crean.
Que son las "Listas"? (recordemos HTML b

Crear listas con HTML
que sirven y como se crean.
recordemos HTML bsico)

Las listas son bloques de items ordenados uno abajo del otro, pueden ser ordenadas o
desordenadas, para entenderlo mejor miremos este ejemplo:
Lista ordenada:
1. Primer item
2. Segundo
3. etc.
Lista desordenada:
primer item de mi lista
segundo
tercero
etc...
Crear una lista con HTML
El cdigo para crear una lista con HTML desordenada es
que escribiremos siempre que queramos crear una lista desordenada, y la segunda es
<li> y </li>.
Crear lista desordenada:
<ul>
<li>Este es el
<li>Segundo
<li>Tercero</li>

< /ul>
Como podemos ver, con la etiqueta
<li> creamos los items, un item por cada

desordenadas, para entenderlo mejor miremos este ejemplo:
primer item de mi lista

El cdigo para crear una lista con HTML desordenada es <ul> y </ul>, esta es la primera

el primer item de mi
Como podemos ver, con la etiqueta <ul> indicamos que queremos abrir una lista y con
creamos los items, un item por cada <li>.
, esta es la primera
mi lista</li>
item</li>
indicamos que queremos abrir una lista y con
Crear lista ordenada:
<ol>
<li>Este es el
<li>Segundo
<li>Tercero</li>
< /ol>
Ahora apliquemos esto que aprendimos a la
este curso, el cdigo quedara as:
Quedara as:

el primer item de mi
Ahora apliquemos esto que aprendimos a la pgina que venimos haciendo a lo largo de
este curso, el cdigo quedara as:
mi lista</li>
item</li>
que venimos haciendo a lo largo de


Aplicar estilos CSS a listas
Bien, ya sabemos que son las listas y como crearlas, que rapido no?, ahora veremos
como aplicar estilos a esas listas, por ejemplo, para sacarle los puntos
horribles que tienen al costado.
Para sacarle el punto negro al costado sera asi:
ul{list-style:none;}
utilizamos la propiedad "list
en "none" le estamos diciendo que a la etiqueta <ul> (contenedor de la lista en HTML,
recuerdas?) no le de ningun estilo, con esto sacamos el punto negro o l
listas ordenadas.
Si lo que queremos es darle color a los textos de los items, solo hacemos esto:
li{color: gray;}
Seleccionamos la etiqueta <li> y le aplicamos la propiedad "color" con el atributo "gray",
es decir, gris en ingls, recuer
"color: #cccccc;".

Aplicar estilos CSS a listas
sabemos que son las listas y como crearlas, que rapido no?, ahora veremos
como aplicar estilos a esas listas, por ejemplo, para sacarle los puntos
horribles que tienen al costado.
Para sacarle el punto negro al costado sera asi:
utilizamos la propiedad "list-style" que define el estilo de la lista, al poner ese atributo
recuerdas?) no le de ningun estilo, con esto sacamos el punto negro o l
es decir, gris en ingls, recuerda que tambien podemos hacer por el hexadecimal, osea

sabemos que son las listas y como crearlas, que rapido no?, ahora veremos
como aplicar estilos a esas listas, por ejemplo, para sacarle los puntos (vieta) negros
style" que define el estilo de la lista, al poner ese atributo
recuerdas?) no le de ningun estilo, con esto sacamos el punto negro o los numeros en las
da que tambien podemos hacer por el hexadecimal, osea
Podemos hacer lo que queramos, siempre y cuandos recuerdes que <ul> es el bloque
entero de la lista y <li> son los items.
MAQUETACIN

Maquetar Pagina Web Con Divs (Capas
O Layouts)
Introduccin a los conceptos bsicos de la maquetacin con CSS y capas, que son las
capas? para que sirve?, aqu responderemos a todas las preguntas.
Pero, que es eso de la maquetacin?
En pocas palabras, maquetar una pagina web es pasar el diseo a cdigo HTML
poniendo cada cosa en su lugar (una cabecera, un menu, etc.).
Hasta hace unos aos la nica manera de maquetar una pagina web era mediante tablas
HTML (<table>), pero esto tiene muchas desventajas y limitaciones, por eso la tcnica
de maquetacin fue evolucio
tablas, si no capas (los famosos DIVs) a las que se le dan formato mediante CSS.
Capas, layouts, divs? que es eso?
Las capas, layouts o divs son la mis
mental ms fuerte de lo que son, podemos imaginarlos como
donde podemos meter lo que queramos dentro
bloque, o todo al mismo tiempo) a los que se le asigna un ancho, alto y posicin
esta manera se van a ir posicionando consiguiendo la estructura que queremos.
Veamos un ejemplo grfico

entero de la lista y <li> son los items.

AQUETACIN WEB

a los conceptos bsicos de la maquetacin con CSS y capas, que son las
Pero, que es eso de la maquetacin?
maquetar una pagina web es pasar el diseo a cdigo HTML
iendo cada cosa en su lugar (una cabecera, un menu, etc.).
de maquetacin fue evolucionando con los aos hasta llegar al punto donde no se usan
Capas, layouts, divs? que es eso?
Las capas, layouts o divs son la misma cosa con distinto nombre, para tener
fuerte de lo que son, podemos imaginarlos como contenedores o bloques
donde podemos meter lo que queramos dentro (imgenes, texto, animaciones, otro
bloque, o todo al mismo tiempo) a los que se le asigna un ancho, alto y posicin
un ejemplo grfico:
a los conceptos bsicos de la maquetacin con CSS y capas, que son las
maquetar una pagina web es pasar el diseo a cdigo HTML,
nando con los aos hasta llegar al punto donde no se usan
, para tener un concepto
contenedores o bloques
(imgenes, texto, animaciones, otro
bloque, o todo al mismo tiempo) a los que se le asigna un ancho, alto y posicin, de
Como podemos ver, tenemos 3 capas estructuradas de la siguiente manera:
Capa 1: es la capa principal y contenedora
Capa 2: capa dentro de la capa co
(float:left;)
Capa 3: igual que la capa 2, solo que tiene un margen con respecto a esta
ultima (float:left; margin: 10px; ya veremos esto
No te compliques mucho tratando de entender el concepto de golp
viendo ms detenidamente durante estas lecciones.

Creando Nuestro Primer
En esta leccin aprenderemos a crear nuestro
primer DIV para maquetarlo con CSS, darle formato
y aplicarle estilos.
Es hora de aprender a crear una capa, no te asustes porque no es nada del otro
mundo, si seguiste todas las lecciones te ser muy fcil.

es la capa principal y contenedora
capa dentro de la capa contenedora 1 y alineada a la izquierda
igual que la capa 2, solo que tiene un margen con respecto a esta
ultima (float:left; margin: 10px; ya veremos esto ms en detalle).
No te compliques mucho tratando de entender el concepto de golpe, ya lo vamos a ir
detenidamente durante estas lecciones.
Creando Nuestro Primer DIV
y aplicarle estilos.
prender a crear una capa, no te asustes porque no es nada del otro
mundo, si seguiste todas las lecciones te ser muy fcil.

ntenedora 1 y alineada a la izquierda
igual que la capa 2, solo que tiene un margen con respecto a esta
en detalle).
e, ya lo vamos a ir
prender a crear una capa, no te asustes porque no es nada del otro
Como crear un DIV
La forma de crear una capa DIV es as:
recuerda que todo contenido visible de la pgina debe ir ent
<body> </body> (esto ya
con el cdigo HTML completo quedara as:
< html>
<head>
<title>Curso de maquetacin
</head>
< body>
<div>Esta es mi primer capa!</div>
< /body>
< /html>

Dar formato a un DIV
Como darle formato a un DIV o capa con estilos CSS
Dando formato a un DIV
Esto se hace con estilos CSS,
con un archivo html.
Para darle formato a un DIV tenemos
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">Esta es mi primer capa!</div>
Como podemos ver, a esta cap
falta abrir la hoja de estilos que creamos y llamarlo de esta manera:

#capa1{
background-color:green;
}

Como crear un DIV
La forma de crear una capa DIV es as: <div></div>
recuerda que todo contenido visible de la pgina debe ir ent
</body> (esto ya debe estar muy claro).
n el cdigo HTML completo quedara as:
CSS</title>
<div>Esta es mi primer capa!</div>
Dar formato a un DIV
Dando formato a un DIV
Esto se hace con estilos CSS, ya sabemos crear una hoja de estilos y relacionarla
Para darle formato a un DIV tenemos que identificarlo de alguna forma, para esto
, en el pondremos el nombre del DIV para luego llamarlo
Como podemos ver, a esta capa le pusimos "capa1" de nombre, ahora solo nos
recuerda que todo contenido visible de la pgina debe ir entre las etiquetas
crear una hoja de estilos y relacionarla
que identificarlo de alguna forma, para esto
, en el pondremos el nombre del DIV para luego llamarlo
"capa1" de nombre, ahora solo nos

esto har que el color de fondo
puede apreciar:
Como vemos, el color se estira, esto es porque no le definimos un ancho
determinado, para hacer agreg
forma:

#capa1{
width:210px;
}

Ahora seguramente ya vers el fondo verde en un
la imagen anterior, pero

Simple, le agregaremos el atributo
de esta forma:
#capa1{
width:210px;
height:300px;
}

esto har que el color de fondo de esa capa sea verde, en la siguiente imagen se

determinado, para hacer agregaremos el atributo width a #capa1 de la siguiente
Ahora seguramente ya vers el fondo verde en un rea mucho ms
, pero Cmo hacer para que la capa sea
Simple, le agregaremos el atributo height con el valor en pixeles que queramos,

sea verde, en la siguiente imagen se
a #capa1 de la siguiente
ms corta como en
que la capa sea ms alta?
con el valor en pixeles que queramos,
Con esto ya tendremos una especie de
texto como queremos.
Flotar y Acomodar un DIV
Para que sirve la propiedad FLOAT en CSS? Aqu veremos para que sirve y cuales son sus
atributos y usos prcticos.
La maquetacin por divs CSS
para conseguir la estructura que queremos
float.

Esta propiedad se utiliza para flotar los bloques, podemos utilizarla con los
siguientes valores:
none: no flota la capa.
left: flota la capa hacia la izquierda.
right: flota la capa hacia la derecha.
Siguiendo con el ejemplo de la leccin anterior, vamos a crear otra capa #capa2,
le vamos a aplicar otro color de fondo con el mismo alto y ancho pero vamos a
flotar ambas capas hacia la izquierda, quedara as:
#capa1{
width:210px;
height:300px;


Con esto ya tendremos una especie de rectngulo verde donde podremos agregar
comodar un DIV

La maquetacin por divs CSS se basa en "flotar" unas capas dentro de otras
para conseguir la estructura que queremos, para esto se utiliza la propiedad
no flota la capa.
flota la capa hacia la izquierda.
flota la capa hacia la derecha.
ia la izquierda, quedara as:
verde donde podremos agregar
basa en "flotar" unas capas dentro de otras
, para esto se utiliza la propiedad
float:left;
}

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

y el cdigo HTML sera este

<html>
<head>
<title>Curso de maquetacion CSS</title>
<link href="estilos.css" type="text/css" rel="stylesheet">
</head>
< body>
<div id="capa2">Esta es mi segunda capa!</div>
< /body>
< /html>

Nota: asegurate de escribir bien los ID, tanto en la hoja de
coincidan en ambos, de lo contrario no funcionar

Esto se debera ver ms


y el cdigo HTML sera este:
asegurate de escribir bien los ID, tanto en la hoja de estilos como en el cdigo HTML, que
coincidan en ambos, de lo contrario no funcionar.
o menos as:
estilos como en el cdigo HTML, que
Ahora, que pasa si aplicamos un margen izquierdo a la capa2?

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

se vera as:




Evitar que un DIV o CAPA se
Superponga con otra
Para que sirve la propiedad CLEAR en CSS? Aqu veremos para que sirve y
cuales son sus atributos y usos prcticos.
Seguramente cuando estes maquetando tu sitio web necesitars tener una capa o
bloque que no tenga capas a su/s lados, para eso esta la propiedad CSS

Esta propiedad se utiliza en conjunto con
se posicione a cualquiera de los lados
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

Nosotros lo usaremos para crear, por ejem

Siguiendo con el ejemplo que hicimos en la leccin anterior vamos a crear una

uperponga con otra
cuales son sus atributos y usos prcticos.
bloque que no tenga capas a su/s lados, para eso esta la propiedad CSS
Esta propiedad se utiliza en conjunto con float y sirve para evitar que una capa
alquiera de los lados, los valores que admite son estos:
no deja que una capa flote a la izquierda
evita que una capa flote a la derecha
evita que haya capas flotantes en cualquiera de sus lados
Nosotros lo usaremos para crear, por ejemplo, el pie de pagina.

bloque que no tenga capas a su/s lados, para eso esta la propiedad CSS Clear.
sirve para evitar que una capa
, los valores que admite son estos:
evita que haya capas flotantes en cualquiera de sus lados
plo, el pie de pagina.
tercer capa #capa3 y le aplicaremos esta propiedad, aadiremos un ancho de 430
pixeles y un alto de 30 pixeles, tambin le aplicaremos un color de fondo
naranja.

#capa3{
width:430px;
height:30px;
background-color:orange;
float:left;
clear:both;
}
el cdigo HTML quedara as:
<html>
<head>
</head>
< body>
<div id="capa3">Esta es mi tercer capa!</div>
</body>
< /html>

Esto dar como resultado algo parecido a esto:

color:orange;
el cdigo HTML quedara as:
<div id="capa3">Esta es mi tercer capa!</div>
Esto dar como resultado algo parecido a esto:
Ahora vamos a agregar un margen superio
(#capa3) de las demas capas o divs.

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

Esto quedara as:

Ahora vamos a agregar un margen superior para separe un poco el pie de
(#capa3) de las demas capas o divs.


un poco el pie de pgina

Si les ha quedado claro estos pasos de
maquetar un sitio, para
pruebas ntegramente con divs

Maquetando una
o Capas (layouts)
En esta leccin aprenderemos a maquetar una
pagina web integramente en CSS y HTML, cada
parte de ella explicada
prcticos para entenderlo mejor.
A lo largo de este curso de maquetacin CSS
bsicos para crear y poder flotar capas entre otras co
de poner en prctica lo que aprendimos para maquetar una pagina con la
siguiente estructura:

Si les ha quedado claro estos pasos de maquetacin ya estamos listos para
para ello en la siguiente leccin maquetaremos un sitio de
con divs.
Maquetando una Pgina Web con DIVs
o Capas (layouts)
parte de ella explicada paso a paso, con ejemplos
prcticos para entenderlo mejor.
este curso de maquetacin CSS hemos ido viend
bsicos para crear y poder flotar capas entre otras cosas, ahora vamos a tratar

a estamos listos para
a siguiente leccin maquetaremos un sitio de
Web con DIVs
paso a paso, con ejemplos
endo los conceptos
sas, ahora vamos a tratar
Cabecera: ac puede ir un logo o el nombre de tu pagina web
Barra lateral: podemos poner un menu vertical con listas HTML
Contenido: donde ir el contenido de la web
Pie de pagina: podemos poner lo que necesitemos, desde el copyright
hasta los enlaces recomendados
La estructura deber quedar as:
Recuerda: que esto es solo un ejemplo
diseo y las diferentes partes que

Entonces comencemos maquetando el contenedor general.
Nota: antes de continuar,
archivo HTML para que todo lo que hagas a lo largo del curso te funcione.

1. Maquetar el contenedor general
con CSS
En esta leccin de maquetacin aprender
nuestra pgina web.

Contenedor general

ac puede ir un logo o el nombre de tu pagina web
podemos poner un menu vertical con listas HTML
e ir el contenido de la web
podemos poner lo que necesitemos, desde el copyright
hasta los enlaces recomendados
La estructura deber quedar as:

que esto es solo un ejemplo de diseo estructural, tu puedes definir el
diseo y las diferentes partes que tendr tu pagina.
mos maquetando el contenedor general.
antes de continuar, asegrate de relacionar la hoja de estilos con tu
para que todo lo que hagas a lo largo del curso te funcione.
Maquetar el contenedor general
En esta leccin de maquetacin aprenderemos a maquetar el contenedor general de
ac puede ir un logo o el nombre de tu pagina web
podemos poner un menu vertical con listas HTML
podemos poner lo que necesitemos, desde el copyright

tu puedes definir el
relacionar la hoja de estilos con tu
para que todo lo que hagas a lo largo del curso te funcione.
Maquetar el contenedor general
emos a maquetar el contenedor general de
La primera capa que tendremos que crear es un contenedor general al que
aplicaremos un ancho y alto fijo

Para este ejemplo lo haremos con estas medida
Ancho: 900 pixeles
Alto: 400 pixeles
A este DIV lo llamaremos "contenedor", y sera algo asi:

#contenedor {
width: 900px;
height: 400px;
}

Ahora abrimos el archivo HTML (index.html) y comenzamos a ar
por ahora solo tenemos que llamar a la capa "contenedor", as:

<html>
< head>
< title>Maquetando con estilos CSS</title>
< link href="estilos.css" rel="stylesheet" type="text/css">
< /head>
< body>
<div id="contenedor">
</div>
< /body>
< /html>
Ya tenemos el contendor general, ahora maquetaremos la cabecera.

2. Maquetar C

capa que tendremos que crear es un contenedor general al que
aplicaremos un ancho y alto fijo para todo el sitio Web.
Para este ejemplo lo haremos con estas medidas:
900 pixeles
400 pixeles
Ahora abrimos el archivo HTML (index.html) y comenzamos a ar

Maquetar Cabecera con CSS
capa que tendremos que crear es un contenedor general al que le
Ahora abrimos el archivo HTML (index.html) y comenzamos a armar las capas,
abecera con CSS
Seguimos con las lecciones para maquetar nuestra primer
pagina web, en esta
cabecera
Cabecera
Teniendo el contenedor general
vimos antes, es hora de crear la cabecera de nuestro sitio, a esta le asignaremos
el alto que queremos que te
el contenedor general, obviamente usaremos mucho menos, solo 50 pixeles, y
tambin un color de fondo (verde) para ir notando cada capa, quedando as:

#cabecera {
background-color: green;
height:50px;
padding:5px;
}

y llamamos a esta capa desde el cdigo HTML, pero ojo, tiene que ir dentro de la
capa contenedora, as:

<html>
< head>
< /head>
< body>
<div id="cabecera">Esta es la cabecera</div>
</div>
</body>
</html>

Perfecto, ya hemos maquetado el contenedor general y la cabecera, sigamos con
la barra lateral.

pagina web, en esta ocasin veremos cmo
contenedor general y siguiendo el diagrama de maquetacin que
, es hora de crear la cabecera de nuestro sitio, a esta le asignaremos
el alto que queremos que tenga, siempre dentro de los limites que definimos en


maquetar la
el diagrama de maquetacin que
, es hora de crear la cabecera de nuestro sitio, a esta le asignaremos
nga, siempre dentro de los limites que definimos en
3. Maquetar la Barra L
Siguiendo con el curso de maquetaci
lateral con CSS y DIVs

Barra lateral
Lleg la hora de crear la capa de la barra lateral, donde pondremos un menu o lo
que necesitemos. En esta capa, adems de agregar otro color de fondo,
comenzaremos a utilizar la
adems de establecer un ancho y alto que utilizar

#barra-lateral {
background-color: orange
float: left;
width:140px;
height:100%;
}

Si no queremos que ocupe todo el alto de la pagina solo ponemos una cantidad
de pixeles determinada, sin porcentajes.

El HTML quedar as:

<html>
< head>
< /head>
< body>

aquetar la Barra Lateral con CSS
Siguiendo con el curso de maquetacin, veremos como maquetar la barra
comenzaremos a utilizar la propiedad float para flotar la barra a la izquierda,
adems de establecer un ancho y alto que utilizar la capa.
color: orange;
de pixeles determinada, sin porcentajes.
ateral con CSS
n, veremos como maquetar la barra
para flotar la barra a la izquierda,
<div id="barra-lateral">Esta es la barra lateral</div>
</div>
</body>
</html>

Ya nos falta muy poco
planteamos

4. Maquetar
Leccin del curso de maquetacin CSS, donde
maquetamos el contenido general de nuestro sitio web
Contenido
Al igual que la capa de la
cambiaremos algunos valores como el ancho (el contenido ocupa mas lugar) y el
color de fondo (para distingir donde empieza y termina la capa).

#contenido {
background-color: gray;
float:left;
width:740px;
height:100%;
}

y en el HTML agregamos la capa debajo de la barra lateral:

lateral">Esta es la barra lateral</div>
muy poco para culminar con el esquema de diseo que nos
aquetar Contenido con CSS
Al igual que la capa de la barra lateral, definiremos los mismos atributos solo que

y en el HTML agregamos la capa debajo de la barra lateral:
para culminar con el esquema de diseo que nos
ontenido con CSS
iniremos los mismos atributos solo que

Ya solo nos queda maquetar el pie de pagina y es hora de que le des tus toques
finales.
<html>
< head>
< link href="estilos.css" rel="styleshee
< /head>
< body>
<div id="contenido">Este es el contenido principal</div>
</div>
< /body>
< /html>
5. Maquetar pie de P
Ultima leccin del curso de maquetacin con CSS y capas,
donde aprenderemos a maquetar el pie de p
Pie de pagina
En el pie de pgina utilizaremos la
anterior, tambin definiremos un color de fondo:

#pie {

Maquetar pie de Pgina CSS
emos a maquetar el pie de pgina
gina utilizaremos la propiedad clear que vimos en la leccin
anterior, tambin definiremos un color de fondo:

gina.
que vimos en la leccin
background-color: blue;
clear: both;
}

Finalmente el HTML quedara as:
<html>
< head>
< /head>
< body>
<div id="pie">Este es el pie de p
</div>
< /body>
< /html>

Si queremos agregar un espac
"padding:5px;" en todas las capas CSS.


Finalmente el HTML quedara as:
<div id="pie">Este es el pie de pgina</div>
Si queremos agregar un espacio entre las palabras y los bordes solo agregamos
"padding:5px;" en todas las capas CSS.
io entre las palabras y los bordes solo agregamos

Ya terminamos, ahora ejecuta tu pagina y observa como te quedo, si quieres que
todas las pginas de tu sitio tengan esta estructura, simplemente enlaza el
contenido de cada documen

, ahora ejecuta tu pagina y observa como te quedo, si quieres que
de tu sitio tengan esta estructura, simplemente enlaza el
contenido de cada documento HTML y el archivo CSS
, ahora ejecuta tu pagina y observa como te quedo, si quieres que
de tu sitio tengan esta estructura, simplemente enlaza el

Maquetacion CSS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Maquetacion CSS

Uploaded by

Copyright:

Available Formats

Este documento fue Extractado

James Ir Salazar Torres

You might also like