Unidad 17. Estilos CSS Avanzados (XIX)


17.16. Controles de elementos de bloque y en línea

Ahora veremos cómo posicionar los elementos y darles el tamaño que nos convenga para representarlos.

Antes de empezar deberíamos hacer una distinción entre las etiquetas HTML.

Podemos clasificar las etiquetas en dos grupos: de bloque o en línea.

Las etiquetas de bloque son aquellas que causan un salto de línea antes y después de ellos, y ocupan todo el ancho del elemento que las contienen. Por ejemplo las etiquetas p, div, table, hr, body, etc... Se emplean para organizar el contenido.

La etiqueta de bloque más genérica es div, que puede contener cualquier etiqueta. Por ejemplo, un párrafo no debe contener a otro párrafo.

Sin embargo luego encontramos otro tipo de etiquetas (en línea) que no producen saltos en el flujo de la página, como pueden ser las etiquetas a, strong, em, span, etc... Se emplean para seleccionar un fragmento del contenido y resaltarlo, crear enlaces, etc...

Las etiquetas de bloque pueden contener a otras etiquetas de bloque y a etiquetas en línea. Las etiquetas en línea, pueden contener a otras etiquetas en línea, pero nunca a un elemento de bloque.

 

Teniendo esto siempre en mente verás que es más sencillo trabajar y moldear las páginas utilizando CSS.

Primero veremos las propiedades de tamaño height (altura) y width (anchura).

Puedes especificarlas en cualquier elemento de bloque (no en elementos en línea) y establecerán su alto y su ancho en píxeles o porcentaje.

300x50
#contenedor {
    width: 300px;
    height: 50px;
}

 

Finalmente tenemos la propiedad display, que establece cómo se muestra el tipo de elemento con el que estamos tratando.

Esta propiedad es muy útil por ejemplo para transformar las etiquetas de bloque a en línea y viceversa.

Puede tomar los valores inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none o inherit.

Los dos primeros valores hablan por sí mismos. Puedes asociarle el estilo display: block; a una etiqueta a para que cree un salto de línea antes y después de ella o poder darle un alto y ancho. Esto se emplea mucho en los menús, normalmente formados con listas. Observa estos dos "botones" formados por un div y un enlace:

Notarás que el primero sólo funciona si pulsamos justo sobre el texto. En cambio en el segundo podemos pulsar en cualquier parte del div.

Esto lo hemos logrado convirtiendo el enlace en un bloque y haciendo que ocupe todo el alto (al ser un bloque, ya ocupa todo el ancho):

.boton a {
    display: block;
    height: 100%;
}

Marzo-2015
Pág. 17.19
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.