|
Unidad 17. Estilos CSS Avanzado (XII) |
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.
Las hay de 2 tipos: 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, como por ejemplo las etiquetas p, div, table, br, etc...
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, b, i, span, etc...
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 y establecerán su alto y su ancho en píxeles o porcentaje.
#contenedor {
width: 300px;
height: 50px;
}
Luego encontramos la propiedad float, que permite que cualquier elemento flote en un lado determinado de la pantalla mientras el resto sigue el flujo natural.
Observa estos ejemplos:
©
Este texto tiene un elemento flotante a la izquierda.
Además le hemos dado un tamaño de fuente mayor para que se note mejor el efecto.
©
Este texto tiene un elemento flotante a la derecha.
Además le hemos dado un tamaño de fuente mayor para que se note mejor el efecto.
Hemos utilizado los valores left y right respectivamente. En estos casos a los párrafos que contienen el símbolo de copyright se les han aplicado la propiedad CSS float:
<p style="float:left; font-size: 25px; border: 1px solid black;">©</p>
<p style="float:right; font-size: 25px; border: 1px solid black;">©</p>
Pero si vemos detenidamente esta propiedad veremos que encontramos un problema:
Este texto tiene un elemento flotante a la derecha.
Pero quiero que este párrafo no se vea afectado por el bloque flotante y se muestre sin tener que ajustarse a él.
Como este párrafo que ocupa toda la anchura del bloque div padre.
¿Cómo solucionamos este problema?
Para ello deberemos utilizar la propiedad clear.
Esta propiedad permite romper el ajuste que se esté realizando por una
etiqueta anterior marcada con float.
Clear puede tomar 3 valores: left, right o both, para romper el float de izquierda, derecha o ambos respectivamente.
Por lo que si le aplicamos un clear: right; al segundo párrafo este se mostrará sin verse afectado por el float:
Este texto tiene un elemento flotante a la derecha.
Pero quiero que este párrafo no se vea afectado por el bloque flotante y se muestre sin tener que ajustarse a él.
Como este párrafo que ocupa toda la anchura del bloque div padre.
El código que hemos utilizado es el siguiente:
<p style="clear: right;">Pero quiero que este párrafo no se vea afectado por el bloque flotante y se muestre sin tener que ajustarse a él.</p>
Del mismo modo esta propiedad nos ayudará en este caso:
Este texto tiene dos elementos flotantes a la izquierda.
Queremos que los dos bloques estén flotando a la izquierda pero uno debajo del otro.
Para ello deberemos aplicarle al segundo elemento un clear: left; para que elimine el comportamiento del primer elemento que ya estaba flotando.
Por ello, el segundo elemento lo escribiríamos así:
<div style="float: left; clear: left; font-size: 25px; border: 1px solid black;">©<br />©</div>
Y obtendríamos lo siguiente:
Este texto tiene dos elementos flotantes a la izquierda.
Ahora uno se encuentra debajo del otro, y el texto fluye teniéndolos en cuenta a ambos.
Aunque puede llegar un párrafo que deje de verse afectado.
Como este!
Ahora combinando los márgenes y los elementos flotantes podemos crear columnas de una forma muy sencilla:
La forma es la siguiente:
Finalmente tenemos la propiedad display, que establece el tipo de elemento con el que estamos tratando.
Esta propiedad es muy útil porque transforma las etiquetas de bloque a en línea y viceversa.
Puede tomar los valores block, inline o list-item.
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.
Del mismo modo, podrás hacer que una etiqueta de bloque (como p o div) se convierta en un elemento en línea utilizando display: inline; y puedan ser mostradas una al lado de otra:
| 1 | 2 | 3 | 4 | ||
| 6 | 5 | 7 | 8 | ||
| 24 | 9 | 10 | 11 | ||
| 23 | 12 | 25 | |||
| 22 | 21 | 20 | 13 | ||
| 19 | 14 | ||||
| 18 | 17 | 16 | 15 | ||
| 1 | 2 | 3 | 4 | ||
| 6 | 5 | 7 | 8 | ||
| 24 | 9 | 10 | 11 | ||
| 23 | 12 | 25 | |||
| 22 | 21 | 20 | 13 | ||
| 19 | 14 | ||||
| 18 | 17 | 16 | 15 | ||
| 1 | 2 | 3 | 4 | ||
| 6 | 5 | 7 | 8 | ||
| 24 | 9 | 10 | 11 | ||
| 23 | 12 | 25 | |||
| 22 | 21 | 20 | 13 | ||
| 19 | 14 | ||||
| 18 | 17 | 16 | 15 | ||
En este ejemplo podemos ver tres tablas que se muestran una al lado de la otra.
Simplemente les hemos dado el estilo:
.tabla {
display: inline;
}
Aunque si disminuyes el ancho de la ventana verás que al tratarse de elementos en línea se adaptan a su tamaño.
Para saltarnos este inconveniente (si lo fuera), podemos utilizar la propiedad que vimos en el apartado de Controles de texto: white-space.
Introduciendo estas tres tablas en un elemento de bloque como un p o un div y asignándole la propiedad white-space: nowrap; conseguiríamos que las tres tablas permaneciesen en línea sin saltos de pantalla a pesar de la anchura de la ventana.
| 1 | 2 | 3 | 4 | ||
| 6 | 5 | 7 | 8 | ||
| 24 | 9 | 10 | 11 | ||
| 23 | 12 | 25 | |||
| 22 | 21 | 20 | 13 | ||
| 19 | 14 | ||||
| 18 | 17 | 16 | 15 | ||
| 1 | 2 | 3 | 4 | ||
| 6 | 5 | 7 | 8 | ||
| 24 | 9 | 10 | 11 | ||
| 23 | 12 | 25 | |||
| 22 | 21 | 20 | 13 | ||
| 19 | 14 | ||||
| 18 | 17 | 16 | 15 | ||
| 1 | 2 | 3 | 4 | ||
| 6 | 5 | 7 | 8 | ||
| 24 | 9 | 10 | 11 | ||
| 23 | 12 | 25 | |||
| 22 | 21 | 20 | 13 | ||
| 19 | 14 | ||||
| 18 | 17 | 16 | 15 | ||
Finalmente, comentaremos que esta propiedad también puede tomar el valor list-item.
De este modo, los elementos que se vean afectados por el estilo display: list-item; se mostrará como si formasen parte de una lista.
Observa el siguiente ejemplo:
p.lista {
display: list-item;
list-style-type: square;
}
Si aplicamos este estilo sobre unos párrafos veremos esto:
Esto es un párrafo que se muestra en forma de elemento de lista.
Esto es un párrafo que se muestra en forma de elemento de lista.
Esto es un párrafo que se muestra en forma de elemento de lista.
Esto es un párrafo que se muestra en forma de elemento de lista.
Para practicar realiza el Ejercicio Paso a Paso de
Controles de Bloque.
|
|
| |
|
|
Pág. 17.12 |
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.