Una cuestión interesante, desde el punto de vista teórico, se nos puede plantear cuando tratamos de seleccionar y operar con las propiedades de los elementos (X)HTML, es la de diferenciar las propiedades, digamos nativas, de los elementos (X)HTML y las que les son atribuidas a través de CSS. Es el caso de dos de los valores que puede tomar la propiedad
display : inline y block .
Desde el punto de vista del (X)HTML hay elementos cuya naturaleza aporta un valor, ya sea
inline o block . Pues bien, estos elementos pueden ser modificados en el valor de esa propiedad a través de CSS, dando como resultante dos capas diferentes en cuanto a la significación y en cuanto a la presentación. Veamos algunos ejemplos.
Podemos ver la naturaleza de algunos elementos (X)HTML:
Así las cosas, son elementos de bloque:
address, blockquote, center, dl, dir, div, fieldset, form, h1-6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul .
Y son elementos inline:
a, abbr, acronym, applet, b, basefont, bdo, big , br, button, cite, code, dfn, em, font, i, img, input, iframe, kbd, label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var .
Pues bien, con CSS podemos modificar la presentación, y por ende el comportamiento, de estos elementos en cuanto al valor de la propiedad
display . Pero hay que tener siempre en cuenta que cuando modificamos el valor de esa propiedad con CSS, lo hacemos sólo en la capa de presentación, ya que desde la perspectiva semántica estos elementos seguirán manteniendo su valor inicial.
Por ejemplo, al elemento
a , que por su naturaleza pertenece al grupo de elementos inline , podemos aplicarle a través de CSS un valor en la propiedad display de tipoblock :<a href="foo.html" lang="es" xml:lang="es" hreflang="en"style="display:block;">Enlace</a>
De este modo podemos presentar al elemento
a a nuestro gusto, adquiriendo las propiedades de los elementos block . Recordemos: Los elementos de bloque generan una nueva línea (renglón) en el flujo del texto.
Y exactamente lo mismo podemos hacer a la inversa, que un elemento
block como por ejemplo p , podemos hacer, vía CSS, que adquiera un comportamiento y presentación de tipo inline :<p style="display:inline;">Párrafo de texto</p> |
miércoles, 12 de octubre de 2011
Valores de la propiedad display: inline y block
Suscribirse a:
Enviar comentarios (Atom)
No hay comentarios:
Publicar un comentario