| 4.1 El formato visual | ||||
 |
Anterior | Siguiente |  |
|
¡CSS en acción!
Seleccione otra hoja de estilo para navegar:
Actual: default.css
Si hay algo que extrañamos los diseñadores gráficos en el código HTML son las herramientas que programas como Quark Express y PageMaker ofrecen para la composición de una página. El modelo de formato visual de CSS (es decir, el modelo que siguen los navegadores para procesar el contenido de un documento para los medios visuales) permite que esas herramientas estén disponibles también para el diseño de las páginas Web.
Este modelo de formato visual rige el comportamiento de las cajas generadas por los elementos de la página. Hemos visto hasta ahora algunas propiedades (bordes, márgenes, rellenos) que pueden aplicarse a las cajas y también las propiedades que definen su color/imagen de fondo. Ahora vamos a ver cómo se puede definir el tipo y dimensiones de esas cajas, su comportamiento y relación con las otras cajas en la estructura del documento.
Para comenzar debemos saber que en HTML existen tres tipos de elementos:
<P> o <DIV>).
Para hacerlo más sencillo, podemos decir que son aquellos que comienzan
una nueva línea dentro del documento. Los elementos a nivel de bloque
generan una caja de bloque principal que sólo contiene otras cajas
de bloque.<B> o <EM>).
| 'display' | |
|---|---|
| Valores: | inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit |
| Valor inicial: | inline |
| Se aplica a: | todos los elementos |
| Se hereda?: | no |
| Porcentajes: | no admitidos |
A continuación se explica el significado de algunos de estos valores, pero al único al que vamos a dedicarle nuestra atención, por ahora, es a "none".
Ver
En este punto es necesario hacer algunas aclaraciones. Teóricamente,
estos valores nos permiten alterar el comportamiento visual de los elementos
de la página, por ejemplo, haciendo que un elemento a nivel de línea
en HTML (supongamos <CODE>) se transforme en un elemento
de bloque, de modo que cualquier texto marcado con <CODE></CODE>
comenzaría en una nueva línea. De igual modo, podríamos
hacer que cualquier elemento se comporte como una tabla o como parte de una
tabla. Con HTML no tiene mucho sentido ya que existen elementos como las tablas,
columnas y celdas, pero otros lenguajes (XML, por ejemplo) no tienen dichos
elementos.
| 'position' | |
|---|---|
| Valores: | static | relative | absolute | fixed | inherit |
| Valor inicial: | static |
| Se aplica a: | todos los elementos, no al contenido generado |
| Se hereda?: | no |
| Porcentajes: | no admitidos |
Con CSS los autores pueden ubicar los elementos de la página usando uno de estos valores:
Ver
Ver
Ver
DIV#def {position: absolute}
| 'top' | |
|---|---|
| Valores: | <medida> | <porcentaje> | auto | inherit |
| Valor inicial: | auto |
| Se aplica a: | los elementos posicionados |
| Se hereda?: | no |
| Porcentajes: | referidos a la altura del bloque de contención |
Esta propiedad especifica la distancia que se desplaza el elemento por debajo del borde superior del bloque de contención de la caja.
| 'right' | |
|---|---|
| Valores: | <medida> | <porcentaje> | auto | inherit |
| Valor inicial: | auto |
| Se aplica a: | los elementos posicionados |
| Se hereda?: | no |
| Porcentajes: | referidos al ancho del bloque de contención |
Esta propiedad especifica la distancia que se desplaza el elemento hacia la izquierda del borde derecho del bloque de contención de la caja.
| 'bottom' | |
|---|---|
| Valores: | <medida> | <porcentaje> | auto | inherit |
| Valor inicial: | auto |
| Se aplica a: | los elementos posicionados |
| Se hereda?: | no |
| Porcentajes: | referidos a la altura del bloque de contención |
Esta propiedad especifica la distancia que se desplaza el elemento por sobre de borde inferior del bloque de contención de la caja.
| 'right' | |
|---|---|
| Valores: | <medida> | <porcentaje> | auto | inherit |
| Valor inicial: | auto |
| Se aplica a: | los elementos posicionados |
| Se hereda?: | no |
| Porcentajes: | referidos al ancho del bloque de contención |
Esta propiedad especifica la distancia que se desplaza el elemento hacia la derecha del borde izquierdo del bloque de contención de la caja.
Los valores para las cuatro propiedades tienen los siguientes significados:
Para las cajas con position:absolute, el desplazamiento es con
respecto al bloque de contención de la caja. Para las cajas con position:relative,
el desplazamiento es con respecto al borde externo de la propia caja (es decir,
la caja de desplaza de su posición normal dentro de la página
de acuerdo a estas propiedades).
DIV#def {position: absolute;
left: 30px;
top: 25% }
| 'z-index' | |
|---|---|
| Valores: | auto | <entero> | inherit |
| Valor inicial: | auto |
| Se aplica a: | los elementos posicionados |
| Se hereda?: | no |
| Porcentajes: | no admitidos |
Como hemos visto, los elementos pueden ubicarse en posiciones precisas dentro de la página. Esta posibilidad puede provocar que, en algunos casos, ciertos elementos se superpongan visualmente con otros; en esas situaciones, ¿cuál queda por encima y cuál por debajo?
Por lo general, el navegador usa el mismo orden que los elementos tienen en
la página para definir el orden en que son apilados. Este orden dentro
de la pila de elementos puede adjudicarse explícitamente con la propiedad
z-index utilizando un valor entero (cuanto más alto el entero,
más cercano al lector o más arriba en la pila).
Se dice que un elemento establece un contexto de pila al cual pertenecen todos sus descendientes. En cada uno de esos contextos se establece un nuevo nivel de pila para los elementos descendientes. Y aquí lo importante: el contexto de pila (¡no la propiedad z-index!) es heredado y los elementos pertenecientes a distintos contextos no pueden "mezclarse".
Veamos el significado de lo anterior con un ejemplo: si en una página
encontramos dos elementos (A y B), uno con
z-index=5 (A) y el otro con z-index=3
(B), A será procesado al frente de
B. Supongamos ahora que A tiene un descendiente
(C) con z-index=0: el elemento C,
por pertenecer al contexto de pila del elemento ubicado más arriba, también
será procesado por encima de B (aunque B
tenga z-index=3). Todos los elementos descendientes de
A se ubicarán por encima de B (y también
por encima de todos los descendientes de B).
Estas reglas pueden resultar confusas pero son bastante intuitivas, ya que resulta lógica que existiendo dos elementos con distinto orden, todos los descendientes del elemento ubicado más al frente se ubiquen por sobre todos los descendientes del elemento ubicado más atrás. Por supuesto, la misma regla se aplica recursivamente a los descendientes de un mismo elemento (si dentro de C encontramos dos elementos (D y E), uno con..., y así infinitamente).
Hay que hacer notar que esta propiedad se aplica solamente a los elementos posicionados (ver la propiedad 'position' más arriba) y que pueden usarse valores negativos. Los valores tienen los siguientes significados:
| 'float' | |
|---|---|
| Valores: | left | right | none | inherit |
| Valor inicial: | none |
| Se aplica a: | todos menos los elementos posicionados y los contenidos generados |
| Se hereda?: | no |
| Porcentajes: | no admitidos |
Un flotante es una caja que es desplazada a la izquierda o a la derecha en la línea actual. Esta propiedad especifica si una caja debe flotar a la izquierda, derecha o no debe flotar en absoluto. Los valores de esta propiedad tienen los siguientes significados:
| 'clear' | |
|---|---|
| Valores: | none | left | right | both | inherit |
| Valor inicial: | none |
| Se aplica a: | los elementos a nivel de bloque |
| Se hereda?: | no |
| Porcentajes: | no admitidos |
Esta propiedad indica cuál de los lados de la(s) caja(s) de un elemento no puede quedar adyacente a una caja flotante anterior. Esta propiedad sólo puede especificarse para elementos a nivel de bloque (incluyendo también a los elementos flotantes). Los valores tienen los siguientes significados: