AGRUPACIN DE ELEMENTOS

Los Elementos DIV y SPAN los podemos utilizar para agrupar partes de nuestros documentos, de tal forma, que podremos identificar o aplicar un determinado estilo a un bloque, que est compuesto por un grupo de elementos seleccionados! "ada #ez que acaba un p rrafo se produce un salto de l$nea con espaciado incluido, por lo que entre dos p rrafos %abr siempre una l$nea en blanco! &DIV'!!!&(DIV' Es un elemento de bloque! "ada #ez que acaba un p rrafo se produce un salto de l$nea con espaciado incluido, por lo que entre dos p rrafos %abr siempre una l$nea en blanco, el elemento DIV en #ez de crear un salto de l$nea con separaci)n crea un salto de l$nea simple entre dos bloques! &SPAN'!!!&(SPAN' Es un elemento de l$nea! No crea salto de l$nea, por lo que el contenido del elemento SPAN se #era uno a continuaci)n del otro, en la misma l$nea! *ecordamos que dentro de un elemento de bloque, podemos situar elementos de bloque y elementos de l$nea! + dentro de un elemento de l$nea, s)lo podemos incluir, elementos de l$nea! Los atributos de los elementos DIV y SPAN son los siguientes, lang, dir, title, style, id, class, align!

"ap$tulo - . /loques

*esumen 012L

Cdigo fuente ejemplo agrupacin elementos

Resultado ejemplo agrupacin elementos

"ap$tulo - . /loques

*esumen 012L

"ap$tulo - . /loques

*esumen 012L

Mrgenes

El margen e6terno que rodea al contenido de un elemento de bloque y que de7a #er el fondo a su alrededor, se puede controlar a partir de las siguientes propiedades "SS, 2argin8top 2argin8bottom 2argin8left 2argin8rig%t 2argin Establece el alto del margen superior! Establece el alto del margen inferior! Establece el anc%o del margen izquierdo! Establece el anc%o del margen derec%o! Establece los cuatro m rgenes!

El margen interno es el que separa al contenido de un elemento de bloque con su borde delimitador, 9ste se puede controlar a partir de las siguientes propiedades "SS, Padding8top Establece el alto del margen interno superior! Establece el alto del margen interno inferior! Establece el anc%o del margen interno izquierdo! Establece el anc%o del margen interno derec%o! Establece los cuatro m rgenes internos! *esumen 012L :

Padding8bottom

Padding8left

Padding8rig%t

Padding

"ap$tulo - . /loques

Cdigo fuente ejemplo agrupacin elementos y mrgenes

Resultado ejemplo agrupacin elementos y mrgenes

"ap$tulo - . /loques

*esumen 012L

Dimensin de bloq e
La dimensi)n de un bloque, se obtiene por el anc%o de la p gina y por el alto necesario del contenido de 9ste y los m rgenes establecidos! Disponemos de #arias propiedades de estilo "SS, que nos #a a permitir configurar las dimensiones de los bloques que dise<emos! Podemos %acerlo con medidas absolutas o relati#as, es decir, nos #amos a e6presar en unidades de medidas conocidas por "SS, o bien, nos e6presaremos en porcenta7es! Las propiedades son las siguientes, =idt% 0eig%t 2in8>idt% Permite definir el anc%o de un bloque! Permite definir el alto de un bloque! Permite definir el anc%o m$nimo de un bloque ?IE lo ignora@! Permite definir el alto m$nimo de un bloque ?IE lo ignora@! Permite definir el anc%o m 6imo de un bloque ?IE lo ignora@! Permite definir el alto m 6imo de un bloque ?IE lo ignora@!

2in8%eig%t

2a68>idt%

2a68%eig%t

1enemos que tener en cuenta, que cuando una #entana se #a estrec%ando, el te6to fluye en sentido #ertical, de tal manera, que si el bloque definido tiene una altura fi7a establecida, la cu l, sea inferior para albergar el te6to, el resultado, posiblemente no sea el que %ubi9ramos deseado! Ante 9sta %ipot9tica situaci)n, los agentes de usuario pueden responder de maneras diferentes!

"ap$tulo - . /loques

*esumen 012L

2ozilla Birefo6 mantiene la altura de bloque fi7ada, por lo que el te6to se desborda del rea establecida! 2ientras, Internet E6plorer, desobedece el alto fi7ado, y e6tiende la zona #erticalmente, %asta completar el te6to!

Ante la siguiente definici)n &DIV styleCDE!!F min8>idt%,3GcmF >idt%,-cmF %eig%t,4cmD ' para el bloque de fondo gris, obtenemos estos resultados,

Navegador Mozilla Firefox - Resultado ejemplo dimensiones

"ap$tulo - . /loques

*esumen 012L

Navegador Internet

xplorer - Resultado ejemplo dimensiones

"ap$tulo - . /loques

*esumen 012L

!loq es "nid"dos

Dentro de un elemento DIV, dec$amos que podemos incluir elementos de bloque y elementos de l$nea, por lo cu l, dentro de un elemento DIV podemos incluir otro(s elemento(s DIV y as$ sucesi#amente!

Navegador Mozilla Firefox - Resultado ejemplo !lo"ues anidados

"ap$tulo - . /loques

*esumen 012L

!ordes
1odos los elementos de bloque ? 0n, P, JL, KL, DL, DIV @ disponen de bordes, aunque por defecto, estos no son #isibles! Podremos controlar de forma independiente los cuatro bordes del rea! Las propiedades con las que contamos son las siguientes , /order8top8>idt% Establece el grosor del borde superior! Establece el color del borde superior! Establece el estilo del borde superior! Establece el grosor, color y estilo del borde superior! Establece el grosor del borde inferior! Establece el color del borde inferior! Establece el estilo del borde inferior! Establece el grosor, color y estilo del borde inferior! Establece el grosor del borde izquierdo!

/order8top8color

/order8top8style

/order8top

/order8bottom8>idt%

/order8bottom8color

/order8bottom8style

/order8bottom

/order8left8>idt%

"ap$tulo - . /loques

*esumen 012L

3G

/order8left8color

Establece el color del borde izquierdo! Establece el estilo del borde izquierdo! Establece el grosor, color y estilo del borde izquierdo! Establece el grosor del borde derec%o! Establece el color del borde derec%o! Establece el estilo del borde derec%o! Establece el grosor, color y estilo del borde derec%o! Establece el grosor de los cuatro bordes! Establece el color de los cuatro bordes! Establece el estilo de los cuatro bordes! Establece el grosor, color y estilo de los cuatro bordes!

/order8left8style

/order8left

/order8rig%t8>idt%

/order8rig%t8color

/order8rig%t8style

/order8rig%t

/order8>idt%

/order8color

/order8style

/order

"ap$tulo - . /loques

*esumen 012L

33

/order8>idt% permite indicar #arias medidas para los distintos bordes, en tal caso el orden ser superior, derec%o, inferior e izquierdo! Los #alores para el grosor son o bien medidas establecidas, o bien, las siguientes, o 1%in o 2edium o 1%icL Bino ?3p6@! Intermedio ?5p6@! Mrueso ?;p6@!

Los #alores para el estilo, o None o Solid o Dotted o Das%ed o Double o Mroo#e o *idge o Inset o Kutset o 0idden "ap$tulo - . /loques Sin borde! De color s)lido y trazo continuo! Punteado! A trazos discontinuos! Doble! 0undido! *esaltado! 0undido, bordes alternados! *esaltado, bordes alternados! In#isible! *esumen 012L 34

Navegador Mozilla Firefox - Resultado ejemplo !ordes

Aline"#in $er%i#"l
Dentro de la misma l$nea nos podemos encontrar con te6to de distintas alturas, por lo cu l, e6iste una alineaci)n a la parte inferior de la l$nea que podemos modificar! Para especificar la alineaci)n #ertical disponemos de la propiedad #ertical8align! Los #alores que dispone la propiedad son los siguientes, o /aseline o 2iddle o Sub o Super o 1e6t8top Alinea el margen inferior del rea! Alinea al medio de la l$nea! Sub$ndice! Super$ndice! Al margen superior!

"ap$tulo - . /loques

*esumen 012L

35

o 1e6t8bottom o 2edida te6to o lo ba7a!

Al margen inferior! Jn #alor positi#o o negati#o, que sube el

o Porcenta7e Jn porcenta7e positi#o o negati#o, que sube el te6to o lo ba7a con proporci)n al alto de la l$nea!

La propiedad Line8%eig%t, permite dar un #alor para establecer el alto de l$nea!

Navegador Mozilla Firefox - Resultado ejemplo alineacin vertical

"ap$tulo - . /loques

*esumen 012L

3: