Ediciones ENI Editorial | líder en informática
Los estilos para las cajas
Objetivos
La noción de caja es un principio fundamental en el diseño de páginas HTML y en su formato mediante las CSS. Estas cajas serán el elemento principal para diseñar maquetaciones elaboradas en sitios web modernos.
Estas cajas pueden ser cualquier tipo de contenedor: contenedores <div> o contenedores semánticos como los elementos <main>, <nav>, <article>... En este capítulo, las cajas de maquetación se tratarán usando contenedores <div> para mayor facilidad.
El concepto del modelo de caja
Una caja es un contenedor rectangular que puede incluir cualquier tipo de contenido: texto, imágenes, tablas, formularios, pero también otras cajas. Estas cajas poseen varias características estructurales:
-
Un contenido (content) que puede ser de cualquier tipo. Es el área con línea fina en el diagrama siguiente.
-
Un relleno interior (padding) que determina el espacio entre el contenido y el borde de la caja. Es el área entre el contenido (línea fina) y el borde (línea gruesa) en el diagrama siguiente.
-
Un borde (border) que se aplica al límite del cuadro. Es la línea gruesa en el diagrama siguiente.
-
Un margen (margin) que define el espacio entre el límite de la caja y los demás elementos alrededor de esa caja. Es el área entre las líneas punteadas exteriores y el borde en el diagrama siguiente.
La visualización de las cajas
1. Principios
Con la antigua versión de HTML, la v. 4.1, las cajas utilizaban principalmente dos tipos de visualización: en bloque y en línea, denominadas, respectivamente, block e inline. Con HTML5, esta noción ya no se utiliza y ha sido sustituida por la noción de tipo de contenido (kinds of content). He aquí la URL donde se explica este concepto: https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content
Las CSS emplean esta noción de visualización con la propiedad display. Esta última permite modificar el tipo de visualización de las cajas. Los dos principales tipos de visualización en CSS siguen siendo block e inline. Pero existen muchos otros tipos de visualización. He aquí la URL del sitio de W3Schools donde se recopilan todos los tipos de visualización: https://www.w3schools.com/cssref/pr_class_display.php y la tabla resumen correspondiente:
La visualización en bloque (display: block) se utiliza para contenedores de texto (<p>, <h1> a <h6>, <ul>...) y para elementos de estructura (<nav>, <div>...). Estos elementos se muestran a lo ancho de todo el espacio disponible en la ventana del navegador o en su elemento padre (contenedor). Además, cada elemento posee un relleno interior (padding) y un margen exterior (margin) perfectamente definidos. Esto permite espaciar verticalmente...
Los márgenes externos
1. El margen global y los márgenes diferenciados
Los márgenes externos se utilizan para definir el espacio alrededor de las cajas. Hay cuatro márgenes posibles: superior, derecho, inferior e izquierdo. Si se va a aplicar el mismo valor en los cuatro lados, debe usarse la propiedad margin. Si, por el contrario, se desean valores diferentes en cada lado, deben usarse las siguientes propiedades:
-
margin-top: margen superior
-
margin-right: margen derecho
-
margin-bottom: margen inferior
-
margin-left: margen izquierdo
He aquí un ejemplo sencillo de cómo aplicar estas propiedades:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
#p-uno {
margin: 30px;
}
#p-dos {
margin-top: 30px;
margin-right: 50px;
margin-bottom: 40px;
margin-left: 60px;
}
</style>
</head>
<body> ...Los bordes
Es posible aplicar bordes en los cuatro lados de las cajas mediante la propiedad border. Si se desean bordes diferentes en cada lado de la caja, deben utilizarse las propiedades border-top, border-right, border-bottom y border-left.
Los bordes utilizan tres propiedades individuales: border-style para el tipo de borde, border-width para el grosor y border-color para el color. Estos son los valores posibles para la propiedad border-style: dotted, dashed, solid, double, groove, ridge, inset y outset.
Por supuesto, es posible utilizar propiedades diferentes para cada lado o idénticas para todos los bordes. En estas sintaxis abreviadas, el orden de los valores no importa: border: 3px #c00 solid; es equivalente a border: solid 3px #c00;.
He aquí un ejemplo sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
#p-uno {
border: solid 3px #aaa;
}
#p-dos {
border-top: 3px dashed darkblue;
border-right: 5px dotted darkgreen;
...Los rellenos interiores
El relleno interior, la propiedad padding, determina el espacio entre el contenido y el borde. Con la propiedad padding, el relleno es el mismo en los cuatro lados. Para diferenciar entre los cuatro lados, se deben usar las propiedades padding-top, padding-right, padding-bottom y padding-left.
He aquí un ejemplo sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
p {
border: 1px solid black;
}
#p-uno {
padding: 10px;
}
#p-dos {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
</style>
</head>
<body>
<p id="p-uno">Lorem ipsum dolor sit amet...</p>
<p id="p-dos">Cras mattis consectetur purus...</p>
</body> ...La anchura y la altura
1. Las dimensiones del contenido
La anchura y la altura del contenido de las cajas se especifican con las propiedades width y height. Estas dimensiones se refieren estricta y exclusivamente al contenido de las cajas.
Estas dimensiones se calculan siempre con respecto al elemento padre, que puede ser el elemento <body>, es decir, el ancho de la ventana del navegador. Si el ancho del elemento incluido es superior al de su elemento padre, el elemento hijo mantiene sus dimensiones y «desborda» a su elemento padre. Si estas dimensiones no se indican, la caja ocupa todo el espacio disponible dentro de su elemento padre.
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
p {
border: 1px solid black;
}
#p-uno {
width: 600px;
height: 150px;
}
#p-dos {
width: 400px;
height: 125px;
}
#especial {
width: 300px;
background-color: #eee;
}
</style>
</head>
<body>
<p>Vestibulum id ligula porta...</p>
<p id="p-uno">Lorem ipsum...Los fondos
1. El color de fondo
La propiedad background-color se usa para aplicar un color de fondo a la caja. Pueden utilizarse todas las notaciones de color ya vistas: en formato hexadecimal, por nombre, rgb(), rgba(), hsl() y hsla().
He aquí un ejemplo sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
p {
width: 600px;
padding: 20px;
border: 10px solid #000;
}
#p-uno {
background-color: #7be;
}
#p-dos {
background-color: rgb(200,200,200);
}
</style>
</head>
<body>
<p id="p-uno">Lorem ipsum dolor...</p>
<p id="p-dos">Lorem ipsum dolor...</p>
</body>
</html> Y esta es la pantalla resultante:
2. Las imágenes de fondo
La propiedad background es la forma abreviada que permite aplicar un fondo a una caja. Esta propiedad utiliza las siguientes propiedades individuales:
-
background-image especifica la ruta al archivo de imagen, mediante el parámetro url().
-
background-position indica la posición original de la imagen dentro de la caja. Por defecto, la imagen se coloca en la parte superior izquierda de la caja. Esta propiedad permite modificar la posición con un valor numérico o con los valores predefinidos: left, center, right, top y bottom.
-
background-size determina cómo se redimensiona la imagen para ocupar todo el espacio disponible en la caja. El valor contain redimensiona proporcionalmente la imagen para que sea completamente visible. El valor cover actúa de forma similar, salvo que una parte de la imagen puede no estar visible.
-
background-repeat se utiliza para determinar si la imagen se repite y cómo. Los principales valores son:
-
repeat-x: repetición horizontal.
-
repeat-y: repetición...
Las esquinas redondeadas
La propiedad border-radius permite aplicar esquinas redondeadas de varios tipos diferentes a las cajas. La propiedad border-radius es la sintaxis abreviada de las cuatro propiedades individuales que sirven para aplicar redondeos específicos a cada una de las esquinas de una caja:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius El radio de redondeo de cada esquina se expresa con un valor numérico. Si solo se especifica un valor, se aplica a todas las esquinas. Si se especifican dos valores, se aplican a las esquinas superior izquierda-inferior derecha y superior derecha-inferior izquierda.
He aquí algunos ejemplos sencillos:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
p {
width: 600px;
padding: 20px;
border: 5px solid #000;
}
#p-uno {
border-radius: 20px; ...Las sombras proyectadas
La propiedad box-shadow permite aplicar una sombra proyectada a las cajas, con varios valores disponibles:
-
horizontal offset: desplazamiento de la sombra hacia la derecha.
-
vertical offset: desplazamiento de la sombra hacia abajo.
-
blur radius: tamaño del difuminado de la sombra. Este valor es opcional. El valor por defecto es 0.
-
spread distance: determina a partir de qué punto se extiende la sombra. Este valor es opcional.
-
color: color de la sombra proyectada. Este valor es opcional. El color por defecto es negro.
-
inset: permite aplicar la sombra hacia el interior de la caja.
He aquí algunos ejemplos sencillos:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<style>
p.caja {
width: 600px;
padding: 20px;
border: 5px solid #000;
background-color: #eee;
}
#p-uno {
box-shadow: 10px 10px;
}
#p-dos {
box-shadow: 10px 10px 5px #bbb; ...