Portales de InformaciónCSS: 4. Modelo de cajas2009 - 2010
1. IntroEl modelo de cajas o "box model" es seguramente lacaracterística más importante del lenguaje de hojas de estilosCS...
1. IntroLas cajas de las páginas no son visibles a simple vista porqueinicialmente no muestran ningún color de fondo ni ni...
1. Intro
1. IntroLos navegadores crean y colocan las cajas de forma automática,pero CSS permite modificar todas sus características...
1. Intro
1. IntroLas partes que componen cada caja y su orden de visualizacióndesde el punto de vista del usuario son las siguiente...
1. IntroEl relleno y el margen son transparentes, por lo que:en el espacio ocupado por el relleno se muestra el color o im...
2. Anchura y alturaLa propiedad CSS que controla la anchura de los elementos sedenomina width.
2. Anchura y alturaLa propiedad width no admite valores negativos y los valores enporcentaje se calculan a partir de la an...
2. Anchura y alturaLa propiedad CSS que controla la altura de los elementos sedenomina height.Al igual que sucede con widt...
2. Anchura y alturaEl valor inherit indica que la altura del elemento se hereda de suelemento padre.El valor auto, que es ...
3. Margen y relleno (margin ypadding)CSS define cuatro propiedades para controlar cada uno de losmárgenes horizontales y v...
3. Margen y relleno (margin ypadding)Cada una de las propiedades establece la separación entre elborde lateral de la caja ...
3. Margen y relleno (margin ypadding)El siguiente ejemplo añade un margen izquierdo al segundopárrafo:
3. Margen y relleno (margin ypadding)Los márgenes verticales (margin-top y margin-bottom) sólo sepueden aplicar a los elem...
3. Margen y relleno (margin ypadding)Además de las cuatro propiedades que controlan cada uno delos márgenes del elemento, ...
3. Margen y relleno (margin ypadding)Si solo se indica un valor, todos los márgenes tienen ese valor.Si se indican dos val...
3. Margen y relleno (margin ypadding)El ejemplo anterior de márgenes se puede reescribir utilizandola propiedad margin:
3. Margen y relleno (margin ypadding)El comportamiento de los márgenes verticales es más complejode lo que se puede imagin...
3. Margen y relleno (margin ypadding)De la misma forma, si un elemento está contenido dentro deotro elemento, sus márgenes...
3. Margen y relleno (margin ypadding)Aunque en principio puede parecer un comportamiento extraño,la razón por la que se pr...
3. Margen y relleno (margin ypadding)En el caso de un elemento que se encuentra en el interior deotro y sus márgenes se fu...
3. Margen y relleno (margin ypadding)RellenoCSS define cuatro propiedades para controlar cada uno de losespacios de rellen...
3. Margen y relleno (margin ypadding)Cada una de las propiedades establece la separación entre ellateral de los contenidos...
3. Margen y relleno (margin ypadding)La siguiente imagen muestra la diferencia entre el margen y elrelleno de los elementos:
3. Margen y relleno (margin ypadding)Como sucede con la propiedad margin, CSS también define unapropiedad de tipo "shortha...
4. BordesCSS permite definir el aspecto de cada uno de los cuatro bordeshorizontales y verticales de los elementos. Para c...
4. BordesLa anchura de los bordes se puede indicar mediante:una medida (absoluta o relativa y en cualquier unidad de medid...
4. BordesEl siguiente ejemplo muestra un elemento con cuatro anchurasdiferentes de borde:
4. BordesSi se quiere establecer la misma anchura a todos los bordes,CSS permite la utilización de un atajo mediante una p...
4. BordesColorEl color de los bordes se controla con las cuatro propiedadessiguientes:
4. BordesEl ejemplo anterior se puede modificar para mostrar cada unode los bordes de un color diferente:Si se quiere esta...
4. BordesEstiloPor último, CSS permite establecer el estilo de cada uno de losbordes mediante las siguientes propiedades:
4. BordesEl estilo de los bordes sólo se puede indicar mediante alguna delas palabras reservadas definidas por CSS. Como e...
4. BordesLos bordes más utilizadosen los diseños habitualesson solid y dashed,seguidos de double ydotted.Los estilos none ...
4. BordesSi se quiere establecer el mismo estilo para todos los bordes,CSS define una propiedad de tipo "shorthand":Como e...
4. BordesCSS define una serie de propiedades de tipo "shorthand" quepermiten establecer todos los atributos de los bordes ...
4. BordesLas propiedades "shorthand" permiten establecer alguno otodos los atributos de cada borde. El siguiente ejemploes...
4. BordesPor ultimo, CSS define una propiedad de tipo "shorthand" globalpara establecer el valor de todos los atributos de...
4. BordesComo el valor por defecto de la propiedad border-style es none,si una propiedad shorthand no establece explícitam...
4. BordesCuando los cuatro bordes no son idénticos pero sí muyparecidos, se puede utilizar la propiedad border para establ...
5. Margen relleno borde y modelo decajasLa anchura y altura de un elemento no solamente se calculanteniendo en cuenta sus ...
5. Margen relleno borde y modelo decajasDe esta forma, la anchura del elemento en pantalla sería igual ala suma de la anch...
5. Margen relleno borde y modelo decajasAsí, la anchura/altura establecida con CSS siempre hacereferencia a la anchura/alt...
5. Margen relleno borde y modelo decajasPor otra parte, la guerra de navegadores que se produjo en losaños 90 provocó que ...
5. Margen relleno borde y modelo decajasLa solución que adoptaron fue la de incluir en el navegador dosmodos diferentes de...
5. Margen relleno borde y modelo decajasLa diferencia más notable entre los dos modos es el tratamientodel "box model", lo...
5. Margen relleno borde y modelo decajasEn el caso concreto de Internet Explorer, también activan elmodo quirks los modos ...
5. Margen relleno borde y modelo decajasLa anchura del elemento es la que se obtiene de sumar la anchura desu contenido (3...
5. Margen relleno borde y modelo decajasLos modos de compatibilidad de Internet Explorer 8El navegador Internet Explorer 8...
5. Margen relleno borde y modelo decajasDe esta forma, si la página no se visualiza correctamente enInternet Explorer 8, s...
5. Margen relleno borde y modelo decajasEmular el modo IE7: el navegador decide cómo mostrar loscontenidos a partir de la ...
5. Margen relleno borde y modelo decajasEl modo de compatibilidad de la página se indica mediante unanueva etiqueta <meta>...
5. Margen relleno borde y modelo decajasNo obstante, esta opción de compatibilidad de la página debeentenderse como una so...
6. FondosEl último elemento que forma el box model es el fondo de lacaja del elemento.El fondo puede ser un color simple o...
6. FondosCSS define cinco propiedades para establecer el fondo de cadaelemento (background-color, background-image, backgr...
6. FondosEl siguiente ejemplo muestra una página web con un color grisclaro de fondo:
6. FondosCSS permite establecer de forma simultánea un color y unaimagen de fondo. En este caso, la imagen se muestra dela...
6. FondosLas imágenes de fondo se indican a través de su URL, quepuede ser absoluta o relativa.Suele ser recomendable crea...
6. FondosSi la imagen que se quiere mostrar es demasiado grande para elfondo del elemento, solamente se muestra la parte d...
6. Fondos
6. FondosCon una imagen muy pequeña (y que por tanto, se puede descargar enmuy poco tiempo) se consigue cubrir completamen...
6. FondosEn ocasiones, no es conveniente que la imagen de fondo serepita horizontal y verticalmente.Para ello, CSS introdu...
6. FondosEl valor repeat indica que la imagen se debe repetir en todasdirecciones y por tanto, es el comportamiento por de...
6. Fondos: ejemploEl sitio web http://www.kottke.org/ utiliza el valor repeat-x paramostrar una imagen de fondo en la cabe...
6. Fondos: EjemplosPor otra parte, el sitio web http://veerle.duoh.com/ utiliza elvalor repeat-y para mostrar el fondo de ...
6. FondosAdemás de seleccionar el tipo de repetición de las imágenes defondo, CSS permite controlar la posición de la imag...
6. Fondos: EjemplosLa propiedad background-position permite indicar la distanciaque se desplaza la imagen de fondo respect...
6. FondosCuando se utilizan porcentajes, su interpretación no es intuitiva.Si el valor de la propiedad background-position...
6. Fondos
6. FondosOpcionalmente, se puede indicar que el fondo permanezca fijo cuandola ventana del navegador se desplaza mediante ...
6. FondosPor último, CSS define una propiedad de tipo "shorthand" paraindicar todas las propiedades de los colores e imáge...
6. FondosEl orden en el que se indican las propiedades es indiferente,aunque en general se sigue el formato indicado de co...
6. Fondos
6. FondosLa propiedad background permite asignar todos o sólo algunosde todos los valores que se pueden definir para los f...
Upcoming SlideShare
Loading in...5
×

Impi css-4 modelo cajas

172

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
172
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Impi css-4 modelo cajas

  1. 1. Portales de InformaciónCSS: 4. Modelo de cajas2009 - 2010
  2. 2. 1. IntroEl modelo de cajas o "box model" es seguramente lacaracterística más importante del lenguaje de hojas de estilosCSS, ya que condiciona el diseño de todas las páginas web.El modelo de cajas es el comportamiento de CSS que hace quetodos los elementos de las páginas se representen mediantecajas rectangulares.Las cajas de una página se crean automáticamente.Cada vez que se inserta una etiqueta HTML, se crea una nuevacaja rectangular que encierra los contenidos de ese elemento.La siguiente imagen muestra las tres cajas rectangulares quecrean las tres etiquetas HTML que incluye la página:
  3. 3. 1. IntroLas cajas de las páginas no son visibles a simple vista porqueinicialmente no muestran ningún color de fondo ni ningúnborde.La siguiente imagen muestra las cajas que forman la páginaweb de http://www.alistapart.com/ después de forzar a quetodas las cajas muestren un borde:
  4. 4. 1. Intro
  5. 5. 1. IntroLos navegadores crean y colocan las cajas de forma automática,pero CSS permite modificar todas sus características.Cada una de las cajas está formada por seis partes, tal y comomuestra la siguiente imagen:
  6. 6. 1. Intro
  7. 7. 1. IntroLas partes que componen cada caja y su orden de visualizacióndesde el punto de vista del usuario son las siguientes:Contenido (content): se trata del contenido HTML del elemento(las palabras de un párrafo, una imagen, el texto de una lista deelementos, etc.)Relleno (padding): espacio libre opcional existente entre elcontenido y el borde.Borde (border): línea que encierra completamente el contenido ysu relleno.Imagen de fondo (background image): imagen que se muestrapor detrás del contenido y el espacio de relleno.Color de fondo (background color): color que se muestra pordetrás del contenido y el espacio de relleno.Margen (margin): separación opcional existente entre la caja y elresto de cajas adyacentes.
  8. 8. 1. IntroEl relleno y el margen son transparentes, por lo que:en el espacio ocupado por el relleno se muestra el color o imagende fondo (si están definidos) yen el espacio ocupado por el margen se muestra el color o imagende fondo de su elemento padre (si están definidos).Si ningún elemento padre tiene definido un color o imagen de fondo, semuestra el color o imagen de fondo de la propia página (si estándefinidos).Si una caja define tanto un color como una imagen de fondo, laimagen tiene más prioridad y es la que se visualiza.No obstante, si la imagen de fondo no cubre totalmente la caja delelemento o si la imagen tiene zonas transparentes, también sevisualiza el color de fondo.Combinando imagenes transparentes y colores de fondo se puedenlograr efectos gráficos muy interesantes.
  9. 9. 2. Anchura y alturaLa propiedad CSS que controla la anchura de los elementos sedenomina width.
  10. 10. 2. Anchura y alturaLa propiedad width no admite valores negativos y los valores enporcentaje se calculan a partir de la anchura de su elementopadre.El valor inherit indica que la anchura del elemento se hereda de suelemento padre.El valor auto, que es el que se utiliza si no se establece de formaexplícita un valor a esta propiedad, indica que el navegador debecalcular automáticamente la anchura del elemento, teniendo encuenta sus contenidos y el sitio disponible en la página.El siguiente ejemplo establece el valor de la anchura delelemento <div> lateral:
  11. 11. 2. Anchura y alturaLa propiedad CSS que controla la altura de los elementos sedenomina height.Al igual que sucede con width, la propiedad height no admitevalores negativos.Si se indica un porcentaje, se toma como referencia la altura delelemento padre.Si el elemento padre no tiene una altura definidaexplícitamente, se asigna el valor auto a la altura.
  12. 12. 2. Anchura y alturaEl valor inherit indica que la altura del elemento se hereda de suelemento padre.El valor auto, que es el que se utiliza si no se establece deforma explícita un valor a esta propiedad, indica que elnavegador debe calcular automáticamente la altura delelemento, teniendo en cuenta sus contenidos y el sitiodisponible en la página.El siguiente ejemplo establece el valor de la altura del elemento<div> de cabecera:
  13. 13. 3. Margen y relleno (margin ypadding)CSS define cuatro propiedades para controlar cada uno de losmárgenes horizontales y verticales de un elemento.
  14. 14. 3. Margen y relleno (margin ypadding)Cada una de las propiedades establece la separación entre elborde lateral de la caja y el resto de cajas adyacentes:Las unidades más utilizadas para indicar los márgenes de unelemento son:los píxeles (cuando se requiere una precisión total),los em (para hacer diseños que mantengan las proporciones) ylos porcentajes (para hacer diseños líquidos o fluidos).
  15. 15. 3. Margen y relleno (margin ypadding)El siguiente ejemplo añade un margen izquierdo al segundopárrafo:
  16. 16. 3. Margen y relleno (margin ypadding)Los márgenes verticales (margin-top y margin-bottom) sólo sepueden aplicar a los elementos de bloque y las imágenes,mientras que los márgenes laterales (margin-left y margin-right)se pueden aplicar a cualquier elemento,
  17. 17. 3. Margen y relleno (margin ypadding)Además de las cuatro propiedades que controlan cada uno delos márgenes del elemento, CSS define una propiedad quepermite establecer los cuatro márgenes de forma directaempleando una única propiedad.Este tipo de propiedades resumidas se denominan propiedades detipo "shorthand" y CSS define varias propiedades de este tipo,como se verá más adelante.La propiedad que permite definir de forma simultanea los cuatromárgenes se denomina margin.
  18. 18. 3. Margen y relleno (margin ypadding)Si solo se indica un valor, todos los márgenes tienen ese valor.Si se indican dos valores, el primero se asigna al margen superior einferior y el segundo se asigna a los márgenes izquierdo y derecho.Si se indican tres valores, el primero se asigna al margen superior,el tercero se asigna al margen inferior y el segundo valor se asignalos márgenes izquierdo y derecho.Si se indican los cuatro valores, el orden de asignación es: margensuperior, margen derecho, margen inferior y margen izquierdo.
  19. 19. 3. Margen y relleno (margin ypadding)El ejemplo anterior de márgenes se puede reescribir utilizandola propiedad margin:
  20. 20. 3. Margen y relleno (margin ypadding)El comportamiento de los márgenes verticales es más complejode lo que se puede imaginar.Cuando se juntan dos o más márgenes verticales, se fusionande forma automática y la altura del nuevo margen será igual ala altura del margen más alto de los que se han fusionado.
  21. 21. 3. Margen y relleno (margin ypadding)De la misma forma, si un elemento está contenido dentro deotro elemento, sus márgenes verticales se fusionan y resultanen un nuevo margen de la misma altura que el mayor margende los que se han fusionado
  22. 22. 3. Margen y relleno (margin ypadding)Aunque en principio puede parecer un comportamiento extraño,la razón por la que se propuso este mecanismo de fusiónautomática de márgenes verticales es el de dar uniformidad alas páginas web habituales.En una página con varios párrafos, si no se diera estecomportamiento y se estableciera un determinado margen atodos los párrafos, el primer párrafo no mostraría un aspectohomogéneo respecto de los demás.
  23. 23. 3. Margen y relleno (margin ypadding)En el caso de un elemento que se encuentra en el interior deotro y sus márgenes se fusionan de forma automática, se puedeevitar este comportamiento añadiendo un pequeño relleno(padding: 1px) o un borde (border: 1px solid transparent) alelemento contenedor.
  24. 24. 3. Margen y relleno (margin ypadding)RellenoCSS define cuatro propiedades para controlar cada uno de losespacios de relleno horizontales y verticales de un elemento.
  25. 25. 3. Margen y relleno (margin ypadding)Cada una de las propiedades establece la separación entre ellateral de los contenidos y el borde lateral de la caja:
  26. 26. 3. Margen y relleno (margin ypadding)La siguiente imagen muestra la diferencia entre el margen y elrelleno de los elementos:
  27. 27. 3. Margen y relleno (margin ypadding)Como sucede con la propiedad margin, CSS también define unapropiedad de tipo "shorthand" para establecer los cuatrorellenos de un elemento de forma directa. La propiedad quepermite definir de forma simultanea los cuatro márgenes sedenomina padding.la propiedad padding admite entre uno y cuatro valores, con elmismo significado que el de la propiedad margin.
  28. 28. 4. BordesCSS permite definir el aspecto de cada uno de los cuatro bordeshorizontales y verticales de los elementos. Para cada borde sepuede establecer su anchura, su color y su estilo.AnchuraLa anchura de los bordes se controla con las cuatro propiedadessiguientes
  29. 29. 4. BordesLa anchura de los bordes se puede indicar mediante:una medida (absoluta o relativa y en cualquier unidad de medidade las definidas) omediante las palabras clave thin (borde delgado), medium (bordenormal) y thick (borde ancho).La medida más habitual para indicar la anchura de los bordes esel píxel, ya que permite un control preciso del grosor.Las palabras clave apenas se utilizan, ya que impiden mostrarbordes iguales en diferentes navegadores.El motivo es que el estándar CSS no indica explícitamente el grosoral que equivale cada palabra clave.Así por ejemplo, el grosor medium equivale a 4px en InternetExplorer y 3px en el resto de navegadores.
  30. 30. 4. BordesEl siguiente ejemplo muestra un elemento con cuatro anchurasdiferentes de borde:
  31. 31. 4. BordesSi se quiere establecer la misma anchura a todos los bordes,CSS permite la utilización de un atajo mediante una propiedadde tipo "shorthand“.La propiedad border-width permite indicar entre uno y cuatrovalores. El significado de cada caso es el habitual de laspropiedades "shorthand":Si se indica un solo valor, se aplica a los cuatro bordes. Si se indicandos valores, el primero se aplica al borde superior e inferior y elsegundo valor se aplica al borde izquierdo y derecho.Si se indican tres valores, el primero se aplica al borde superior, elsegundo se aplica al borde izquierdo y derecho y el tercer valor seaplica al borde inferior. Si se indican los cuatro valores, el orden deaplicación es superior, derecho, inferior e izquierdo.
  32. 32. 4. BordesColorEl color de los bordes se controla con las cuatro propiedadessiguientes:
  33. 33. 4. BordesEl ejemplo anterior se puede modificar para mostrar cada unode los bordes de un color diferente:Si se quiere establecer el mismo color para todos los bordes,CSS permite la utilización de un atajo mediante una propiedadde tipo "shorthand" : border-color
  34. 34. 4. BordesEstiloPor último, CSS permite establecer el estilo de cada uno de losbordes mediante las siguientes propiedades:
  35. 35. 4. BordesEl estilo de los bordes sólo se puede indicar mediante alguna delas palabras reservadas definidas por CSS. Como el valor pordefecto de esta propiedad es none, los elementos no muestranningún borde visible a menos que se establezca explícitamenteun estilo de borde.Siguiendo el ejemplo anterior, se puede modificar el estilo decada uno de los bordes:
  36. 36. 4. BordesLos bordes más utilizadosen los diseños habitualesson solid y dashed,seguidos de double ydotted.Los estilos none y hiddenson idénticos visualmente,pero se diferencian en laforma que los navegadoresresuelven los conflictosentre los bordes de lasceldas adyacentes en lastablas.
  37. 37. 4. BordesSi se quiere establecer el mismo estilo para todos los bordes,CSS define una propiedad de tipo "shorthand":Como es habitual, la propiedad permite indicar de uno a cuatrovalores diferentes y las reglas de aplicación son las habitualesde las propiedades "shorthand".
  38. 38. 4. BordesCSS define una serie de propiedades de tipo "shorthand" quepermiten establecer todos los atributos de los bordes de formadirecta.CSS ha definido una propiedad "shorthand" para cada uno de loscuatro bordes y una propiedad "shorthand" global
  39. 39. 4. BordesLas propiedades "shorthand" permiten establecer alguno otodos los atributos de cada borde. El siguiente ejemploestablece el color y el tipo del borde inferior, pero no suanchura:En el ejemplo anterior, la anchura del borde será lacorrespondiente al valor por defecto (medium). Este otroejemplo muestra la forma habitual utilizada para establecer elestilo de cada borde:
  40. 40. 4. BordesPor ultimo, CSS define una propiedad de tipo "shorthand" globalpara establecer el valor de todos los atributos de todos losbordes de forma directa:Las siguientes reglas CSS son equivalentes:
  41. 41. 4. BordesComo el valor por defecto de la propiedad border-style es none,si una propiedad shorthand no establece explícitamente el estilode un borde, el elemento no muestra ese borde:
  42. 42. 4. BordesCuando los cuatro bordes no son idénticos pero sí muyparecidos, se puede utilizar la propiedad border para establecerde forma directa los atributos comunes de todos los bordesy posteriormente especificar para cada uno de los cuatro bordessus propiedades particulares:
  43. 43. 5. Margen relleno borde y modelo decajasLa anchura y altura de un elemento no solamente se calculanteniendo en cuenta sus propiedades width y height.El margen, el relleno y los bordes establecidos a un elementodeterminan la anchura y altura final del elemento.En el siguiente ejemplo se muestran los estilos CSS de unelemento:La anchura total con la que se muestra el elemento no son los300 píxel indicados en la propiedad width, sino que se tienen encuenta todos sus márgenes, rellenos y bordes:
  44. 44. 5. Margen relleno borde y modelo decajasDe esta forma, la anchura del elemento en pantalla sería igual ala suma de la anchura original, los márgenes, los bordes y losrellenos:
  45. 45. 5. Margen relleno borde y modelo decajasAsí, la anchura/altura establecida con CSS siempre hacereferencia a la anchura/altura del contenido.La anchura/altura total del elemento debe tener en cuentaademás los valores del resto de partes que componen la cajadel box model.
  46. 46. 5. Margen relleno borde y modelo decajasPor otra parte, la guerra de navegadores que se produjo en losaños 90 provocó que cada fabricante (Microsoft y Netscape)añadiera sus propias extensiones y mejoras en sus productos.Posteriormente, aparecieron los estándares publicados por elW3C y los fabricantes se encontraron con el problema de laincompatibilidad entre sus implementaciones anteriores deHTML y CSS y las implementaciones que requerían losestándares.
  47. 47. 5. Margen relleno borde y modelo decajasLa solución que adoptaron fue la de incluir en el navegador dosmodos diferentes de funcionamiento:modo compatible con las páginas antiguas (denominado "modoquirks" y que se podría traducir como "modo raro")y modo compatible con los nuevos estándares (denominado "modoestándar").El modo quirks es equivalente a la forma en la que se visualizabanlas páginas en los navegadores Internet Explorer 4 y NetscapeNavigator 4.
  48. 48. 5. Margen relleno borde y modelo decajasLa diferencia más notable entre los dos modos es el tratamientodel "box model", lo que puede afectar gravemente al diseño delas páginas HTML.Los navegadores seleccionan automáticamente el modo en elque muestran las páginas en función del DOCTYPE definido porel documento.En general, los siguientes tipos de DOCTYPE activan el modoquirks en los navegadores:
  49. 49. 5. Margen relleno borde y modelo decajasEn el caso concreto de Internet Explorer, también activan elmodo quirks los modos XHTML 1.0 que incluyen la declaraciónde XML (por ejemplo <?xml version="1.0" encoding="UTF-8"?>) alprincipio de la página web:La versión 5.5 y anteriores de Internet Explorer y las versiones6 y 7 en modo quirks siguen su propio modelo de cálculo deanchuras y alturas que es muy diferente al método definido porel estándar.
  50. 50. 5. Margen relleno borde y modelo decajasLa anchura del elemento es la que se obtiene de sumar la anchura desu contenido (300), sus bordes (2 x 10) y sus rellenos (2 x 50). Por lotanto, la anchura del elemento son 420 píxel, a los que se suman los30 píxel de margen lateral a cada lado.Sin embargo, Las versiones anteriores de Internet Explorer y lasversiones 6 y 7 en modo quirks consideran que la anchura establecidapor CSS no sólo es la anchura del contenido, sino que también incluyelos bordes y el relleno.Por lo tanto, en este caso la anchura total del elemento (sin contar losmárgenes laterales) es de 300 píxel, el mismo valor que se indica en lapropiedad width. El espacio ocupado por los bordes del elemento (2 x10) y sus rellenos (2 x 50) se resta de la anchura de su contenido.
  51. 51. 5. Margen relleno borde y modelo decajasLos modos de compatibilidad de Internet Explorer 8El navegador Internet Explorer 8 introduce el concepto de"compatibilidad de la página" para asegurar que todas las páginasHTML se vean correctamente en cualquier versión de esenavegador. En realidad, esta nueva característica es una mejoradel modo quirks explicado anteriormente.Internet Explorer 8, a diferencia de sus versiones anteriores,soporta completamente el estándar CSS 2.1. Sin embargo, muchossitios web se diseñaron para Internet Explorer 6 y 7, por lo queincluyen trucos, hacks y filtros que arreglan los errores y carenciasde esas versiones del navegador.Para evitar que las páginas diseñadas para navegadores anterioresse vean mal en esta nueva versión, Internet Explorer 8 incluye laopción de "compatibilidad de la página", que permite indicar laversión de Internet Explorer para la que la página ha sidodiseñada.
  52. 52. 5. Margen relleno borde y modelo decajasDe esta forma, si la página no se visualiza correctamente enInternet Explorer 8, se puede indicar al navegador que lamuestre como si fuera Internet Explorer 6 o 7.En realidad, Internet Explorer 8 incluye seis modos defuncionamiento:Modo IE5: la página se muestra según el modo quirks de InternetExplorer 7, que es casi idéntico a como se veían las páginas en elnavegador Internet Explorer 5.Modo IE7: la página se muestra en el modo estándar de InternetExplorer 7, sin importar si la página contiene o no la directiva<!DOCTYPE>.Modo IE8: los contenidos se muestran en el modo estándar deInternet Explorer 8, que es el más parecido al del resto denavegadores que soportan los estándares (Firefox, Opera, Safari yGoogle Chrome).
  53. 53. 5. Margen relleno borde y modelo decajasEmular el modo IE7: el navegador decide cómo mostrar loscontenidos a partir de la directiva <!DOCTYPE> de la página.Si esa directiva es una de las que activan el modo estándar, la páginase muestra en el modo estándar de Internet Explorer 7.En otro caso, se muestra en el modo quirks de Internet Explorer 5.Este modo es el más útil para la mayoría de sitios web.Emular el modo IE8: el navegador decide cómo mostrar loscontenidos a partir de la directiva <!DOCTYPE> de la página.Si esa directiva es una de las que activan el modo estándar, la páginase muestra en el modo estándar de Internet Explorer 8.En otro caso, se muestra en el modo quirks de Internet Explorer 5.Modo límite ("edge mode"): indica a Internet Explorer que loscontenidos se deben mostrar en el modo de compatibilidad másavanzado disponible. Actualmente, este modo es equivalente almodo IE8. Si las futuras versiones Internet Explorer 9 y 10incluyeran mejor compatibilidad, las páginas se visualizarían en esemodo avanzado de compatibilidad.
  54. 54. 5. Margen relleno borde y modelo decajasEl modo de compatibilidad de la página se indica mediante unanueva etiqueta <meta> con la propiedad X-UA-Compatible ycuyo valor es el que utiliza Internet Explorer 8 para determinarel modo que se utiliza:
  55. 55. 5. Margen relleno borde y modelo decajasNo obstante, esta opción de compatibilidad de la página debeentenderse como una solución temporal que evita que los sitiosweb se vean mal en Internet Explorer 8.La única solución correcta a largo plazo consiste enactualizar las páginas para que sus diseños sigan losestándares web.
  56. 56. 6. FondosEl último elemento que forma el box model es el fondo de lacaja del elemento.El fondo puede ser un color simple o una imagen.El fondo solamente se visualiza en el área ocupada por elcontenido y su relleno, ya que el color de los bordes se controladirectamente desde los bordes y las zonas de los márgenessiempre son transparentes.Para establecer un color o imagen de fondo en la página entera,se debe establecer un fondo al elemento <body>.Si se establece un fondo a la página, como el valor inicial delfondo de los elementos es transparente, todos los elementos dela página se visualizan con el mismo fondo a menos que algúnelemento especifique su propio fondo.
  57. 57. 6. FondosCSS define cinco propiedades para establecer el fondo de cadaelemento (background-color, background-image, background-repeat, background-attachment, background-position) y otrapropiedad de tipo "shorthand" (background).
  58. 58. 6. FondosEl siguiente ejemplo muestra una página web con un color grisclaro de fondo:
  59. 59. 6. FondosCSS permite establecer de forma simultánea un color y unaimagen de fondo. En este caso, la imagen se muestra delantedel color, por lo que solamente si la imagen contiene zonastransparentes es posible ver el color de fondo.El siguiente ejemplo muestra una imagen como fondo de toda lapágina:
  60. 60. 6. FondosLas imágenes de fondo se indican a través de su URL, quepuede ser absoluta o relativa.Suele ser recomendable crear una carpeta de imágenes que seencuentre en el mismo directorio que los archivos CSS y quealmacene todas las imágenes utilizadas en el diseño de laspáginas.Así, las imágenes correspondientes al diseño de la página semantienen separadas del resto de imágenes del sitio y el códigoCSS es más sencillo (por utilizar URL relativas) y más fácil demantener (por no tener que actualizar URL absolutas en caso deque se cambie la estructura del sitio web).Por otra parte, suele ser habitual indicar un color de fondosiempre que se muestra una imagen de fondo.En caso de que la imagen no se pueda mostrar o el navegadormostrará el color indicado (que debería ser, en lo posible, similar ala imagen) y la página no parecerá que contiene errores.
  61. 61. 6. FondosSi la imagen que se quiere mostrar es demasiado grande para elfondo del elemento, solamente se muestra la parte de imagencomprendida en el tamaño del elemento.Si la imagen es más pequeña que el elemento, CSS la repitehorizontal y verticalmente hasta llenar el fondo del elemento.Este comportamiento es útil para establecer un fondo complejoa una página web entera.El siguiente ejemplo utiliza una imagen muy pequeña paraestablecer un fondo complejo a toda una página:
  62. 62. 6. Fondos
  63. 63. 6. FondosCon una imagen muy pequeña (y que por tanto, se puede descargar enmuy poco tiempo) se consigue cubrir completamente el fondo de lapágina, con lo que se consigue un gran ahorro de ancho de banda.
  64. 64. 6. FondosEn ocasiones, no es conveniente que la imagen de fondo serepita horizontal y verticalmente.Para ello, CSS introduce la propiedad background-repeat quepermite controlar la forma de repetición de las imágenes defondo.
  65. 65. 6. FondosEl valor repeat indica que la imagen se debe repetir en todasdirecciones y por tanto, es el comportamiento por defecto.El valor no-repeat muestra una sola vez la imagen y no se repiteen ninguna dirección.El valor repeat-x repite la imagen sólo horizontalmentey el valor repeat-y repite la imagen solamente de forma vertical.
  66. 66. 6. Fondos: ejemploEl sitio web http://www.kottke.org/ utiliza el valor repeat-x paramostrar una imagen de fondo en la cabecera de la página:
  67. 67. 6. Fondos: EjemplosPor otra parte, el sitio web http://veerle.duoh.com/ utiliza elvalor repeat-y para mostrar el fondo de una columna decontenidos:
  68. 68. 6. FondosAdemás de seleccionar el tipo de repetición de las imágenes defondo, CSS permite controlar la posición de la imagen dentro delfondo del elemento mediante la propiedad background-position.
  69. 69. 6. Fondos: EjemplosLa propiedad background-position permite indicar la distanciaque se desplaza la imagen de fondo respecto de su posiciónoriginal situada en la esquina superior izquierda.Si se indican dos porcentajes o dos medidas, el primero indica eldesplazamiento horizontal y el segundo el desplazamientovertical respecto del origen (situado en la esquina superiorizquierda).Si solamente se indica un porcentaje o una medida, seconsidera que es el desplazamiento horizontal y aldesplazamiento vertical se le asigna automáticamente el valorde 50%.
  70. 70. 6. FondosCuando se utilizan porcentajes, su interpretación no es intuitiva.Si el valor de la propiedad background-position se indicamediante dos porcentajes x% y%, el navegador coloca el punto(x%, y%) de la imagen de fondo en el punto (x%, y%) delelemento.Las palabras clave permitidas son equivalentes a algunosporcentajes significativos: top = 0%, left = 0%, center = 50%,bottom = 100%, right = 100%.CSS permite mezclar porcentajes y palabras clave, como porejemplo 50% 2cm, center 2cm, center 10%.Si se utilizan solamente palabras clave, el orden es indiferente ypor tanto, es equivalente indicar top left y left top.
  71. 71. 6. Fondos
  72. 72. 6. FondosOpcionalmente, se puede indicar que el fondo permanezca fijo cuandola ventana del navegador se desplaza mediante las barras de scroll.Se trata de un comportamiento que en general no es deseable y quealgunos navegadores no soportan correctamente.La propiedad que controla este comportamiento es background-attachment.Para hacer que una imagen de fondo se muestre fija al desplazar laventana del navegador, se debe añadir la propiedad background-attachment: fixed.
  73. 73. 6. FondosPor último, CSS define una propiedad de tipo "shorthand" paraindicar todas las propiedades de los colores e imágenes defondo de forma directa.La propiedad se denomina background y es la quegeneralmente se utiliza para establecer las propiedades delfondo de los elementos.
  74. 74. 6. FondosEl orden en el que se indican las propiedades es indiferente,aunque en general se sigue el formato indicado de color, url deimagen, repetición y posición.
  75. 75. 6. Fondos
  76. 76. 6. FondosLa propiedad background permite asignar todos o sólo algunosde todos los valores que se pueden definir para los fondos delos elementos:
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×