- Los elementos en línea son elementos que ocupan una o varias líneas del texto de un elemento en bloque. Por ejemplo, un elemento EM
será un elemento en línea. En una misma línea puede haber varios elementos en línea, cada uno de los cuales define su propio cuadro:
Si un elemento no cabe en una línea, crea un cuadro diferente para cada línea en la que está presente:
En general no podemos especificar la anchura y la altura de un elemento en línea, aunque sí sus márgenes, bordes y rellenos.
- ¿Por qué dices "en general"?
- Porque existe un tipo especial de elementos para los que sí se puede: los elementos reemplazados. Un elemento reemplazado puede ser un elemento en bloque o en línea. Lo que lo define es el hecho de que sus dimensiones en principio son desconocidas.
- Mmmm, ¿por ejemplo?
- Por ejemplo, el elemento IMG
, si recuerdas del tutorial anterior, tiene esta forma:
<img src="imagen.png" alt="Texto alternativo para la imagen">
El navegador sustituirá el elemento por una imagen. La imagen tendrá una anchura y altura intrínsecas, pero en el código HTML esas dimensiones no vienen. Hasta que el elemento no es reemplazado por la imagen correspondiente, las dimensiones no se conocen.
- Aah, ya entiendo. Pero recuerdo que me dijiste que se puede poner la anchura y la altura con los atributos width
y height
del elemento IMG
.
- Sí. Puedes especificar la anchura y la altura con esos parámetros, o puedes hacerlo en una hoja de estilo. Y puedes poner los valores reales del tamaño de la imagen, u otros valores más grandes o más pequeños. Y este es el caso en que para un elemento en línea (un IMG
normalmente es un elemento en línea) se pueden especificar la anchura y la altura.
- Ajá. Sí, creo que te sigo.
- Lo que sí se puede especificar para los elementos en línea es la altura de las líneas. Existe un atributo que permite definir la altura de las líneas, o sea, la distancia que separa cada dos líneas de un párrafo. Lo veremos más a fondo después.
- Muy bien.
- Genial. Un detalle más antes de empezar con el repaso de las propiedades de estilo. El fondo sobre el que todo se representa, el lienzo, corresponde típicamente el elemento BODY
. Esto quiere decir que para especificar por ejemplo el color de fondo, los márgenes, etc. del documento, habrá que aplicar estas propiedades de estilo al elemento BODY
.
- Entiendo.
- En CSS2 la noción del lienzo es conceptualmente más abstracta y suele dar lugar a quebraderos de cabeza. De momento, para nosotros, la anchura del lienzo es para que nos entendamos la anchura de la ventana del navegador, y la altura del lienzo es la mínima necesaria. ¿De acuerdo?
- Está bien...
- Supongo que ahora mismo tendrás un lío morrocotudo con todo lo de elementos en bloque y en línea...
- ¡Lo puedes jurar!
- Bueno, en cuanto tengas un poquito de experiencia te darás cuenta de que en cierto sentido la especificación CSS1 es muy simple. Unas párrafos van a continuación de los otros, y la altura de los párrafos casi siempre viene definida simplemente por sus contenidos y por la altura de sus líneas. Lo único que se escapa a este "flujo normal" son los elementos flotantes, que se pueden llevar a la izquierda o a la derecha, y a los que el resto del texto se adapta ocupando el ancho que dejan libre.
- Ya veo.
- Donde nos permite actuar CSS1 por tanto es: en los estilos de las letras (fuentes, negrita, cursiva, etc.), colores de texto y fondos, estilos de texto (separación entre palabras, alineación, altura de líneas...), propiedades de cuadros (márgenes, rellenos, bordes, tamaño), y estilos para las listas (tipo de marcador, tipo de lista, etc.). Si te parece vamos a ver las propiedades de CSS1 una a una.
- Ok, me parece bien.
Sitio Web mantenido por Juan R. Pozo (jrpozo arroba conclase punto net).
Última modificación: 14/10/2001 - © 2001 Juan R. Pozo y conclase.net