CSS SEPARANDO FORMA DE CONTENIDO Prof. Leonel Del Carpio 1

Prof. Leonel Del Carpio 1

CSS SEPARANDO FORMA DE CONTENIDO

Prof. Leonel Del Carpio

Prof. Leonel Del Carpio 2

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.

Prof. Leonel Del Carpio 3

• 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

Prof. Leonel Del Carpio 4

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.

Prof. Leonel Del Carpio 5

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.

Prof. Leonel Del Carpio 6

1

2

4

3

Prof. Leonel Del Carpio 7

• 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

Prof. Leonel Del Carpio 8

<html >

<head>

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

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>

Prof. Leonel Del Carpio 9

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.

Prof. Leonel Del Carpio 10

• 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

Prof. Leonel Del Carpio 11

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; }

Prof. Leonel Del Carpio 12

• 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.

Prof. Leonel Del Carpio 13

• ¿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.

Prof. Leonel Del Carpio 14

• 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

Prof. Leonel Del Carpio 15

• 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:

Prof. Leonel Del Carpio 16

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.

Prof. Leonel Del Carpio 17

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 “}”.

Prof. Leonel Del Carpio 18

• 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 “;”.

Prof. Leonel Del Carpio 19

• 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;

}

Prof. Leonel Del Carpio 20

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.

Prof. Leonel Del Carpio 21

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.

Prof. Leonel Del Carpio 22

• 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.)

Prof. Leonel Del Carpio 23

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

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

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

Prof. Leonel Del Carpio 24

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;

Prof. Leonel Del Carpio 25

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;

Prof. Leonel Del Carpio 26

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;

Prof. Leonel Del Carpio 27

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.

Prof. Leonel Del Carpio 28

h1 {

background: yellow;

}

h2 {

background: orange;

}

Prof. Leonel Del Carpio 29

Prof. Leonel Del Carpio 30

h1 {

background: yellow;

padding: 20px 20px 20px 80px;

}

h2 {

background: orange;

padding-left:120px;

}

Prof. Leonel Del Carpio 31

Prof. Leonel Del Carpio 32

body { margin-right: auto;

margin-left: auto;

width: 700px;

}

h1 { background: yellow;

padding: 10px 20px 10px 20px;

}

h2 { background: orange;

padding-right: 12px;

padding-left: 48px;

}

p { padding-right: 12px;

padding-left: 48px;

}

</style>

Arriba: vista en el navegador (haz clic en la imagen)Al costado derecho: el código CSS correspondiente. Nota: hemos colocado la primera

propiedad al lado de la llave de apertura.

Prof. Leonel Del Carpio 33

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

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

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

Prof. Leonel Del Carpio 34

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).

Prof. Leonel Del Carpio 35

• 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:

Prof. Leonel Del Carpio 36

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.

Prof. Leonel Del Carpio 37

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

Prof. Leonel Del Carpio 38

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;

}

Prof. Leonel Del Carpio 39

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;

}

Prof. Leonel Del Carpio 40

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;

}

Prof. Leonel Del Carpio 41

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;

}

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

http://es.html.net/tutorials/css/lesson12.php#s2

Prof. Leonel Del Carpio 42

• 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;

}

Prof. Leonel Del Carpio 43

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:

Prof. Leonel Del Carpio 44

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;

Prof. Leonel Del Carpio 45

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

Prof. Leonel Del Carpio 46

• El código HTML del ejemplo anterior es:

</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;

}

Prof. Leonel Del Carpio 47

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>

Prof. Leonel Del Carpio 48

• 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;

}

Prof. Leonel Del Carpio 49

Prof. Leonel Del Carpio 50

Prof. Leonel Del Carpio 51

Prof. Leonel Del Carpio 52

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.

Prof. Leonel Del Carpio 53

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í:

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.

Prof. Leonel Del Carpio 54

<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;

}

Prof. Leonel Del Carpio 55

Prof. Leonel Del Carpio 56

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

Prof. Leonel Del Carpio 57

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

Prof. Leonel Del Carpio 58

• 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;

}

Prof. Leonel Del Carpio 59

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; }

Prof. Leonel Del Carpio 60

Prof. Leonel Del Carpio 61

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.

Prof. Leonel Del Carpio 62

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; }

Prof. Leonel Del Carpio 63

Prof. Leonel Del Carpio 64

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.

Prof. Leonel Del Carpio 65

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;

}

Prof. Leonel Del Carpio 66

• 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;

}

Prof. Leonel Del Carpio 67

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

#encabezado {

padding: 5px;

margin-bottom: ;

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

}

Prof. Leonel Del Carpio 68

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

#contenido {

padding: 5px;

margin-left: ;

background-color: gray;

}

Prof. Leonel Del Carpio 69

• Lo que sigue es crear la barra lateral:

#barra{

float: left;

width: ;

margin: 0;

margin-right: ;

padding: 5px;

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

}

Prof. Leonel Del Carpio 70

• 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.

Prof. Leonel Del Carpio 71

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

Prof. Leonel Del Carpio 72

• <!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>

Prof. Leonel Del Carpio 73

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

<html>

<head>

<title>Maquetando con estilos CSS</title>

</head>

<body>

<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>

Prof. Leonel Del Carpio 74

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í:

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

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

Prof. Leonel Del Carpio 75

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

Prof. Leonel Del Carpio 76

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>

Prof. Leonel Del Carpio 77

• Formato/ Estilos CSS/Nuevo

Prof. Leonel Del Carpio 78

• 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:

Prof. Leonel Del Carpio 79

• 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:

Prof. Leonel Del Carpio 80

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

Prof. Leonel Del Carpio 81

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.

Prof. Leonel Del Carpio 82

• 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;

background-color: rgb(102,204,51);

width: 210px;

height: 300px;

float: left;

}

#capa2 {

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

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

height: 300px;

width: 210px;

float: left;

}

Prof. Leonel Del Carpio 83

• 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>

Prof. Leonel Del Carpio 84

• 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í:

Prof. Leonel Del Carpio 85

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

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

Prof. Leonel Del Carpio 86

• se vería así:

Prof. Leonel Del Carpio 87

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

Prof. Leonel Del Carpio 88

• 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;}

Prof. Leonel Del Carpio 89

• 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>

Prof. Leonel Del Carpio 90

Prof. Leonel Del Carpio 91

• 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;}

Prof. Leonel Del Carpio 92

Prof. Leonel Del Carpio 93

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

Prof. Leonel Del Carpio 94