CSS: lenguaje de estilo para las páginas web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 23
Visitas el mes pasado: 52
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
Uno de los problemas que ocurren con el tamaño variable, es que al reducir excesivamente el tamaño de la ventana, el texto ya no es legible, o las cajas se descolocan de sitio, ya que no caben en su hueco. Lo mismo puede ocurrir al aumentar excesivamente el tamaño de la ventana (resoluciones de pantalla muy grandes), en las que la página queda excesivamente ancha.
En CSS hay cuatro propiedades que permiten limitar la anchura y altura mínima y máxima de
cualquier elemento de la página. Las propiedades son max-width, min-width, max-height,
min-height
. Veamos sus definiciones:
max-width | Anchura máxima |
---|---|
Valores | <medida> | <porcentaje> | none | inherit |
Descripción | Permite definir la anchura máxima de un elemento |
Valor inicial | none |
se aplica a | Todos los elementos salvo filas y grupos de filas de tablas |
min-width | Anchura mínima |
---|---|
Valores | <medida> | <porcentaje> | inherit |
Descripción | Permite definir la anchura mínima de un elemento |
Valor inicial | 0 |
se aplica a | Todos los elementos salvo filas y grupos de filas de tablas |
max-height | Altura máxima |
---|---|
Valores | <medida> | <porcentaje> | none | inherit |
Descripción | Permite definir la altura máxima de un elemento |
Valor inicial | none |
se aplica a | Todos los elementos salvo filas y grupos de filas de tablas |
min-height | altura mínima |
---|---|
Valores | <medida> | <porcentaje> | inherit |
Descripción | Permite definir la altura mínima de un elemento |
Valor inicial | 0 |
se aplica a | Todos los elementos salvo filas y grupos de filas de tablas |
La utilidad principal de estas propiedades es limitar la anchura y altura máxima y mínima de los bloques en el diseño variable. Podemos emplear como valores medidas o porcentajes, aunque lo normal es emplear las medidas en píxeles para limitar el tamaño de los bloques.
Cómo ejemplo tomamos el diseño de tamaño variable del apartado anterior, y limitamos
su anchura en la caja contenedor con las propiedades max-width: 1024px; min-width: 500px;
,
de modo que la regla CSS referida al elemento contenedor queda así:
#contenedor { margin: 0 auto; border: 5px groove #993300; max-width: 1024px; min-width: 500px; }
Y la página ahora será la siguiente:
Puedes comprobar los cambios en la página con la ventana del navegador restaurada, o cambiando la resolución de pantalla.
Como se puede comprobar, basta con limitar la anchura de la caja contenedor para limitar la anchura de toda la página, ya que el tamaño de los demás elementos está referido al tamaño de esta caja.
Cuando añadimos elementos con la propiedad float
dentro de una caja normal,
los elementos flotantes se salen del flujo normal de la página. esto puede crear problemas.
ya que la altura del elemento contenedor no se corresponde con la altura de los elementos
contenidos, quedando los elementos flotantes fuera de la caja.
Veamos un ejemplo: En la siguiente caja se han puesto dos elementos con
posicionamiento flotante:
El código empleado para esta caja es el siguiente:
<div style="background-color: silver; padding: 3px ;width: 60%"> <span style="float: left">« Anterior</span> <span style="float: right">Siguiente »</span> </div>
Evidentemente este no es el resultado que queremos obtener, ya que los elementos
quedan fuera de la caja, la cual se muestra vacía. Para forzar a que los elementos
entren dentro de la caja debemos añadir un elemento invisible debajo de los
elementos flotantes, con la propiedad clear
. Este elemento puede ser un
div
, un párrafo o cualquier otro elemento, pero sin contenido.
Nosotros añadiremos un párrafo: el código quedará así:
<div style="background-color: silver; padding: 3px ;width: 60%"> <span style="float: left">« Anterior</span> <span style="float: right">Siguiente »</span> <p style="clear: both"></p> </div>
Y ahora el elemento sí que se muestra tal y como queríamos.
Al añadir un elemento con la propiedad clear: both
,éste se va a posicionar debajo
de cualquier elemento flotante y por tanto, se asegura que
la caja original tenga la altura necesaria como para encerrar a todos los elementos flotantes.
Si seguimos sólo el manual de CSS continuaremos en el siguiente tema donde veremos otras propiedades de CSS.
Si estamos siguiendo el manual de HTML y CSS al mismo tiempo seguiremos en el siguiente tema donde veremos otras etiquetas:
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com