Leccin 3:Introduccin a la presentacin en pantalla con CSSObjetivos:En esta leccin aprenderemos los conceptos fundamentales de diseo Web basados en CSS y la preparacin de una estructura visual de pgina web con dos columnas y anchura fija. Adems veremos el empleo de un archivo de reset de CSS y cmo se aade a las pginas. Se aborda tambin el uso del elemento y las propiedades float y clear para crear columnas en la pgina.Para empezarVamos a trabajar con algunos archivos de la carpetaHTML5_03lessons.Comprueba que has descargadoy que tienes en tu disco duro la carpetaHTML5lessons.Para las prcticas hemos utilizado como editor de textos Microsoft Visual Web Developer Express, pero existen numerosas alternativas para la creacin y edicin de pginas Web que puedes utilizar tambin.El papel del archivo de reset CSSAntes de empezar a crear un diseo visual de pgina Web vamos a ver cmo se utiliza un archivo de reset de CSS. Todos los elementos HTML se muestran en pantalla utilizando los estilos por defecto que aplica cada navegador. Ya hemos visto en el captulo precedente cmo CSS nos permite definir estilos para tipos de letra, modificando el tamao y la fuente, pero hay otros estilos no tan obvios. Por ejemplo: el estilo por defecto para un elementoheading 1() incluye unos mrgenes de 10 pixels por encima y por debajo del texto. Si queremos modificar el estilo de h1 para que no lleve mrgenes, tendremos que indicar de manera explcita unas reglas que conviertan dichos valores a cero.Una regla CSS para anular los mrgenes superior e inferior de los elementos heading 1 es as:h1{ margin-top:0px; margin-bottom:0px;}Todos los elementos HTML incluyen mrgenes por defecto. Aunque los navegadores web actuales tienen una calidad muy superior a los antiguos, conviene saber que cada motores de restitucin empleado por los navegadores aplica sus propias reglas para mostrar los elementos en pantalla. En teora esto quiere decir que el margen por defecto de 10 pixeles en un navegador X puede transformarse en 15 pixels en el navegador Y. Estas diferencias generan resultados no homogneos a la hora de ver las pginas en distintos sistemas (no obstante, las diferencias tampoco son tan drsticas como hemos sugerido en este ejemplo, pero existen y hay que contar con ellas).Una tcnica para homogeneizar las presentaciones en pantalla consiste en utilizar un archivo CSS de reset que elimine los estilos por defecto aplicados a los elementos HTML utilizados con ms frecuencia. Con este reseteo de valores podemos conseguir una base fiable y coherente sobre la cual construir nuestros nuevos estilos. Para hacernos idea de cmo funcionan los estilos, vamos a abrir una pgina que ya tiene varios estilos y le asociaremos una hoja de estilos CSS de reset.1En el editor de textos, en Archivo selecciona Abrir. Abre en la carpetaHTML5_03lessonsel archivo03_reset.html.Este archivo contiene una serie de elementos HTML genricos, como ttulos, prrafos, listas y formularios. No incluye estilos CSS.2Muestra en el navegador la pgina y mira el espacio de separacin que hay entre los ttulos, y fjate tambin en el aspecto de las listas de datos y el formulario. Lo que haremos ahora es asociar una hoja de estilo CSS de reset para ver cmo afecta a la presentacin en pantalla de estos elementos. Cierra el navegador y vuelve al editor.3Aade la siguiente lnea de cdigo (destacada en color rojo) debajo de la etiqueta de ttulo para asociar la hoja de estilosreset.cssque se encuentra tambin en la carpetaHTML5_03lessons:

CSS Reset

Guarda el archivo y visualzalo en el navegador

Una pgina con elementos HTML habituales con reset de estilos CSS.Muchos de los elementos en esta pgina tenan los mrgenes y distancias al borde prefijadas a cero. En consecuencia, el espacio entre ellos se ha eliminado. Se han reseteado tambin otros muchos estilos, como por ejemplo las listas de datos, que se han dejado en valor none, lo que elimina los puntos (las vietas o bullets como tambin se los denomina en los textos) de las lneas en las listas no ordenadas, as como los nmeros de orden en las listas ordenadas. Cierra el navegador y vuelve al editor de textos.4Selecciona Archivo-Abrir. En la ventana, selecciona el archivoreset.cssy pulsa Abrir. Revisa un momento el contenido.Esta serie de reglas elimina los valores por defecto de mrgenes, mrgenes interiores (padding), y los bordes de casi todos los elementos HTML.5Ahora vamos a modificar la hoja de estilos, pero tenemos que asociarla a las pginas web. Recuerda que las hojas de estilos de reset son opcionales. Nos ayudan a normalizar la presentacin en los distintos navegadores, y algunos diseadores tambin incluyen en ellas sus propios estilos de uso frecuente para resetear los valores iniciales de los elementos.

Ampliacin de la hoja de estilos de reset

Eric Meyer fue el primer desarrollador que prepar hojas de estilo de reset, que despus distribuy para uso pblico. Puedes utilizar sus reglas de estilo en este ejercicio. Si quieres buscar ms informacin sobre las tcnicas de reset, visita la web http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/.Muchos diseadores se preparan sus propias hojas de estilos de reset para resolver sus propias necesidades. Por ejemplo, si la familia de fuentes que utilizas con ms frecuencia es Verdana, puedes aadir esta regla al estilo del elementobody. Si te gusta poner ms espacio de separacin entre prrafos, puedes fijar el valor estndar de tamao de lnea que te parezca ms adecuado. Lo que importa es disponer de una serie de reglas coherentes que se puedan utilizar para empezar cualquier proyecto de inmediato.EL uso de hojas de reset CSS puede tener algunas desventajas, sobre todo para los nefitos: tendrn que recordar constantemente que estn utilizando dicha hoja de estilos y deben tener en cuenta cmo afectar a los distintos elementos del sitio web. Si estamos aplicando la hoja de reset a todo el sitio, algunos de sus efectos pueden resultar sorprendentes, sobre todo con elementos con los que no estamos especialmente familiarizados. Por ejemplo, un archivo CSS de reset elimina los mrgenes externos e internos de la mayora de los elementos de los formularios, y cuando utilizan por primera vez con campos de formulario, muchos se preguntan por qu los botones, campos de texto y otros elementos aparecen de esa forma.

Breve historia de las tcnicas de presentacin en pantalla para la WebAunque aqu vas a aprender a crear un diseo visual de pgina utilizando estilos CSS, debes saber que esto no ha sido siempre la tcnica normal. Cuando se empez con el diseo web a mediados de los 90, el nico mtodo que se poda emplear para crear estructuras visuales complejas, como por ejemplo la presentacin en varias columnas, consista en emplear el elemento tabla (). La tabla HTML estaba pensada inicialmente para mostrar datos de manera estructurada, en filas, columnas y celdas. Sin embargo los diseadores empezaron a utilizar este elemento como base para las estructuras visuales de las pginas. En aquel momento esa tcnica estaba plenamente justificada: las tablas era lo nico que tenan para generar el tipo de diseos que se necesitaban y, adems, eran un recurso extremadamente flexible.A partir de aqu, empezaron a utilizarse tcnicas como el anidamiento de tablas, es decir, crear tablas dentro de celdas de otras tablas de mayor tamao. Por ejemplo, el cdigo para una pgina normal de dos columnas poda empezar creando una tabla de tres filas y dos columnas:

Una tabla web de tres filas y dos columnas.Puesto que la primera fila se iba a convertir en la seccin de cabedera, no interesara que quedase dividida en dos columnas. La etiqueta HTML permite fusionar las dos celdas:

Una tabla cuya primera fila consta de dos celdas fusionadas en una sola.En esta primera fila el diseador, por ejemplo poda intentar insertar una seccin independiente de tres columnas, para mostrar un logo y otros elementos, como una barra de navegacin o un campo para pedir credenciales de usuario. Para aadir esta seccin, el diseador tena que crear una nueva tabla (esta vez con una fila de tres columnas) dentro de la primera fila de la tabla inicial:

Una nueva tabla, con una fila y tres columnas, anidada dentro de la primera fila de la tabla original.Para generar esta estructura de tabla, el diseador tena que configurar la tabla inicial con una anchura y altura fijas. Supongamos que el diseador tambin quisiera un borde negro fino para todos los elementos. La propiedad border de las tablas HTML es muy bsica no nos permite aadir colores. Una solucin frecuente consista en insertar la tabla actual dentro de otra, que consista simplemente en una nica celda con el fondo en color negro. Al modificar el margen interior y el color de fondo, y fusionar otras celdas ms, el diseador poda as crear una estructura visual basada en tablas con un cierto estilo.

Tpica plantilla para una estructura basada en tablas tal y como se muestra en un navegador.Si quieres practicar un poco con tablas en tu editor, puedes encontrar un ejemplo en la carpeta HTML5_03lessons el archivo 03_table.html.CSS ha sustituido ya el empleo de tablas para organizar las pginas, por lo que los elementos de tabla de HTML van regresando, poco a poco, a su funcin original, que es la de mostrar datos estructurados, y abandonan su papel como armazn visual de las pginas. Seguramente podrs seguir encontrando numerosos ejemplos de este tipo de estructuras en la web, pero en este libro no vas a aprender a crearlas, sino que vas a aprender los conceptos bsicos de CSS que nos permiten obtener los mismos resultados.Introduccin a las distintas opciones de presentacin de pginasAntes de la estructura visual de nuestras pginas web tenemos que decidir unas cuantas cosas. Lo primero es qu anchura va a tener. Hay dos categoras principales de estructuras en base a su anchura: las deanchura fijay las deancho variable. En las estructuras de ancho fijo todos los elementos de la pgina se anidan dentro de un contenedor que tiene un ancho explcito (en este ejemplo utilizamos el valor de 960 pixels, pero se suele utilizar tambin la unidad de medidaem). La anchura fija es una solucin muy cmoda para el diseador ya que permite ubicar con precisin los distintos elementos (cabeceras, barras laterales y pies de pgina). Adems aporta un esqueleto robusto para otros elementos, como la anchura de prrafo o el posicionamiento de imgenes cuando stas aparecen en gran nmero (por ejemplo en sitios web de catlogos de producto).

Las estructuras de ancho fijo indican explcitamente la anchura y ocupan un espacio definido dentro de la pgina web.Las estructuras flexibles se llaman as porque estn pensadas para adaptarse a la anchura de la ventana del navegador en cualquier momento. Este tipo de disposiciones es til cuando los usuarios acceden desde pantallas con resoluciones muy variadas, lo que hace imposible elegir un ancho fijo que ofrezca el mismo aspecto en todas ellas. Una estructura flexible bien diseada es capaz de ajustarse automticamente al tamao de ventana del navegador.

Las estructuras visuales flexibles se reajustan al cambiar el tamao de la ventana del navegador.Estas estructuras son adecuadas para la web porque permiten el reposicionamiento en pantalla de textos e imgenes. Puesto que los dispositivos mviles suponen actualmente una proporcin importante de los navegadores en uso en el mercado, las estructuras flexibles por lo general se prefieren para ofrecer una mejor experiencia en este nuevo tipo de interfaces frente a las estructuras de ancho fijo, que habitualmente tienen problemas por falta de espacio (sobre todo en telfonos mviles).Las estructuras de ancho variable son ms difciles de disear y obligan al creador a resolver una serie de asuntos adicionales. Por ello, en esta leccin vamos a empezar por crear una estructura de anchura fija.El elemento : creacin de una estructura CSS de dos columnas con anchura fijaEn esta prctica vamos a crear una estructura visual de anchura fija con dos columnas. Para empezar vamos a trabajar con una pgina sencilla que ya hemos preparado para ti. Esta pgina emplea una serie de elementos para generar su estructura de base. Podemos considerar al elemento como un contenedor genrico en el que podemos poner elementos relacionados entre s de forma lgica. La apertura y cierre de etiquetas suele hacerse rodeando a otros elementos de la pgina, de forma que dichos elementos quedan anidados dentro del contenedor. Puedes tener en la misma pgina todos los elementos que consideres necesarios y con frecuencia se utilizan para crear el armazn visual. Un elemento suele llevar un atributo ID (con lo que adquiere un nombre explcito dentro de la pgina) o bien pertenecer a una clase CSS, utilizndose ambos como medio para aplicar al contenedor uno o ms estilos CSS. El empleo de elementos facilita a otras personas la identificacin de las diversas secciones en que se subdivide la pgina y tambin nos ayuda a controlar y aplicar estilos en cada una de ellas.En esta prctica vamos a utilizar el elemento div con identificadores ID de CSS.1En el editor de textos, desde el men Archivo- Abrir, ve a la carpetaHTML5_03lessonsy selecciona el archivo03_layoutstart.htmly pulsa Abrir2Guarda el archivo en el disco con el nombre03_layoutwork.html. As conservars el archivo original como copia de seguridad. Esta pgina contiene una serie de elementos HTML con algn contenido que queremos mostrar en pantalla en ciertas posiciones. Analiza el cdigo de la pgina para tratar de entender cmo se ha creado. Hemos incorporado algunos comentarios que te orientarn.La estructura de la pgina te la entregamos prediseada. A lo largo de esta prctica vamos a ver en detalle cmo funciona. El primer paso consiste en saber cul es la funcin de la etiqueta y el papel tan importante que representa en la organizacin visual de las pginas con CSS.3En el editor, encuentra la lnea . Es el comienzo de una seccin de la pgina en donde se anidan el resto de elementos. Por s sola, una etiqueta no hace nada, que es algo que diferencia a esta etiqueta de las otras, ya que los dems elementos HTML, como los prrafos () o las listas (

,

, ), ejercen diversos efectos sobre sus contenidos.La etiqueta as como los prrafos y listas, entre otros, son elementosde bloque.Los elementos de bloque generalmente se insertan en las pginas en la lnea siguiente al elemento previo. La etiqueta div suele asociarse bien con una clase CSS o con un ID, y con ello ya podemos aplicarles reglas individualizadas para controlar su aspecto. Antes de hacer esto vamos a echar un vistazo a la pgina tal y como se ve en el original.4Abre la pgina en el navegador. El archivoreset.css con el que hemos estado trabajando antes es el que hace que todos los elementos de la pgina aparezcan pegados unos a otros.

Esta pgina incluye una serie de secciones div y los estilos aplicables a los elementos HTML se han reseteado.Para ver cmo responden las etiquetas div vamos a aplicar estilo al elemento con el ID wrap de forma que tenga ancho fijo. Cierra el navegador y vuelve al editor de texto.5Encuentra la etiqueta que hemos aadido al documento. Inserta una regla de estilo para el ID llamado wrap. El siguiente cdigo (destacado en rojo) es lo que tienes que escribir:

#wrap { background-color:#E0B3B9; }

Guarda el archivo y vuelve a abrir la pgina en el navegador. El div wrap incluye dentro a todos los dems elementos de la pgina, como se puede ver ahora que le hemos puesto un fondo de color morado. En este momento el div se extiende para cubrir toda la anchura de la pantalla. Es una presentacin muy bsica, que sigue el modelo de ancho variable. Si cambias el tamao de la ventana, vers que el texto se reorganiza. Ahora vamos a declarar una anchura fija para el div wrap.6En el editor de texto aade estas dos lneas de cdigo (destacadas en rojo) a tu estilo #wrap:#wrap { background-color:#E0B3B9; width:960px; border:thin solid black;}Guarda la pgina y vuelve a visualizarla en el navegador. Ahora el div wrap ocupa 960 pixels de la pgina.

El div wrap ahora tiene una anchura de 960 pixels y un borde fino de color negro alrededor.Tambin hemos cambiado el borde, para mostrar mejor los lmites del div wrap. Resize your browser window again. The text no longer reflows, and if your browser window is narrower than 960 pixels, your content is cropped. When the browser window is wider than 960 pixels, the box defined by the wrap div is aligned to the left. There is a simple way to position this div so it will always be centered in the browser window.7Vuelve al editor y aade esta lnea de cdigo marcada en rojo:#wrap { background-color:#E0B3B9; width:960px; border:thin solid black; margin:0 auto;}Es una regla abreviada para el margen. El valor 0 define los mrgenes superior e inferior del div wrap, y el valor auto indica los mrgenes derecho e izquierdo. El valor auto calcula automticamente un margen igual a ambos lados del div wrap y de esta manera el cuadro queda centrado en pantalla (y permanece centrado aunque cambiemos el tamao de la ventana).Guarda el archivo y visualzalo de nuevo en el navegador, para ver cmo funciona la regla abreviada. Cierra el navegador y vuelve al editor. Ahora vamos a trabajar con otros elementos div pero antes tenemos que aplicar un estilo bsico a la cabecera.8En el editor de textos, inserta una imagen dentro del div llamado masthead en este caso es el sitio donde pondremos el logo. Para empezar vamos a hacer que sea la imagen quien defina la altura del header aadiendo este cdigo para insertar el archivo de imagen del logo que tenemos en la carpetaHTML5_03lessons.

La etiqueta div no lleva estilo, aunque la altura del div header viene definida por la altura de la imagen inserta dentro. El color del rea donde se ha insertado es el mismo morado que corresponde al color de fondo declarado antes para el div que sirve de encuadre (wrap). Si definimos otro color de fondo para nuestro div masthead lo veremos en pantalla.9Debajo de las reglas de #wrap, aade el siguiente cdigo que se aplicar a masthead:#masthead { background-color:#FFF; }Guarda el archivo y mustralo en el navegador. Ahora todo el div masthead aparece con el fondo de color blanco, ya que se superpone al color del div wrap.

La seccin masthead ahora tiene un logo y un color de fondo.10La seccin de navegacin va a exigir un trabajo ms avanzado, iremos con ello ms adelante en esta misma seccin. De momento vamos a declarar unas cuantas reglas de estilo bsicas para definir esta seccin en la pgina. Pon el siguiente selector y sus reglas debajo de la regla #masthead:#mainnav { background-color:#666; height:40px }11Guarda la pgina y visualzala en el navegador.

La seccin mainnav tiene ahora color de fondo y una altura definida.Estamos aplicando estilos a la pgina empezando por arriba y bajando hacia el final, y ya hemos llegado a la seccin interna que contiene la barra lateral y el contenido. Vamos a ver cmo se crean columnas para su colocacin mediantedivs. La actual especificacin CSS no tiene un elemento columna. Las columnas como tales son divs con estilo que normalmente son ms altas que anchas. Para ver cmo se consiguen representar en pantalla, tenemos que entender antes el concepto de la propiedad float de CSS.

La propiedad float CSSLa propiedad float en CSS hace posible que un texto pueda escribirse alrededor de una imagen. Este estilo ha sido tomado del diseo de imprenta, donde a este efecto se le llama justificacin del texto. CSS consigue el mismo efecto haciendo que los elementos que siguen a un elemento flotante puedan rodearlo, cambiando su posicin relativa con respecto a l. Este comportamiento tambin nos sirve para crear columnas en una pgina.En la imagen de la izquierda hay un grfico anidado dentro de un prrafo. El grfico ocupa un espacio vertical completo y el texto posterior se empieza a escribir a partir de su esquina inferior derecha, ya que no se ha aplicado aqu la propiedad float. En la imagen de la derecha, los elementos son los mismos, pero hemos aplicado la regla float: right al grfico. El grfico se desplaza a la derecha todo lo que puede y el texto se escribe a su izquierda a partir del primer punto disponible de su contenedor (en este caso, la esquina superior izquierda del div contenedor).

Una imagen con su emplazamiento por defecto con HTML (izquierda) y la misma imagen flotando hacia la derecha.El valor float se puede tambin declarar como left. En el ejemplo anterior, la imagen pasara al lado izquierdo del div contenedor, y el texto se empezara llenando el lado derecho restante.Los nicos valores posibles para float son left, right y none. No se puede centrar un objeto utilizando esta propiedad.Si queremos tener mltiples elementos flotantes dentro del mismo contenedor, el resultado es que se alinean entre s. Este comportamiento se suele utilizar en ciertas funciones habituales de las pginas web, como por ejemplo los mens horizontales o las galeras de imgenes.Es fundamental conocer cmo interactan mltiples elementos flotantes unos con otros a fin de utilizarlos correctamente. Veamos este ejemplo: son seis imgenes dentro de un div de 360 pixels de ancho. Cada imagen tiene una anchura de 50 pixels y hay 10 pixels de margen (5 a la derecha y otros 5 a la izquierda). Al sumar los valores podemos ver que 6 50 son 300 pixels par alas imgenes, y 6 10 suman 60 pixels de margen. Por tanto, las imgenes junto con sus mrgenes nos caben dentro del div, que tiene una anchura total de 360 pixels.

Si hemos declarado una anchura explcita para el contenedor, al aadir una nueva imagen hacemos que se posicione en la fila siguiente:

Esto nos puede servir, por ejemplo, para crear una galera de imgenes en miniatura, pero no nos vale para un men!En la prctica siguiente vamos como usar la propiedad float para crear una estructura de dos columnas.Creacin de columnas con la propiedad floatVamos a aplicar la propiedad float a los divs de contenidos sidebar y main para ver cmo les afecta.1Aade el siguiente selector y las reglas de estilo debajo de la regla #mainnav: #sidebar { float:right; width:300px; background-color:#CCC; }Guarda la pgina y mustrala en el navegador. La pgina aparece rota. Ahora vas a ver qu es lo que causa que la pgina salga rota como en este caso, ya que este efecto ensea cmo funciona la propiedad float.Aunque la pgina parece rota, los divs estn realmente funcionando tal y como debe ser: cuando convertimos en flotante un elemento (en este caso el div sidebar), queda eliminado del flujo normal del HTML. Es por eso que la barra lateral se extiende por todo el contenedor.La barra lateral queda flotando, pero se superpone sobre los lmites de otros elementos de la pgina.Ahora vamos a declarar como flotante al otro div, hacia el lado izquierdo, y vamos a ver cmo afecta eso a nuestra pgina. Vuelve al editor.2Aade este selector y las reglas de estilo debajo de la regla #sidebar: #main { width:600px; float:left; background-color:#ADA446; }3Guarda el archivo y vuelve a mostrar la pgina en el navegador.El div main flota hacia la izquierda, pero el footer sube a la parte superior siguiendo el curso o flujo de restitucin de la pgina.Al hacer flotar este div hacia la izquierda hemos resuelto el problema de que parte de su contenido apareciera debajo de sidebar; a pesar de que por la cantidad de contenido que tiene el div main parte de l se sale del propio contenedor. Tambin vemos que tenemos otro problema con el elemento footer: debera aparecer en la parte inferior de la pgina pero no es as.Para obligar al div footer a ponerse en la parte inferior de la pgina le vamos a asignar una nueva propiedad llamada clear.

La propiedad clearCuando aadimos la propiedad CSS clear a un objeto, le estamos indicando una regla que dice no admito elementos flotantes a mi lado. Podemos especificar si queremos que no haya elementos flotantes a la izquierda, a la derecha o en ambos lados. En el caso del pie de pgina, queremos eliminarlos de ambos lados.1Aade este nuevo selector y sus reglas debajo de las reglas de #main:#footer { clear:left; background-color:#BA2B22; }2Guarda el archivo y visualzalo en el navegador. Ahora el pie de pgina queda en la parte inferior del div main. Lo que hace la regla clear:left es impedir la presencia de elementos flotantes a su izquierda. El div main es flotante, por lo que el pie se mueve a la siguiente posicin disponible. Cierra el navegador y vuelve al editor.El problema es que el div sidebar siguen superpuesto al pie y aunque podemos cambiar la regla a clear:right y con ello lo evitaramos, una forma ms segura de resolver esta situacin es asegurarnos de que no se van a colocar objetos flotantes ni a su derecha ni a su izquierda.3Cambia el valor de la propiedad clear as:clear:both;De esta forma nos aseguramos de que no habr elementos flotantes en ambos lados del pie de pgina.4Guarda el archivo y vuelve a mostrarlo en el navegador. Vers que no cambia con respecto al paso 3 pero el pie de pgina ahora est mejor preparado para cambios futuros en el contenido.

Creacin de un men de navegacin basado en listas con floatAhora que has aprendido los conceptos bsicos de float y clear, volvamos a la seccin de la barra de navegacin y vamos a aadir un men sencillo basado en una lista no ordenada (es decir, que sus lneas no llevan numeracin, sino vietas o signos). Los elementos de la lista dentro de este men tendrn que ser flotantes para modificar la presentacin vertical por defecto de las listas. Los mens de navegacin CSS se utilizan mucho en el diseo basado en estndares porque se pueden actualizar y modificar de manera mu sencilla, y porque se basan en textos ( y no en imgenes), lo que mejora la accesibilidad en dispositivos como los lectores de pantalla, e incluso ayudan a mejorar el posicionamiento de nuestras pginas en los buscadores.1Desde el editor de textos, busca el div mainnav y adele la siguiente lista no ordenada y estas lneas:

• Home
• Our Company
• Policies and Procedures
• Document Repository
• News & Events

Los elementos de la lista son enlaces a pginas que todava no existen. Pero necesitamos crear estos enlaces para que se apliquen correctamente los estilos que vamos a declarar ahora.2Guarda el archivo y visualzalo en el navegador.

La lista aparece en la posicin vertical por defecto y se superpone a la barra lateral.Fjate que la pgina aparece otra vez como rota. Esto se debe a que la lista se est superponiendo a la barra lateral flotante. Adems la lista no tiene los puntos (vietas) indicadores. Recuerda que nuestra pgina est asociada a una hoja de estilo CSS de reset y una de sus reglas declara la propiedad list-style:none, que elimina los puntos indicadores en las listas. En el caso de este ejemplo, la falta de puntos es deseable, ya que vamos a utilizar la lista como men de navegacin.3Vuelve al editor y localiza la regla #mainnav. Aade una nueva regla entre sta y la regla de la barra lateral pulsando Intro unas cuantas veces e insertando el cdigo siguiente: #mainnav li { float:left; }Fjate que en este paso estamos creando una nueva regla justo despus de #mainnav. Aunque podramos haber insertado la regla al final de la hoja de estilos, las buenas prcticas recomiendan que se pongan juntas las reglas que tienen relacin entre s para que el cdigo est ms organizado y sea ms fcil de mantener.Es un nuevo tipo de regla CSS llamadaselector de contexto; se aplicaexclusivamentea los elementos de lista que hay dentro del div mainnav. Si definisemos una nueva regla para aplicarla a los elementos de lista (en general), afectara a todos los elementos de lista de nuestra pgina, lo que no nos valdra para nuestro ejemplo, ya que queremos organizar visualmente solo esta lista.4Guarda la pgina y visualzala en el navegador. Todos los elementos aparecen ahora colocados en horizontal. Los enlaces casi no se ven porque hay muy poco contraste entre el enlace que se escribe en color azul oscuro y el gris oscuro del fondo de la seccin mainnav, pero lo vamos a resolver aadiendo unas cuantas reglas de estilo ms.

Al declarar los elementos de la lista como flotantes, se colocan en sentido horizontal.5Vuelve al editor y aade este cdigo a la regla #mainnav li:#mainnav li { float:left; width:170px; height:40px; background-color:#CCC; text-align:center; border-left:1px black solid; border-right:1px black solid;}En este cdigo hemos hecho estos cambios: hemos definido el recuadro alrededor de cada elemento de la lista con una anchura de 170 pixels y una altura de 40 pixels. Hemos aadido un color de fondo, hemos alineado cada elemento al centro del recuadro y adems, se dibujarn en pantalla los bordes verticales de cada recuadro con un trazo negro de 1 pixel. Guarda el archivo y visualzalo en el navegador.Al declarar la altura y la anchura del recuadro, el texto se pone de forma natural en la parte superior. Lamentablemente, aunque existe la propiedad text-align:center que nos permite centrar el texto en la vertical, no tenemos una forma fcil de centrar los objetosen la verticalcon CSS. En este caso vamos a utilizar la propiedad line-height para mover hacia abajo el texto del interior.6Debajo de la declaracin de border-right, aade esta lnea de cdigo:line-height:40px;7Guarda el archivo y mustralo en el navegador, El texto aparece ahora centrado dentro del recuadro. Conviene notar que podemos tener problemas si en un futuro cambisemos el texto de los elementos de la navegacin, ya que tanto el valor de line-height como el tamao del propio contenedor se basan en el tamao de la fuente. Si cambisemos el tamao de la fuente o la altura de la seccin nav, habra que volver a ajustarlo todo para compensar los desplazamientos.

Aadiendo el valor line-height a los elementos de la lista se posicionan verticalmente dentro de la barra de navegacin.

Aadir estilos para el textoAntes de seguir con nuestra estructura visual vamos a importar algunos estilos de texto basados en los que hemos creado en la Leccin 2. Hasta aqu hemos aadido los estilos dentro de una hoja de estilos interna en vez de hacerlo sobre una externa. Cuando estamos diseando la estructura de las pginas, el empleo de hojas de estilo internas es una cuestin de comodidad: resulta ms sencillo para crear y modificar reglas si las tenemos dentro de la pgina y podemos llegar a ellas desplazando la ventana que si las tenemos en un archivo externo. De momento vamos a asociar una hoja de estilos externa que aade reglas de base para elementos como ttulos, listas y prrafos.1En la parte inicial del archivo HTML busca la etiqueta de la hoja de estilosreset.css. Para aadir otra hoja de estilos externa, selecciona esta lnea y pulsa Ctrl + C para copiarla. En la lnea siguiente pulsa Ctrl + V para pegarla. Ahora cambia el nombre de archivo reset.css por el siguiente base.css:

2Guarda el archivo y visualzalo en el navegador para ver cmo afectan estos nuevos valores a nuestra pgina. Ahora los titulares y el texto del cuerpo se escriben utilizando el tipo de letra MS Trebuchet y tambin se han aplicado algunos otros estilos.La pgina utiliza ahora una hoja de estilos externa para los elementos de texto.3Regresa al editor y selecciona el men Archivo Abrir. En la ventana que aparece, ve a la carpeta HTML5_03lessons, selecciona el archivo base.css y pulsa Abrir. Revisa los estilos que incluye este archivo CSS. Los conceptos bsicos para los tipos de letra y tamaos ya los vimos en la Leccin2. Mantn abierto el archivo, porque lo vamos a modificar dentro de un momento.Existen algunas propiedades CSS adicionales aplicables a las fuentes, como font-weight, text-transform o letter-spacing. Si quieres ms informacin e instrucciones paso a paso para utilizar tcnicas avanzadas de estilos para texto, puedes leer la Leccin 3 Formateo de Textos con CSS en el libro HTML5 Digital Classroom.

Efecto de los mrgenes internos y externos en una estructura de anchura fijaEn esta seccin vamos a separar las secciones de texto de nuestra pgina (que en este momento tienen mrgenes de cero pixels, por efecto de la hoja de estilos de reset). Vamos a ver ahora algunas estrategias para controlar la estructura visual de la pgina. El objetivo de esta prctica no consiste en mostrar un mtodo nico de organizacin con CSS, sino en conocer las diferentes opciones posibles, lo que te ayudar en futuros proyectos a la hora de decidir qu mtodo es el ms adecuado en cada caso.En este primer ejercicio vamos a aadir un margen interior (padding) al elemento sidebar.1En el editor de texto, abre el archivo03_layoutwork.htmly visualiza la pantalla en el navegador. Vers que el texto de la barra lateral est pegado al borde, quedara mejor si estuviera un poco separado.

El texto aparece pegado al borde izquierdo de la barra lateral.El ancho de esta barra lateral est declarado como 300 pixels. Bsicamente podemos separar el texto del borde izquierdo de dos manera: la primera consiste en utilizar el valor de margen interior o padding del contenedor y la segunda, utilizar el margen externo de los objetos contenidos. Vamos a ver ahora los pros y contras de ambas tcnicas, empezando por el padding.2Vuelve al editor, localiza la regla para el sidebar en el cdigo CSS y aade esta lnea:#sidebar { float:right; width:300px; background-color:#CCC;padding:0px 20px 0px 20px;}Es una regla abreviada y los valores se leen imaginando el curso de las manillas del reloj. El primer valor (0px) es la separacin o margen interior con respecto al borde superior. El segundo valor (20px) corresponde a la separacin con respecto al margen derecho. El tercero (0px) es la separacin con respecto al borde inferior y el ultimo (20px) es el margen interior de separacin aplicable al borde izquierdo. Guarda la pgina y visualzala en el navegador.

Aadiendo un margen interior (padding) de 20 pixels a la derecha e izquierda de la barra lateral el ancho total del contenedor aumenta en 40 pixels.Al aadir 20 pixels de espacio interior a la derecha e izquierda del div sidebar, aumentamos en 40 pixels la anchura de la columna. En efecto, vemos que la columna ahora es ms ancha, justo esos 40 pixels, es decir, que ahora mide 340 pixels: 300 vienen de la propiedad width de la regla CSS correspondiente y otros 40 ms del padding que acabamos de aadirle. Como veremos ahora, es sencillo de hacer pero nos genera otro tipo de problemas que podremos comprobar en seguida.3Vuelve al editor. Aade una cantidad de margen interno al div main porque tambin necesitamos separa el texto del borde en esa parte de la pgina.Encuentra la regla #main y aade el siguiente valor de padding:#main { width:600px; float:left; background-color:#ADA446;padding:0px 20px 0px 20px;}Guarda el archivo y mustralo en el navegador: aparece un problema nuevo. La anchura total de las dos columnas, ahora que hemos aadido el padding, es mayor que la del contenedor donde estn anidadas. Podemos ver que el div main se ha desplazado hasta el nico sitio donde puede desplegarse por completo, que es debajo de sidebar.Podemos resolver esto de varias formas: podemos aumentar la anchura total del div wrap, podemos reducir el ancho de sidebar o de main (o ambos), o tambin podemos reducir el valor del margen interno. Todos estos mtodos se basan en el uso de padding y existe un mtodo alternativo que nos permite separar el texto del borde de las columnas y que no utiliza el padding en absoluto. Ahora lo vemos.4Vuelve al editor y localiza las reglas de margen interno que has aadido en los pasos 2 y 3. Seleccinalas y elimnalas. Vamos a conseguir un efecto equivalente pero aadiendo reglas de margen a los elementos de texto dentro de las columnas en el paso siguiente.5Debajo de la regla #footer del cdigo CSS, aade esta regla nueva:p, h1, h2, h3 { margin-left:20px; margin-right:20px;}Esta regla aade un margen de 20 pixels a la derecha y la izquierda de todos los prrafos y ttulos de la pgina. Guarda el archivo y visualzalo en el navegador.

Si aadimos mrgenes a los elementos dentro de la barra lateral, aumenta la separacin con respecto al borde pero no se incrementa el tamao del contenedor.Como veamos en el ejemplo anterior con el margen interno, el resultado es un espacio adicional entre el texto y el borde de las columnas. La diferencia esencial es que cuando aadimos margen externo a los elementos de texto, la anchura de las columnas no se ve modificada. Esta es una gran ventaja, puesto que el ancho de las columnas es un valor absoluto y ya no se rompe la distribucin en pantalla con tanta facilidad como cuando utilizamos el valor de padding.Pero esta tcnica tambin tiene sus desventajas, puesto que las reglas que acabamos de crear se van a aplicar atodoslos prrafos y ttulos de nivel 1, 2 y 3 de la pgina. Por ejemplo, vers que el texto del pie de pgina se ha desplazado tambin 20 pixels a la derecha porque su contenido es un prrafo. En el caso de que solo queramos aplicar el margen a los elementos dentro de los divs sidebar y main, nos vendr muy bien el selector de contexto que ya hemos utilizado antes.6Vuelve al editor y borra las reglas para margin-left y margin-right que has aadido en el paso 5 (pero deja la regla tal cual). Aade ahora este grupo de reglas:p, h1, h2, h3 {}#sidebar p, #sidebar h2, #sidebar h3, #main p, #main h1, #main h2, #main h3 { margin-left:20px; margin-right:20px;}Se trata de una regla CSS abreviada que agrupa los estilos para los elementos de prrafo, heading 1, heading 2 y heading 3 que puedan existir en los elementos cuyo ID sea sidebar y main, que, como recordars de la Leccin 2, se indica precediendo el nombre de ID con el smbolo de la almohadilla (#). A todos estos elementos se les aplicarn mrgenes de 20 pixels a la derecha y la izquierda, lo que equivale a restarles un total de 40 pixels de anchura para su despliegue en pantalla.7Guarda el archivo y brelo con el navegador. Prcticamente no veremos cambios excepto en el pie de pgina, que queda de nuevo totalmente pegado al lado izquierdo. Puedes pensar que el cambio es poca cosa, pero ahora nuestro archivo est preparado para cambios futuros. Cierra el navegador y vuelve al editor.Este mtodo exige algo ms de atencin a los detalles que el mtodo basado en el margen interno. Por ejemplo, si queremos insertar nuevos elementos dentro de un div, tendremos que crear reglas nuevas para ellos (por ejemplo una imagen o una tabla se veran pegados a la izquierda, otra vez).Tambin puede que desees que alguno de los elementos tenga un margen distinto. Por ejemplo, que quieras indentar los prrafos dentro de la columna main hacia la derecha. En tal caso, habr que aadir otra regla expresamente para los elementos p del div #main, como se indica en el paso siguiente.8Aade una nueva regla justo debajo de la regla anterior, donde aparecan todos los elementos:#sidebar p, #sidebar h2, #sidebar h3, #main p, #main h1, #main h2, #main h3{ margin-left:20px; margin-right:20px;}#main p { margin-left:30px;}9Esta regla sobrescribe parcialmente la que habas creado en el paso 6. Guarda el archivo y visualzalo en el navegador. Los prrafos dentro de la columna main ahora tienen un margen a la izquierda de 30 pixels, y en contraste con el resto de los elementos, aparecen indentados.

Los prrafos del div main tienen reglas explcitas con un margen de 30 pixels.Excepto en el caso de los cambios que hemos hecho en esta prctica, todos los dems mrgenes internos y externos de los elementos se han dejado en cero, en aplicacin de la hoja de estilo de reset. Para aumentar la separacin del resto de elementos podemos utilizar el grupo de reglas que hemos creado hace un momento.10Encuentra la regla vaca para los elementos p, h1, h2 y h3 en tu hoja de estilos. Modifica la regla as:p, h1, h2, h3 { margin-bottom:20px;}Guarda la pgina y brela con el navegador. Ahora, casi todos los elementos se separan un poco ms unos de otros, al aadirse espacio a sus bordes inferiores. Podemos seguir afinando todos estos valores para mejorar el aspecto de la pgina, por ejemplo insertando un margen superior al ttulo 2 de la barra lateral, lo que podemos hacer con el cdigo del paso siguiente:11En el editor de texto, aade esta regla debajo del grupo de reglas para #main y #sidebar:#sidebar h2 { margin-top:15px;}Guarda de nuevo el archivo y mustralo en el navegador. Ahora el ttulo h2 de la barra lateral queda ms separado del borde superior del contenedor.

Despus de aplicar un margen superior de 15 pixels al ttulo h2 de la barra lateral.

Repaso al uso de mrgenes internos y externosEn esta leccin hemos visto dos mtodos para separar los elementos dentro de una pgina. El primero consiste en aadir margen interno (padding) al elemento div contenedor. En este caso la ventaja es que todos los elementos dentro de este div se ven afectados al mismo tiempo, es una solucin rpida y eficiente. Su desventaja es que aumenta la anchura total del propio contenedor. Para compensar esta expansin, tenemos que dejar algo de espacio adicional a los lados. Este comportamiento puede generar cierta confusin y provocar que las pginas se restituyan incorrectamente si no tenemos cuidado.El segundo mtodo consiste en aadir mrgenes externos a los elementos que estn dentro del propio div. Su desventaja es que necesitamos ms cdigo y hay que prestar atencin a los detalles, tenemos que ir viendo cmo se posicionan los elementos individualmente. Su ventaja es que el posicionamiento de la columna es ms predecible, puesto que solo tenemos que tener en cuenta una anchura total.Finalmente, conviene destacar que lo habitual es aplicar una combinacin de ambos mtodos en cualquier estructura de presentacin. Por tanto, debes conocer bien el comportamiento y los efectos de cada uno de ellos.Aplicar una imagen de fondo al pie de pginaHasta ahora nuestra estructura de pgina muestra los colores de fondo que hemos declarado a los elementos div. En esta prctica vas a aprender a insertar imgenes. Para ello empezaremos por aadir una imagen de fondo al pie de pgina mediante CSS.1Localiza el div #footer y sustituye todo el contenido de texto que hay dentro por este que aparece aqu :

Copyright Worldwide Apparel 2011 All content on this site is confidential and should not be shared with anyone outside of Worldwide Apparel.

2Guarda la pgina y brela en el navegador. A cada uno de los prrafos se le aplican las reglas de prrafo descritas en la hoja de estilos. Ahora vamos a aadirle una imagen de fondo a todo el contenedor div. Es una imagen de 960 pixels de ancho y 128 de alto.3En la hoja de estilos interna, encuentra la regla para el pie de pgina (#footer). Aade una nueva regla para aplicar una imagen de fondo indicando un archivo de la carpeta de imgenes de tu equipo:#footer { clear:both; background-color:#BA2B22;background-image:url(images/footer_background.jpg); background-repeat:no-repeat;}

Guarda la pgina y vuelve a mostrarla en el navegador.El pie de pgina tiene ahora una imagen de fondo por aplicacin de una nueva regla CSS.La imagen de fondo ahora aparece detrs de los textos. Fjate en la propiedad background-repeat del cdigo anterior. CSS, por defecto, considera a las imgenes de fondo como baldosas que se van aadiendo sin lmite hasta llenar todo el espacio del objeto al que pertenecen. Al indicar el valor no-repeat nos aseguramos que la imagen solo se muestra una vez. Las dimensiones del pie de pgina deben ser tales que nos permitan ver la imagen correctamente, tal y como veremos en el paso siguiente.4Modifica la regla para el pie de pgina aadiendo las lneas en rojo:#footer { clear:both; background-color:#BA2B22; background-image:url(images/footer_background.jpg); background-repeat:no-repeat; width:960px;height:128px;}Guarda el archivo y vuelve a mostrar la pgina en el navegador. Ahora el tamao de la zona de pie de pgina coincide con el tamao de la foto. El paso siguiente consiste en ajustar los estilos del texto que va dentro, separndolos.5En el editor de texto, encuentra la regla #footer y justo debajo aade esta otra regla para prrafos, que se aplicar nicamente a los prrafos del footer:#footer p {margin:10px 0px 0px 20px;width:280px;font-family:Verdana, Geneva, sans-serif;font-size:0.689em;}Esta regla aade un margen superior de 10 pixels y margen izquierdo de 20 pixels a ambos prrafos del pie. Al definir la anchura de los prrafos podemos forzar un salto de lnea en el punto aproximado que nos interesa: dentro del espacio en blanco que nos deja la foto. Las propiedades font-family y font-size nos ayudarn a conseguir un efecto ms atractivo con un tipo de letra ms pequeo.6Guarda la pgina y visualzala en el navegador.

Los prrafos de texto del pie de pgina con los nuevos estilos.En la seccin anterior hemos visto cmo se utilizan los mrgenes internos y externos, es una tcnica muy habitual. Podramos haber aadido algo ms de espacio entre el primer prrafo y el borde superior del pie de pgina, pero al aumentar el margen superior en la regla #footer p estamos aadiendo espacio tambin al segundo prrafo. En este caso, lo conveniente es aadir margen interior al div footer tal y como se indica en el paso siguiente.7Aade la declaracin que aparece en rojo a la regla #footer:#footer {clear:both;background-color:#BA2B22;background-image:url(images/footer_background.jpg);background-repeat:no-repeat;width:960px;height:128px;padding-top:10px;}

Ajuste fino de la estructura visual de la pginaPodemos aplicar colores de fondo y/o bordes a los elementos principales de nuestra estructura en las primeras fases del diseo, lo que nos ayudar a ver mejor sus lmites. Despus, si no queremos conservarlos, podemos eliminarlos y la estructura seguir funcionando sin problemas. Ahora vamos a eliminar los colores de fondo de los divs del centro de la pgina, aadiremos algunas imgenes de fondo y mejoraremos algo el estilo de nuestra barra de navegacin.1Elimina toda la propiedad background-color en las siguientes 4 reglas de estilo: #wrap, #sidebar, #main y #footer. Guarda el archivo y visualzalo en el navegador.

Los mismos elementos estructurales una vez eliminados los colores de fondo.2Aunque nos vamos aproximando a un diseo de pgina unificado, an tenemos que hacer unas cuantas cosas ms. Vamos a empezar por poner un fondo de gradiente de color a la barra lateral. La mejor forma de hacerlo es mediante la insercin de una imagen de fondo.Vuelve al editor y aade estas declaraciones a la regla #sidebar:#sidebar {float:right;width:300px; background-image:url(images/sidebar_bg.png);background-repeat:repeat-x;}Como hicimos en la prctica anterior con el pie de pgina, ahora estamos aadiendo una imagen de fondo desde CSS a este elemento div. pero en este caso el valor de background-repeat ahora es repeat-x. Esto provoca que la imagen se repita en sentido horizontal (el eje X).3Aade tambin esta otra declaracin para aplicarla al borde Izquierdo de la barra. Nos va a ayudar a delimitar mejor la separacin con respecto al contenido del rea principal (main).#sidebar {float:right;width:300px; background-image:url(images/sidebar_bg.png); background-repeat:repeat-x; border-left: thin solid gray;}Guarda el archivo y mustralo en el navegador.

La barra lateral tiene ahora un gradiente de color como imagen de fondo y un borde en el lado izquierdo.4Otro problema de nuestra estructura es el logo dentro de la cabecera. En este momento est anidado y se presenta en pantalla pegado al borde del contenedor. Podemos separarlo un poco creando una regla especfica para imgenes dentro del div masthead. Encuentra la regla #masthead y adele esta lnea justo debajo.#masthead img {margin-left: 20px;}Se trata de un selector contextual igual que otros que hemos ido aadiendo a los ttulos y prrafos dentro de las columnas main y sidebar. En este caso, se trata de una declaracin para aadirle margen por la izquierda a todas las imgenes que puedan aparecer en el div masthead.Lo ltimo que nos quedara por hacer es mejorar la apariencia de la barra de navegacin. En este momento estamos empleando unos estilos muy rudimentarios. Ahora los vamos a mejorar para ponerla a la altura del resto de nuestra pgina y adems le vamos a aadir algo de interactividad.5Para mejorar la presencia visual de los enlaces dentro de la seccin mainnav vamos a aadir una regla explcita para los enlaces. Encuentra la regla #mainnav li y aade la siguiente regla justo debajo de ella:#mainnav ul li a {color:#ffffff;text-decoration: none;display:block;}La declaracin text-decoration elimina el subrayado del vnculo y le cambia el color a blanco. La declaracin display:block hace que estos elementos de navegacin llenen por complete todo el espacio de la barra de navegacin. Entenders mejor qu significa esto cuando creemos un efecto dinmico que se activar al pasar el ratn por encima, en el paso siguiente.Guarda el archivo y visualzalo de nuevo en el navegador.

La barra de navegacin con enlaces, despus de eliminar el subrayado6Cuando el usuario pasa el cursor por encima de los enlaces, sera interesante que cambiasen su apariencia, as sabe que se trata de vnculos y no de texto normal. Para ello podemos aprovechar una particularidad de los estilos que solo tienen los vnculos. Justo debajo de la regla #mainnav ul li a , aade esta otra:#mainnav ul li a:hover {background-color:#666666;color:#D2CD2F;}Los enlaces poseen una categora exclusiva llamadapseudoclases.Hay cuatro estilos asociados a los vnculos, que son a:link, a:visited, a:hover y a:active. No es obligatorio aplicar estilos a los cuatro, por ejemplo aqu hemos creado estilos para a:hover que modifican el aspecto de todos los enlaces de la barra de navegacin cuando tienen encima el cursor. La pseudoclase a:visited se aplica al vinculo despus de que el usuario ha pulsado sobre l, y la pseudoclase a:active modifica su aspecto cuando le estamos pulsando con el botn.7Guarda el archivo y mustralo en el navegador. Pasa el cursor por encima de los enlaces para ver los cambios. Es el resultado del estiloa:hover.

Al pasar el ratn sobre los enlaces de la barra de navegacin se dispara el estilo a:hover.Ya has completado las prcticas de esta leccin. Hemos visto la diferencia entre las estructuras basadas en tablas y en CSS. Adems has aprendido el uso de las propiedades float y clear para crear columnas dentro de la pgina. Tambin hemos visto las ventajas y desventajas del uso de mrgenes externos (margin) e internos (padding) a la hora de definir el aspecto de los objetos dentro de los contenedores.EL diseo de estructuras visuales de las pginas web es un tema muchsimo ms amplio, si tienes inters en conocer ms a fondo las tcnicas avanzadas para diseo de pginas Web, te recomiendo que leas el libro "HTML5 Digital Classroom" y ms concretamente, el captulo Leccin 5: Diseo avanzado con CSS.

Autoestudio1Para seguir practicando con mrgenes internos y externos, aade otros contenidos a la seccin main. Por ejemplo, puedes aadir un ttulo de nivel 3 y una lista no ordenada entre los dos prrafos:Quick Links

• New Employee Forms
• Flexible Spending Plans
• 401K paperwork
• Employee Discounts

2Despus de aadir este cdigo, utiliza los conocimientos adquiridos en esta leccin para experimentar con la colocacin de estos elementos dentro de la pgina.

RepasoPreguntas1En qu consiste un diseo de anchura fija y un diseo de ancho variable?. Qu ventajas y desventajas presentan cada uno de ellos?2Qu hace la propiedad float de CSS y cundo conviene utilizarla?3Tu compaero ha aadido un prrafo al div sidebar que ha creado. El prrafo est pegado al borde mismo de la barra lateral. Indcale dos tcnicas que puede emplear para separar un poco el prrafo con respecto a los bordes del contenedor

Respuestas1En un diseo de anchura fija, el contenedor primario tiene una anchura absoluta (declarada generalmente en pixels oems) . Una de las ventajas principales de este tipo de diseos es que es ms fiable a la hora de colocar los dems elementos. Su desventaja ms importante es que no altera su tamao al cambiar las dimensiones de la ventana del navegador, y algunas funciones como la reorganizacin de los textos, se pierden. Las estructuras de diseo de ancho variable modifican sus dimensiones dependiendo de la pantalla o dispositivo, pero suponen un trabajo ms complicado para el diseador.2La propiedad CSS float permite eliminar cualquier elemento dentro del flujo HTML por defecto y moverlo (o hacerlo flotar) pegndolo a la derecha o a la izquierda del contenedor donde est situado. Podemos utilizar la propiedad float cuando queremos que el texto se organice alrededor de imgenes, para crear mens de navegacin horizontales o utilizar diseos de pgina en columnas.3Tu compaero puede aadir un valor de margen interno (padding) a la barra lateral, lo que har que todos los contenidos se separen automticamente del borde. Tambin puede aadir una regla para los prrafos dentro del div y aplicar en ella unos valores de margen que separen los textos con respecto al borde. Y por supuesto, puede utilizar una combinacin de mrgenes internos y externos.