Divisiones: la
etiqueta <div>Divisiones: la
etiqueta <div>La etiqueta <div> define una división. Esta etiqueta permite agrupar varios elementos de bloque (párrafos, encabezados, listas, tablas, divisiones, etc). En principio, los navegadores no muestran nada especial cuando se crea una división, salvo que se dé formato a la división con la hoja de estilo.
Nota: Hay gente y programas que llaman "capas" a las divisiones. No estoy seguro, pero supongo que ese término se debe a que Netscape 4.0 introdujo una etiqueta llamada <layer> (etiqueta que yo diría que no formó parte de ninguna recomendación del W3C) que jugaba un papel similar a la etiqueta <div>.
En los ejemplos siguientes hay dos divisiones que incluyen tres párrafos cada una. En el primer ejemplo no puede decirse si hay divisiones o no, mientras que en el segundo sí.
|
div { } |
El hombre es fuego; la mujer, estopa; llega el diablo y sopla. Para el amor y la muerte, no hay cosa fuerte. Viejo el pajar, malo de encender y peor de apagar. ¿Enseñas sin saber? Como no sea el culo, no sé qué. Practicar hace maestro; que no leer en el cuaderno. Lo que natura no da, Salamanca no presta |
|
|
div { background-color: lightblue; margin: 10px; } |
El hombre es fuego; la mujer, estopa; llega el diablo y sopla. Para el amor y la muerte, no hay cosa fuerte. Viejo el pajar, malo de encender y peor de apagar. ¿Enseñas sin saber? Como no sea el culo, no sé qué. Practicar hace maestro; que no leer en el cuaderno. Lo que natura no da, Salamanca no presta |
La etiqueta <div> se puede anidar (es decir, que una división puede contener otras divisiones), por lo que se utiliza para estructurar en bloques el contenido de la página web. Para distinguir unas divisiones de otras en la hoja de estilo es necesario utilizar selectores de tipo o selectores de descendientes, como en el ejemplo siguiente:
|
|
div { border: black 3px solid; margin: 10px;
padding: 10px; } div div { background-color: lightblue; margin: 10px; } |
El hombre es fuego; la mujer, estopa; llega el diablo y sopla. Para el amor y la muerte, no hay cosa fuerte. Viejo el pajar, malo de encender y peor de apagar. ¿Enseñas sin saber? Como no sea el culo, no sé qué. Practicar hace maestro; que no leer en el cuaderno. Lo que natura no da, Salamanca no presta |
Una división no puede insertarse dentro de una etiqueta en-línea (<strong>,<em>, etc.) o de un bloque de texto (párrafo <p>, encabezado <h1> ... <h6>, dirección <address>, pre-formateado <pre>, lista, etc), pero si puede insertarse dentro de una tabla o un bloque de cita <blockquote>.
Para crear una división, hay que:
) de la ventana
de Herramientas.Para borrar una división, hay que:
Un error que se suele cometer al asignar un atributo a una división (por ejemplo, al asignar una clase) en Amaya es el siguiente: en vez de situar el cursor en un párrafo incluido en una división y pulsar un par de veces F2 para seleccionar la división, el usuario selecciona con el ratón todos los párrafos incluidos en la división y pulsa solamente una vez F2. Al asignar la clase, en vez de asignarla a la división, la clase se asigna a todos y cada uno de los párrafos seleccionados. Para evitar este error, es conveniente fijarse en la línea de estado, que indica el elemento seleccionado (en el ejemplo anterior, <p> o <div>). Otro detalle en el que poder fijarse es que al seleccionar los párrafos, el espacio intermedio entre párrafos no cambia de color, mientras que al seleccionar la división sí que lo hace.
Autor: Bartolomé Sintes Marco