SEPARANDO FORMA DE CONTENIDO Prof. Leonel Del Carpio

SEPARANDO FORMA DE CONTENIDO Prof. Leonel Del Carpio
Css SEPARANDO FORMA DE CONTENIDO Prof. Leonel Del Carpio

Cascading Style Sheet (Hojas de Estilo en Cascada)
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.

Prof. Leonel Del Carpio 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)
Prof. Leonel Del Carpio 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 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 1 2 3 4

Haz clic sobre la imagen para ir al ejemplo 1
Prof. Leonel Del Carpio Haz clic sobre la imagen para ir al ejemplo 1 Dos estilos aplicados a una etiqueta html: p, usando CSS En la línea 2, se a agregado 9 px de padding.

background-color: rgb(153,255,0); padding: 9px; } </style>
Prof. Leonel Del Carpio <html > <head> <title>Documento sin título</title> <style type="text/css"> p { font-family: Verdana, sans-serif; font-size: 60px; } .red { 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
Prof. Leonel Del Carpio 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.

Haz clic sobre la imagen para ir al ejemplo 2
Prof. Leonel Del Carpio Haz clic sobre la imagen para ir al ejemplo 2 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

Combinación de selectores
Prof. Leonel Del Carpio 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 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 { } Esto hará que los encabezados H1 sean de color azul y en negrita, y los textos en negrita azules.

<h1>Título: El uso de la <b>Negrita</b></h1>
Prof. Leonel Del Carpio ¿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
Prof. Leonel Del Carpio 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:
Prof. Leonel Del Carpio Un atributo es parte de un selector HTML. Por ej, en: <a href=" 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 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 {
Prof. Leonel Del Carpio 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 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 “;”.

#cabecera{ width:780px; }
Prof. Leonel Del Carpio 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 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
Prof. Leonel Del Carpio 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 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
Prof. Leonel Del Carpio Atributos y propiedades CSS Haz clic sobre la imagen para ir a la pagina web

Modificar fuentes font-family: cambia el tipo, ej:
Prof. Leonel Del Carpio 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
Prof. Leonel Del Carpio 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 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
Prof. Leonel Del Carpio 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;
Prof. Leonel Del Carpio h1 { background: yellow; } h2 { background: orange;

Prof. Leonel Del Carpio

Prof. Leonel Del Carpio h1 { background: yellow; padding: 20px 20px 20px 80px; } h2 { background: orange; padding-left:120px;

Arriba: vista en el navegador (haz clic en la imagen)
Prof. Leonel Del Carpio <style type="text/css"> 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; </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 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

Color del borde [border-color]
Prof. Leonel Del Carpio 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]
Prof. Leonel Del Carpio 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]
Prof. Leonel Del Carpio 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 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 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;

border-right-width: thick; border-right-style: solid;
Prof. Leonel Del Carpio 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 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í: border: 1px solid blue;

Altura y anchura width y height
Prof. Leonel Del Carpio 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; }

border: 1px solid black; background: orange; }
Prof. Leonel Del Carpio 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)
Prof. Leonel Del Carpio 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
Prof. Leonel Del Carpio 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 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">
Prof. Leonel Del Carpio 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; }

Prof. Leonel Del Carpio 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 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 { #columna3 { padding-left: 2px;

Prof. Leonel Del Carpio 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
Prof. Leonel Del Carpio 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">
Prof. Leonel Del Carpio <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; }

Prof. Leonel Del Carpio 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.

Posicionamiento de elementos
Prof. Leonel Del Carpio Posicionamiento de elementos la ventana del navegador como sistema de coordenadas:

Digamos que queremos posicionar un título.
Prof. Leonel Del Carpio 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
Prof. Leonel Del Carpio 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 { top: 50px; right: 50px; #box3 { position:absolute; bottom: 50px; right: 50px; } #box4 { bottom: 50px; left: 50px;

Posicionamiento relativo
Prof. Leonel Del Carpio 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
Prof. Leonel Del Carpio 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 { left: 150px; bottom: 500px; #dog3 { position:relative; left: 50px; bottom: 700px; }

I Diagramando el diseño
Prof. Leonel Del Carpio 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
Prof. Leonel Del Carpio 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.
Prof. Leonel Del Carpio 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; }

background-color: rgb(204,204,204); }
Prof. Leonel Del Carpio 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); }

Es el turno del bloque que contendrá lo mas importante, el contenido:
Prof. Leonel Del Carpio 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: ;
Prof. Leonel Del Carpio 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;
Prof. Leonel Del Carpio 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
Prof. Leonel Del Carpio 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

<html xmlns="http://www.w3.org/1999/xhtml"> <head>
Prof. Leonel Del Carpio <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <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>

<title>Maquetando con estilos CSS</title>
Prof. Leonel Del Carpio 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)
Prof. Leonel Del Carpio 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
Prof. Leonel Del Carpio En el cuadro de texto ID escribe el nombre de la capa

Dar formato a un DIV Formato/estilos css/nuevo
Prof. Leonel Del Carpio 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
Prof. Leonel Del Carpio Formato/ Estilos CSS/Nuevo

#capa1{ background-color:green; }
Prof. Leonel Del Carpio 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:

#capa1{ width:210px; background-color:green; }
Prof. Leonel Del Carpio 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; }
Prof. Leonel Del Carpio #capa1{ width:210px; height:300px; background-color:green; }

Flotar y acomodar un DIV
Prof. Leonel Del Carpio 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.

font-family: Verdana, Geneva, sans-serif;
Prof. Leonel Del Carpio 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 { background-color: rgb(204,204,204);

y el código HTML sería este:
Prof. Leonel Del Carpio 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 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 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 se vería así:

Evitar que DIV capa se superponga con otra
Prof. Leonel Del Carpio 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 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í:
Prof. Leonel Del Carpio 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 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
Prof. Leonel Del Carpio 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
Prof. Leonel Del Carpio Ejemplos de páginas creadas con CSS Desarrolloweb Tejedores del Web Inconciente Colectivo Diseñorama Juque

SEPARANDO FORMA DE CONTENIDO Prof. Leonel Del Carpio

Presentaciones similares

Presentación del tema: "SEPARANDO FORMA DE CONTENIDO Prof. Leonel Del Carpio"— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback

Iniciar la sesión

Autorizarse a través de una red social:

SEPARANDO FORMA DE CONTENIDO Prof. Leonel Del Carpio

Presentaciones similares

Presentación del tema: "SEPARANDO FORMA DE CONTENIDO Prof. Leonel Del Carpio"— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback