Elementos en linea y de bloque

La característica probablemente más importante del lenguaje de hojas de estilo CSS es el modelo de cajas o “box model” o div. Este modelo hace que todos los elementos incluidos en una página HTML se representen mediante cajas rectangulare. Css permite controlar el aspecto de todas las cajas.

Estas cajas se pueden ocultar, desplazar respeto a su posición original y fijarse en alguna posición especifica. Cada una de las cajas está formada por seis partes:

• margin (espacio entre caja y las posibles cajas adyacentes)
• background-color (color que se muestra por detrás del contenido y el espacio de relleno)
• background-image
• padding (espacio entre contenido y el borde que lo encierra)
• border (linea que encierra el contenido y su relleno)
• content (contenido de la página HTML)

El relleno y el margen son transparentes por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo, y en el espacio ocupado por el margen se muestra el color o imagen de fondo de su elemento padre. Si ningún elemento padre tiene definido un color o imagen de fondo se muestra el color o imagen de fondo de la propia página.

Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. Pero si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo.

div - esta etiqueta se encarga de crear una capa, que es un elemento de bloque que sirve de contenedor a otros elementos de bloque o a otros elementos en linea (inline) como span.

span - se usa para añadir características visuales distintivas a partes especificas de texto en los documentos.

Como hemos dicho hay dos tipos de caja: block e inline. Los elementos inline están contenidos dentro de elementos de bloque. Los elementos bloque siempre empiezan en una nueva linea y ocupan el espacio disponible hasta el final de linea. Mientra que los elementos en linea no empiezan necesariamente en una nueva linea y sólo ocupan el espacio necesario.

Elementos en linea: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i , img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.

Elementos de bloque: address, bockquote, center, frameset, dir, div, dl, dd, dt, fieldset, form, h, isindex, menu, noframes, noscript, lo, p, pre, table, ul, li, td, tr.

Las propriedades mas utilizadas en CSS son altura (width) y anchura(height). Se aplican a todos los elementos en bloque, imágenes, filas de tabla(tr) y grupo de filas de tabla. Tiene como valor inicial auto.

El valor inherit indica que width o height del elemento se hereda de su elemento padre.

Css define otras dos propriedades relacionadas con la altura de los elementos: min-height, max-height, min-width, max-width.

Ejercicios resueltos en

Siguiente

Anterior