Modelo de cajasEl modelo de cajas o"box model"es seguramente la
caracterstica ms importante del lenguaje de hojas de estilos CSS,
ya que condiciona el diseo de todas las pginas web. El modelo de
cajas es el comportamiento de CSS que hace que todos los elementos
de las pginas se representen mediante cajas rectangulares.Las cajas
de una pgina se crean automticamente. Cada vez que se inserta una
etiqueta HTML, se crea una nueva caja rectangular que encierra los
contenidos de ese elemento. La siguiente imagen muestra las tres
cajas rectangulares que crean las tres etiquetas HTML que incluye
la pgina:
Figura 4.1Las cajas se crean automticamente al definir cada
elemento HTMLLas cajas de las pginas no son visibles a simple vista
porque inicialmente no muestran ningn color de fondo ni ningn
borde. La siguiente imagen muestra las cajas que forman la pgina
web de http://www.alistapart.com/ despus de forzar a que todas las
cajas muestren su borde:
Figura 4.2Cajas que forman la pgina alistapart.comLos
navegadores crean y colocan las cajas de forma automtica, pero CSS
permite modificar todas sus caractersticas. Cada una de las cajas
est formada por seis partes, tal y como muestra la siguiente
imagen:
Figura 4.3Representacin tridimensional del box model de
CSS(Esquema utilizado con permiso de
http://www.hicksdesign.co.uk/boxmodel/)Las partes que componen cada
caja y su orden de visualizacin desde el punto de vista del usuario
son las siguientes: Contenido (content): se trata del contenido
HTML del elemento (las palabras de un prrafo, una imagen, el texto
de una lista de elementos, etc.) Relleno (padding): espacio libre
opcional existente entre el contenido y el borde. Borde (border):
lnea que encierra completamente el contenido y su relleno. Imagen
de fondo (background image): imagen que se muestra por detrs del
contenido y el espacio de relleno. Color de fondo (background
color): color que se muestra por detrs del contenido y el espacio
de relleno. Margen (margin): separacin opcional existente entre la
caja y el resto de cajas adyacentes.El relleno y el margen son
transparentes, por lo que en el espacio ocupado por el relleno se
muestra el color o imagen de fondo (si estn definidos) y en el
espacio ocupado por el margen se muestra el color o imagen de fondo
de su elemento padre (si estn definidos). Si ningn elemento padre
tiene definido un color o imagen de fondo, se muestra el color o
imagen de fondo de la propia pgina (si estn definidos).Si una caja
define tanto un color como una imagen de fondo, la imagen tiene ms
prioridad y es la que se visualiza. No obstante, si la imagen de
fondo no cubre totalmente la caja del elemento o si la imagen tiene
zonas transparentes, tambin se visualiza el color de fondo.
Combinando imagenes transparentes y colores de fondo se pueden
lograr efectos grficos muy interesantes.Anchura y altura4.1.1.
AnchuraLa propiedad CSS que controla la anchura de la caja de los
elementos se denominawidth.Propiedadwidth
Valoresunidad de medida|porcentaje| auto |inherit
Se aplica aTodos los elementos, salvo los elementos en lnea que
no sean imgenes, las filas de tabla y los grupos de filas de
tabla
Valor inicialauto
DescripcinEstablece la anchura de un elemento
La propiedadwidthno admite valores negativos y los valores en
porcentaje se calculan a partir de la anchura de su elemento padre.
El valorinheritindica que la anchura del elemento se hereda de su
elemento padre. El valorauto, que es el que se utiliza si no se
establece de forma explcita un valor a esta propiedad, indica que
el navegador debe calcular automticamente la anchura del elemento,
teniendo en cuenta sus contenidos y el sitio disponible en la
pgina.El siguiente ejemplo establece el valor de la anchura del
elementolateral:#lateral { width: 200px; } ...
CSS define otras dos propiedades relacionadas con la anchura de
los elementos:min-widthymax-width, que se vern ms adelante.4.1.2.
AlturaLa propiedad CSS que controla la altura de los elementos se
denominaheight.Propiedadheight
Valoresunidad de medida|porcentaje| auto |inherit
Se aplica aTodos los elementos, salvo los elementos en lnea que
no sean imgenes, las columnas de tabla y los grupos de columnas de
tabla
Valor inicialauto
DescripcinEstablece la altura de un elemento
Al igual que sucede conwidth, la propiedadheightno admite
valores negativos. Si se indica un porcentaje, se toma como
referencia la altura del elemento padre. Si el elemento padre no
tiene una altura definida explcitamente, se asigna el valorautoa la
altura.El valorinheritindica que la altura del elemento se hereda
de su elemento padre. El valorauto, que es el que se utiliza si no
se establece de forma explcita un valor a esta propiedad, indica
que el navegador debe calcular automticamente la altura del
elemento, teniendo en cuenta sus contenidos y el sitio disponible
en la pgina.El siguiente ejemplo establece el valor de la altura
del elementode cabecera:#cabecera { height: 60px; } ...
CSS define otras dos propiedades relacionadas con la altura de
los elementos:min-heightymax-height, que se vern ms adelante.Margen
y relleno4.2.1. MargenCSS define cuatro propiedades para controlar
cada uno de los mrgenes horizontales y verticales de un
elemento.Propiedadesmargin-top,margin-right,margin-bottom,margin-left
Valoresunidad de medida|porcentaje| auto |inherit
Se aplica aTodos los elementos, salvo margin-top y margin-bottom
que slo se aplican a los elementos de bloque y a las imgenes
Valor inicial0
DescripcinEstablece cada uno de los mrgenes horizontales y
verticales de un elemento
Cada una de las propiedades establece la separacin entre el
borde lateral de la caja y el resto de cajas adyacentes:
Figura 4.4Las cuatro propiedades relacionadas con los mrgenesLas
unidades ms utilizadas para indicar los mrgenes de un elemento son
los pxeles (cuando se requiere una precisin total), losem(para
hacer diseos que mantengan las proporciones) y los porcentajes
(para hacer diseos lquidos o fluidos).El siguiente ejemplo aade un
margen izquierdo al segundo prrafo:.destacado { margin-left:
2em;}Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam
et elit.Vivamus placerat lorem. Maecenas sapien. Integer ut massa.
Cras diam ipsum,laoreet non, tincidunt a, viverra sed,
tortor.Vestibulum lectus diam, luctus vel, venenatis
ultrices,cursus vel, tellus. Etiam placerat erat non sem. Nulla
molestie odio nonnisl tincidunt faucibus.Aliquam euismod sapien eu
libero. Ut tempor orci at nulla. Nam in erosegestas massa vehicula
nonummy. Morbi posuere, nibh ultricies consectetuer tincidunt,risus
turpis laoreet elit, ut tincidunt risus sem et nunc.A continuacin
se muestra el aspecto del ejemplo anterior en cualquier
navegador:
Figura 4.5Ejemplo de propiedad margin-leftAlgunos diseadores web
utilizan la etiquetapara tabular los contenidos de los prrafos. Se
trata de un error grave porque HTML no debe utilizarse para
controlar el aspecto de los elementos. CSS es el nico responsable
de establecer el estilo de los elementos, por lo que en vez de
utilizar la etiquetade HTML, debera utilizarse la
propiedadmargin-leftde CSS.Los mrgenes verticales
(margin-topymargin-bottom) slo se pueden aplicar a los elementos de
bloque y las imgenes, mientras que los mrgenes laterales
(margin-leftymargin-right) se pueden aplicar a cualquier elemento,
tal y como muestra la siguiente imagen:
Figura 4.6Los mrgenes verticales slo se aplican a los elementos
de bloque e imgenesLa imagen anterior muestra el resultado de
aplicar los mismos mrgenes a varios enlaces (elementos en lnea) y
varios prrafos (elementos de bloque). En los elementos en lnea los
mrgenes verticales no tienen ningn efecto, por lo que los enlaces
no muestran ninguna separacin vertical, al contrario de lo que
sucede con los prrafos. Sin embargo, los mrgenes laterales
funcionan sobre cualquier tipo de elemento, por lo que los enlaces
se muestran separados entre s y los prrafos aumentan su separacin
con los bordes laterales de su elemento contenedor.Adems de las
cuatro propiedades que controlan cada uno de los mrgenes del
elemento, CSS define una propiedad especial que permite establecer
los cuatro mrgenes de forma simultnea. Estas propiedades especiales
se denominan"propiedades shorthand"y CSS define varias propiedades
de este tipo, como se ver ms adelante.La propiedad que permite
definir de forma simultanea los cuatro mrgenes se
denominamargin.Propiedadmargin
Valores(unidad de medida|porcentaje| auto ) {1, 4} |inherit
Se aplica aTodos los elementos salvo algunos casos especiales de
elementos mostrados como tablas
Valor inicial-
DescripcinEstablece de forma directa todos los mrgenes de un
elemento
La notacin{1, 4}de la definicin anterior significa que la
propiedadmarginadmite entre uno y cuatro valores, con el siguiente
significado: Si solo se indica un valor, todos los mrgenes tienen
ese valor. Si se indican dos valores, el primero se asigna al
margen superior e inferior y el segundo se asigna a los mrgenes
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 asigna los mrgenes izquierdo y derecho. Si se
indican los cuatro valores, el orden de asignacin es: margen
superior, margen derecho, margen inferior y margen izquierdo.El
ejemplo anterior de mrgenes se puede reescribir utilizando la
propiedadmargin:Cdigo CSS original:div img { margin-top: .5em;
margin-bottom: .5em; margin-left: 1em; margin-right:
.5em;}Alternativa directa:div img { margin: .5em .5em .5m 1em;}Otra
alternativa:div img { margin: .5em; margin-left: 1em;}El
comportamiento de los mrgenes verticales es ms complejo de lo que
se puede imaginar. Cuando se juntan dos o ms mrgenes verticales, se
fusionan de forma automtica y la altura del nuevo margen ser igual
a la altura del margen ms alto de los que se han fusionado.
Figura 4.7Fusin automtica de los mrgenes verticalesDe la misma
forma, si un elemento est contenido dentro de otro elemento, sus
mrgenes verticales se fusionan y resultan en un nuevo margen de la
misma altura que el mayor margen de los que se han fusionado:
Figura 4.8Fusin de los mrgenes de los elementos interioresAunque
en principio puede parecer un comportamiento extrao, la razn por la
que se propuso este mecanismo de fusin automtica de mrgenes
verticales es el de dar uniformidad a las pginas web habituales. En
una pgina con varios prrafos, si no se diera este comportamiento y
se estableciera un determinado margen a todos los prrafos, el
primer prrafo no mostrara un aspecto homogneo respecto de los
dems.
Figura 4.9Motivo por el que se fusionan automticamente los
mrgenes verticalesEn el caso de un elemento que se encuentra en el
interior de otro y sus mrgenes se fusionan de forma automtica, se
puede evitar este comportamiento aadiendo un pequeo relleno
(padding: 1px) o un borde (border: 1px solid transparent) al
elemento contenedor.4.2.2. RellenoCSS define cuatro propiedades
para controlar cada uno de los espacios de relleno horizontales y
verticales de un
elemento.Propiedadespadding-top,padding-right,padding-bottom,padding-left
Valoresunidad de medida|porcentaje|inherit
Se aplica aTodos los elementos excepto algunos elementos de
tablas como grupos de cabeceras y grupos de pies de tabla
Valor inicial0
DescripcinEstablece cada uno de los rellenos horizontales y
verticales de un elemento
Cada una de estas propiedades establece la separacin entre el
contenido y los bordes laterales de la caja del elemento:
Figura 4.10Las cuatro propiedades relacionadas con los
rellenosComo sucede con los mrgenes, CSS tambin define una
propiedad de tipo"shorthand"llamadapaddingpara establecer los
cuatro rellenos de un elemento de forma
simultnea.Propiedadpadding
Valores(unidad de medida|porcentaje) {1, 4} |inherit
Se aplica aTodos los elementos excepto algunos elementos de
tablas como grupos de cabeceras y grupos de pies de tabla
Valor inicial-
DescripcinEstablece de forma directa todos los rellenos de los
elementos
La notacin{1, 4}de la definicin anterior significa que la
propiedadpaddingadmite entre uno y cuatro valores, con el mismo
significado que el de la propiedadmargin. Ejemplo:body {padding:
2em} /* Todos los rellenos valen 2em */body {padding: 1em 2em} /*
Superior e inferior = 1em, Izquierdo y derecho = 2em */body
{padding: 1em 2em 3em} /* Superior = 1em, derecho = 2em, inferior =
3em, izquierdo = 2em */body {padding: 1em 2em 3em 4em} /* Superior
= 1em, derecho = 2em, inferior = 3em, izquierdo = 4em */BordesCSS
permite modificar el aspecto de cada uno de los cuatro bordes de la
caja de un elemento. Para cada borde se puede establecer su anchura
o grosor, su color y su estilo, por lo que en total CSS define 20
propiedades relacionadas con los bordes.4.3.1. AnchuraLa anchura de
los bordes se controla con las cuatro propiedades
siguientes:Propiedadesborder-top-width,border-right-width,border-bottom-width,border-left-width
Valores(unidad de medida| thin | medium | thick ) |inherit
Se aplica aTodos los elementos
Valor inicialMedium
DescripcinEstablece la anchura de cada uno de los cuatro bordes
de los elementos
La anchura de los bordes se indica mediante una medida (en
cualquier unidad de medida absoluta o relativa) o mediante las
palabras clavethin(borde delgado),medium(borde normal) ythick(borde
ancho).La unidad de medida ms habitual para establecer el grosor de
los bordes es el pxel, ya que es la que permite un control ms
preciso sobre el grosor. Las palabras clave apenas se utilizan, ya
que el estndar CSS no indica explcitamente el grosor al que
equivale cada palabra clave, por lo que pueden producirse
diferencias visuales entre navegadores. As por ejemplo, el
grosormediumequivale a4pxen algunas versiones de Internet Explorer
y a3pxen el resto de navegadores.El siguiente ejemplo muestra un
elemento con cuatro anchuras diferentes de borde:
Figura 4.11Ejemplo de propiedad border-widthLas reglas CSS
utilizadas se muestran a continuacin:div { border-top-width: 10px;
border-right-width: 1em; border-bottom-width: thick;
border-left-width: thin;}Si se quiere establecer de forma simultnea
la anchura de todos los bordes de una caja, es necesario utilizar
una
propiedad"shorthand"llamadaborder-width:Propiedadborder-width
Valores(unidad de medida| thin | medium | thick ) {1, 4}
|inherit
Se aplica aTodos los elementos
Valor inicialMedium
DescripcinEstablece la anchura de todos los bordes del
elemento
La propiedadborder-widthpermite indicar entre uno y cuatro
valores. El significado de cada caso es el habitual de las
propiedades"shorthand":p { border-width: thin } /* thin thin thin
thin */p { border-width: thin thick } /* thin thick thin thick */p
{ border-width: thin thick medium } /* thin thick medium thick */p
{ border-width: thin thick medium thin } /* thin thick medium thin
*/Si se indica un solo valor, se aplica a los cuatro bordes. Si se
indican dos valores, el primero se aplica al borde superior e
inferior y el segundo valor se aplica al borde izquierdo y
derecho.Si se indican tres valores, el primero se aplica al borde
superior, el segundo se aplica al borde izquierdo y derecho y el
tercer valor se aplica al borde inferior. Si se indican los cuatro
valores, el orden de aplicacin es superior, derecho, inferior e
izquierdo.4.3.2. ColorEl color de los bordes se controla con las
cuatro propiedades
siguientes:Propiedadesborder-top-color,border-right-color,border-bottom-color,border-left-color
Valorescolor| transparent |inherit
Se aplica aTodos los elementos
Valor inicial-
DescripcinEstablece el color de cada uno de los cuatro bordes de
los elementos
El ejemplo anterior se puede modificar para mostrar cada uno de
los bordes de un color diferente:
Figura 4.12Ejemplo de propiedad border-colorLas reglas CSS
necesarias para mostrar los colores anteriores son las
siguientes:div { border-top-color: #CC0000; border-right-color:
blue; border-bottom-color: #00FF00; border-left-color: #CCC;}CSS
incluye una propiedad"shorthand"llamadaborder-colorpara establecer
de forma simultnea el color de todos los bordes de una
caja:Propiedadborder-color
Valores(color| transparent ) {1, 4} |inherit
Se aplica aTodos los elementos
Valor inicial-
DescripcinEstablece el color de todos los bordes del
elemento
En este caso, al igual que sucede con la propiedadborder-width,
es posible indicar de uno a cuatro valores y las reglas de
aplicacin son idnticas a las de la propiedadborder-width.4.3.3.
EstiloPor ltimo, CSS permite establecer el estilo de cada uno de
los bordes mediante las siguientes
propiedades:Propiedadesborder-top-style,border-right-style,border-bottom-style,border-left-style
Valoresnone | hidden | dotted | dashed | solid | double | groove
| ridge | inset | outset |inherit
Se aplica aTodos los elementos
Valor inicialnone
DescripcinEstablece el estilo de cada uno de los cuatro bordes
de los elementos
El estilo de los bordes slo se puede indicar mediante alguna de
las palabras reservadas definidas por CSS. Como el valor por
defecto de esta propiedad esnone, los elementos no muestran ningn
borde visible a menos que se establezca explcitamente un estilo de
borde.Siguiendo el ejemplo anterior, se puede modificar el estilo
de cada uno de los bordes:
Figura 4.13Ejemplo de propiedad border-styleLas reglas CSS
necesarias para mostrar los estilos anteriores son las
siguientes:div { border-top-style: dashed; border-right-style:
double; border-bottom-style: dotted; border-left-style: solid;}El
aspecto con el que los navegadores muestran los diferentes tipos de
borde se muestra a continuacin:
Figura 4.14Tipos de bordes definidos por CSSLos bordes ms
utilizados sonsolidydashed, seguidos dedoubleydotted. Los
estilosnoneyhiddenson idnticos visualmente, pero se diferencian en
la forma que los navegadores resuelven los conflictos entre los
bordes de las celdas adyacentes en las tablas.Para establecer de
forma simultnea los estilos de todos los bordes de una caja, es
necesario utilizar la
propiedad"shorthand"llamadaborder-style:Propiedadborder-style
Valores(none | hidden | dotted | dashed | solid | double |
groove | ridge | inset | outset ) {1, 4} |inherit
Se aplica aTodos los elementos
Valor inicial-
DescripcinEstablece el estilo de todos los bordes del
elemento
Como es habitual, la propiedad permite indicar de uno a cuatro
valores diferentes y las reglas de aplicacin son las habituales de
las propiedades"shorthand".4.3.4. Propiedades shorthandComo sucede
con los mrgenes y los rellenos, CSS define una serie de propiedades
de tipo"shorthand"que permiten establecer todos los atributos de
los bordes de forma simultnea. CSS incluye una
propiedad"shorthand"para cada uno de los cuatro bordes y una
propiedad"shorthand"global.Propiedadesborder-top,border-right,border-bottom,border-left
Valores(unidad de medida_borde ||color_borde || estilo_borde )
|inherit
Se aplica aTodos los elementos
Valor inicial-
DescripcinEstablece el estilo completo de cada uno de los cuatro
bordes de los elementos
El significado de cada uno de los valores especiales es el
siguiente: : unamedida CSSo alguna de las siguientes palabras
clave:thin,medium,thick. : uncolor de CSSo la palabra
clavetransparent : una de las siguientes palabras
clave:none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset.Las
propiedades"shorthand"permiten establecer alguno o todos los
atributos de cada borde. El siguiente ejemplo establece el color y
el tipo del borde inferior, pero no su anchura:h1 { border-bottom:
solid red;}En el ejemplo anterior, la anchura del borde ser la
correspondiente al valor por defecto (medium). Este otro ejemplo
muestra la forma habitual utilizada para establecer el estilo de
cada borde:div { border-top: 1px solid #369; border-bottom: 3px
double #369;}Por ultimo, CSS define una propiedad de
tipo"shorthand"global para establecer el valor de todos los
atributos de todos los bordes de forma directa:Propiedadborder
Valores(unidad de medida_borde ||color_borde || estilo_borde )
|inherit
Se aplica aTodos los elementos
Valor inicial-
DescripcinEstablece el estilo completo de todos los bordes de
los elementos
Las siguientes reglas CSS son equivalentes:div { border-top: 1px
solid red; border-right: 1px solid red; border-bottom: 1px solid
red; border-left: 1px solid red;}div { border: 1px solid red; }Como
el valor por defecto de la propiedadborder-styleesnone, si una
propiedadshorthandno establece explcitamente el estilo de un borde,
el elemento no muestra ese borde:/* Slo se establece el color, por
lo que el estilo es "none" y el borde no se muestra */div { border:
red; }/* Se establece el grosor y el color del borde, pero no su
estilo, por lo que es "none" y el borde no se muestra */div {
border-bottom: 5px blue; }Cuando los cuatro bordes no son idnticos
pero s muy parecidos, se puede utilizar la propiedadborderpara
establecer de forma directa los atributos comunes de todos los
bordes y posteriormente especificar para cada uno de los cuatro
bordes sus propiedades particulares:h1 { border: solid #000;
border-top-width: 6px; border-left-width: 8px;}Margen, relleno,
bordes y modelo de cajasLa anchura y altura de un elemento no
solamente se calculan teniendo en cuenta sus
propiedadeswidthyheight. El margen, el relleno y los bordes
establecidos a un elemento determinan la anchura y altura final del
elemento. En el siguiente ejemplo se muestran los estilos CSS de un
elemento:div { width: 300px; padding-left: 50px; padding-right:
50px; margin-left: 30px; margin-right: 30px; border: 10px solid
black;}La anchura total con la que se muestra el elemento no son
los300pxel indicados en la propiedadwidth, sino que tambin se aaden
todos sus mrgenes, rellenos y bordes:
Figura 4.15La anchura total de un elemento tiene en cuenta los
mrgenes, rellenos y bordesDe esta forma, la anchura del elemento en
pantalla sera igual a la suma de la anchura original, los mrgenes,
los bordes y los rellenos:30px + 10px + 50px + 300px + 50px + 10px
+ 30px = 480 pxelAs, la anchura/altura establecida con CSS siempre
hace referencia a la anchura/altura del contenido. La
anchura/altura total del elemento debe tener en cuenta adems los
valores del resto de partes que componen la caja delbox model.Por
otra parte, la guerra de navegadores que se produjo en los aos 90
provoc que cada fabricante (Microsoft y Netscape) aadiera sus
propias extensiones y mejoras en sus productos. Posteriormente,
aparecieron los estndares publicados por el W3C y los fabricantes
se encontraron con el problema de la incompatibilidad entre sus
implementaciones anteriores de HTML y CSS y las implementaciones
que requeran los estndares.La solucin que adoptaron fue la de
incluir en el navegador dos modos diferentes de funcionamiento:
modo compatible con las pginas antiguas (denominado"modo quirks"y
que se podra traducir como"modo raro") y modo compatible con los
nuevos estndares (denominado"modo estndar"). El modoquirkses
equivalente a la forma en la que se visualizaban las pginas en los
navegadores Internet Explorer 4 y Netscape Navigator 4.La
diferencia ms notable entre los dos modos es el tratamiento del"box
model", lo que puede afectar gravemente al diseo de las pginas
HTML. Los navegadores seleccionan automticamente el modo en el que
muestran las pginas en funcin delDOCTYPEdefinido por el documento.
En general, los siguientes tipos deDOCTYPEactivan el modoquirksen
los navegadores: No utilizar ningnDOCTYPE DOCTYPEanterior a HTML
4.0 () DOCTYPEde HTML 4.01 sin URL ()En el caso concreto de
Internet Explorer, tambin activan el modo quirks los modos XHTML
1.0 que incluyen la declaracin de XML (por ejemplo) al principio de
la pgina web:
Se pueden consultar todos los casos concretos que activan el
modoquirkspara cada navegador en la pgina
http://hsivonen.iki.fi/doctype/La versin 5.5 y anteriores de
Internet Explorer y las versiones 6 y 7 en modoquirkssiguen su
propio modelo de clculo de anchuras y alturas que es muy diferente
al mtodo definido por el estndar.La siguiente imagen muestra el
elemento del ejemplo anterior en la versin 6 de Internet Explorer
en modo estndar:
Figura 4.16Internet Explorer 6 en modo estndarLa anchura del
elemento es la que se obtiene de sumar la anchura de su contenido
(300), sus bordes (2 x 10) y sus rellenos (2 x 50). Por lo tanto,
la anchura del elemento son420pxel, a los que se suman los30pxel de
margen lateral a cada lado.Sin embargo, el mismo ejemplo en el
modoquirksde la versin 6 de Internet Explorer muestra el siguiente
aspecto:
Figura 4.17Internet Explorer 6 en modo quirksLas versiones
anteriores de Internet Explorer y las versiones 6 y 7 en
modoquirksconsideran que la anchura establecida por CSS no slo es
la anchura del contenido, sino que tambin incluye los bordes y el
relleno.Por lo tanto, en este caso la anchura total del elemento
(sin contar los mrgenes laterales) es de300pxel, el mismo valor que
se indica en la propiedadwidth. El espacio ocupado por los bordes
del elemento (2 x 10) y sus rellenos (2 x 50) se resta de la
anchura de su contenido.Para evitar este problema y crear diseos
con el mismo aspecto en cualquier navegador, es necesario evitar el
modoquirksde Internet Explorer. Por tanto, todas las pginas deben
incluir la declaracin apropiada deDOCTYPE.4.4.1. Los modos de
compatibilidad de Internet Explorer 8El navegador Internet Explorer
8 introduce el concepto de"compatibilidad de la pgina"para asegurar
que todas las pginas HTML se vean correctamente en cualquier versin
de ese navegador. En realidad, esta nueva caracterstica es una
mejora delmodo quirksexplicado anteriormente.Internet Explorer 8, a
diferencia de sus versiones anteriores, soporta completamente el
estndar CSS 2.1. Sin embargo, muchos sitios web se disearon para
Internet Explorer 6 y 7, por lo que incluyen trucos,hacksy filtros
que arreglan los errores y carencias de esas versiones del
navegador.Para evitar que las pginas diseadas para navegadores
anteriores se vean mal en esta nueva versin, Internet Explorer 8
incluye la opcin de "compatibilidad de la pgina", que permite
indicar la versin de Internet Explorer para la que la pgina ha sido
diseada.De esta forma, si la pgina no se visualiza correctamente en
Internet Explorer 8, se puede indicar al navegador que la muestre
como si fuera Internet Explorer 6 o 7. En realidad, Internet
Explorer 8 incluye seis modos de funcionamiento: Modo IE5: la pgina
se muestra segn el modoquirksde Internet Explorer 7, que es casi
idntico a como se vean las pginas en el navegador Internet Explorer
5. Modo IE7: la pgina se muestra en el modo estndar de Internet
Explorer 7, sin importar si la pgina contiene o no la directiva.
Modo IE8: los contenidos se muestran en el modo estndar de Internet
Explorer 8, que es el ms parecido al del resto de navegadores que
soportan los estndares (Firefox, Opera, Safari y Google Chrome).
Emular el modo IE7: el navegador decide cmo mostrar los contenidos
a partir de la directivade la pgina. Si esa directiva es una de las
que activan el modo estndar, la pgina se muestra en el modo estndar
de Internet Explorer 7. En otro caso, se muestra en el modoquirksde
Internet Explorer 5. Este modo es el ms til para la mayora de
sitios web. Emular el modo IE8: el navegador decide cmo mostrar los
contenidos a partir de la directivade la pgina. Si esa directiva es
una de las que activan el modo estndar, la pgina se muestra en el
modo estndar de Internet Explorer 8. En otro caso, se muestra en el
modoquirksde Internet Explorer 5. Modo lmite("edge mode"): indica a
Internet Explorer que los contenidos se deben mostrar en el modo de
compatibilidad ms avanzado disponible. Actualmente, este modo es
equivalente al modo IE8. Si las futuras versiones Internet Explorer
9 y 10 incluyeran mejor compatibilidad, las pginas se visualizaran
en ese modo avanzado de compatibilidad.El modo de compatibilidad de
la pgina se indica mediante una nueva etiquetacon la
propiedadX-UA-Compatibley cuyo valor es el que utiliza Internet
Explorer 8 para determinar el modo que se utiliza:
...
...
...
...
...
...
No obstante, esta opcin de compatibilidad de la pgina debe
entenderse como una solucin temporal que evita que los sitios web
se vean mal en Internet Explorer 8. La nica solucin correcta a
largo plazo consiste en actualizar las pginas para que sus diseos
sigan los estndares web.FondosEl ltimo elemento que forma elbox
modeles el fondo de la caja del elemento. El fondo puede ser un
color simple o una imagen. El fondo solamente se visualiza en el
rea ocupada por el contenido y su relleno, ya que el color de los
bordes se controla directamente desde los bordes y las zonas de los
mrgenes siempre son transparentes.Para establecer un color o imagen
de fondo en la pgina entera, se debe establecer un fondo al
elemento. Si se establece un fondo a la pgina, como el valor
inicial del fondo de los elementos es transparente, todos los
elementos de la pgina se visualizan con el mismo fondo a menos que
algn elemento especifique su propio fondo.CSS define cinco
propiedades para establecer el fondo de cada elemento
(background-color,background-image,background-repeat,background-attachment,background-position)
y otra propiedad de tipo"shorthand"(background).La
propiedadbackground-colorpermite mostrar un color de fondo slido en
la caja de un elemento. Esta propiedad no permite crear degradados
ni ningn otro efecto avanzado.Propiedadbackground-color
Valorescolor| transparent |inherit
Se aplica aTodos los elementos
Valor inicialtransparent
DescripcinEstablece un color de fondo para los elementos
El siguiente ejemplo muestra una pgina web con un color gris
claro de fondo:body { background-color: #F5F5F5;}Para crear efectos
grficos avanzados, es necesario utilizar la
propiedadbackground-image, que permite mostrar una imagen como
fondo de la caja de cualquier
elemento:Propiedadbackground-image
Valoresurl | none |inherit
Se aplica aTodos los elementos
Valor inicialnone
DescripcinEstablece una imagen como fondo para los elementos
CSS permite establecer de forma simultnea un color y una imagen
de fondo. En este caso, la imagen se muestra delante del color, por
lo que solamente si la imagen contiene zonas transparentes es
posible ver el color de fondo.El siguiente ejemplo muestra una
imagen como fondo de toda la pgina:body { background-image:
url("imagenes/fondo.png") }Las imgenes de fondo se indican a travs
de su URL, que puede ser absoluta o relativa. Suele ser
recomendable crear una carpeta de imgenes que se encuentre en el
mismo directorio que los archivos CSS y que almacene todas las
imgenes utilizadas en el diseo de las pginas.As, las imgenes
correspondientes al diseo de la pgina se mantienen separadas del
resto de imgenes del sitio y el cdigo CSS es ms sencillo (por
utilizar URL relativas) y ms fcil de mantener (por no tener que
actualizar URL absolutas en caso de que se cambie la estructura del
sitio web).Por otra parte, suele ser habitual indicar un color de
fondo siempre que se muestra una imagen de fondo. En caso de que la
imagen no se pueda mostrar o contenga errores, el navegador mostrar
el color indicado (que debera ser, en lo posible, similar a la
imagen) y la pgina no parecer que contiene errores.Si la imagen que
se quiere mostrar es demasiado grande para el fondo del elemento,
solamente se muestra la parte de imagen comprendida en el tamao del
elemento. Si la imagen es ms pequea que el elemento, CSS la repite
horizontal y verticalmente hasta llenar el fondo del elemento.Este
comportamiento es til para establecer un fondo complejo a una pgina
web entera. El siguiente ejemplo utiliza una imagen muy pequea para
establecer un fondo complejo a toda una pgina:Imagen original
Figura 4.18Imagen original utilizada para el fondo de la
pginaReglas CSSbody {
background-image:url(imagenes/fondo.gif);}Resultado
Figura 4.19Pgina con una imagen de fondoCon una imagen muy
pequea (y que por tanto, se puede descargar en muy poco tiempo) se
consigue cubrir completamente el fondo de la pgina, con lo que se
consigue un gran ahorro de ancho de banda.En ocasiones, no es
conveniente que la imagen de fondo se repita horizontal y
verticalmente. Para ello, CSS introduce la
propiedadbackground-repeatque permite controlar la forma de
repeticin de las imgenes de fondo.Propiedadbackground-repeat
Valoresrepeat | repeat-x | repeat-y | no-repeat |inherit
Se aplica aTodos los elementos
Valor inicialrepeat
DescripcinControla la forma en la que se repiten las imgenes de
fondo
El valorrepeatindica que la imagen se debe repetir en todas
direcciones y por tanto, es el comportamiento por defecto. El
valorno-repeatmuestra una sola vez la imagen y no se repite en
ninguna direccin. El valorrepeat-xrepite la imagen slo
horizontalmente y el valorrepeat-yrepite la imagen solamente de
forma vertical.El sitio web http://www.kottke.org/ utiliza el
valorrepeat-xpara mostrar una imagen de fondo en la cabecera de la
pgina:
Figura 4.20Uso de repeat-x en la pgina de Kottke.orgLas reglas
CSS definidas para la cabecera son:#hdr { background:
url("/images/ds.gif") repeat-x; width: 100%; text-align:
center;}Por otra parte, el sitio web http://veerle.duoh.com/
utiliza el valorrepeat-ypara mostrar el fondo de una columna de
contenidos:
Figura 4.21Uso de repeat-y en la pgina de Veerle.duoh.comLas
reglas CSS definidas para esa columna de contenidos son:.wide
#content-secondary { width: 272px; margin: 13px 0 0 0; position:
relative; margin-left: -8px; background:
url("./graphics/wide/bg-content-secondary.gif") repeat-y;}Adems de
seleccionar el tipo de repeticin de las imgenes de fondo, CSS
permite controlar la posicin de la imagen dentro del fondo del
elemento mediante la
propiedadbackground-position.Propiedadbackground-position
Valores( (porcentaje|unidad de medida| left | center | right )
(porcentaje|unidad de medida| top | center | bottom )? ) | ( ( left
| center | right ) || ( top | center | bottom ) ) |inherit
Se aplica aTodos los elementos
Valor inicial0% 0%
DescripcinControla la posicin en la que se muestra la imagen en
el fondo del elemento
La propiedadbackground-positionpermite indicar la distancia que
se desplaza la imagen de fondo respecto de su posicin original
situada en la esquina superior izquierda.Si se indican dos
porcentajes o dos medidas, el primero indica el desplazamiento
horizontal y el segundo el desplazamiento vertical respecto del
origen (situado en la esquina superior izquierda). Si solamente se
indica un porcentaje o una medida, se considera que es el
desplazamiento horizontal y al desplazamiento vertical se le asigna
automticamente el valor de 50%.Cuando se utilizan porcentajes, su
interpretacin no es intuitiva. Si el valor de la
propiedadbackground-positionse indica mediante dos porcentajesx%
y%, el navegador coloca el punto(x%, y%)de la imagen de fondo en el
punto(x%, y%)del elemento.Las palabras clave permitidas son
equivalentes a algunos porcentajes significativos:top= 0%,left=
0%,center= 50%,bottom= 100%,right= 100%.CSS permite mezclar
porcentajes y palabras clave, como por ejemplo50% 2cm,center
2cm,center 10%.Si se utilizan solamente palabras clave, el orden es
indiferente y por tanto, es equivalente indicartop leftyleft top.El
siguiente ejemplo muestra una misma imagen de fondo posicionada de
tres formas diferentes:
Figura 4.22Ejemplo de propiedad background-positionLas reglas
CSS del ejemplo anterior se muestran a continuacin:#caja1 {
background-image: url("images/help.png"); background-repeat:
no-repeat; background-position: bottom left;}#caja2 {
background-image: url("images/help.png"); background-repeat:
no-repeat; background-position: right top;}#caja3 {
background-image: url("images/help.png"); background-repeat:
no-repeat; background-position: 50% 50%;}bottom leftright top50%
50%Opcionalmente, se puede indicar que el fondo permanezca fijo
cuando la ventana del navegador se desplaza mediante las barras
descroll. Se trata de un comportamiento que en general no es
deseable y que algunos navegadores no soportan correctamente. La
propiedad que controla este comportamiento
esbackground-attachment.Propiedadbackground-attachment
Valoresscroll | fixed |inherit
Se aplica aTodos los elementos
Valor inicialscroll
DescripcinControla la forma en la que se visualiza la imagen de
fondo: permanece fija cuando se hace scroll en la ventana del
navegador o se desplaza junto con la ventana
Para hacer que una imagen de fondo se muestre fija al desplazar
la ventana del navegador, se debe aadir la
propiedadbackground-attachment: fixed.Por ltimo, CSS define una
propiedad de tipo"shorthand"para indicar todas las propiedades de
los colores e imgenes de fondo de forma directa. La propiedad se
denominabackgroundy es la que generalmente se utiliza para
establecer las propiedades del fondo de los
elementos.Propiedadbackground
Valores( background-color|| background-image ||
background-repeat || background-attachment || background-position )
|inherit
Se aplica aTodos los elementos
Valor inicial-
DescripcinEstablece todas las propiedades del fondo de un
elemento
El orden en el que se indican las propiedades es indiferente,
aunque en general se sigue el formato indicado de color, url de
imagen, repeticin y posicin.El siguiente ejemplo muestra la ventaja
de utilizar la propiedadbackground:/* Color e imagen de fondo de la
pgina mediante una propiedad shorthand */body { background: #222d2d
url(./graphics/colorstrip.gif) repeat-x 0 0; }/* La propiedad
shorthand anterior es equivalente a las siguientes propiedades
*/body { background-color: #222d2d; background-image:
url("./graphics/colorstrip.gif"); background-repeat: repeat-x;
background-position: 0 0;}La propiedadbackgroundpermite asignar
todos o slo algunos de todos los valores que se pueden definir para
los fondos de los elementos:background:
url("./graphics/wide/bg-content-secondary.gif")
repeat-y;background:
url("./graphics/wide/footer-content-secondary.gif") no-repeat
bottom left;background: transparent
url("./graphics/navigation.gif") no-repeat 0 -27px;background:
none;background: #293838
url("./graphics/icons/icon-permalink-big.gif") no-repeat center
left;