Como aprendimos más temprano en este mismo capítulo, todo elemento estructural es considerado una caja y la estructura completa es presentada como un grupo de cajas. La cajas agrupadas constituyen lo que es llamado un Modelo de Caja. Siguiendo con los conceptos básicos de CSS, vamos a estudiar lo que es llamado el Modelo de Caja Tradicional. Este modelo has sido implementado desde la primera versión de CSS y es actualmente soportado por cada navegador en el mercado, lo que lo ha convertido en un estándar para el diseño web.
Todo modelo, incluso aquellos aún en fase experimental, pueden ser aplicados a la misma estructura HTML, pero esta estructura debe ser preparada para ser afectada por estos estilos de forma adecuada. Nuestros documentos HTML deberán ser adaptados al modelo de caja seleccionado.
IMPORTANTE: El Modelo de Caja Tradicional presentado posteriormente no es una incorporación de HTML5, pero es introducido en este libro por ser el único disponible en estos momentos y posiblemente el que continuará siendo utilizado en sitios webs desarrollados en HTML5 durante los próximos años. Si usted ya conoce cómo implementarlo, siéntase en libertad de obviar esta parte del capítulo.
1. Estructura Básica de la Plantilla HTML
Primero, asegúrate de que tu plantilla HTML tenga una estructura clara. Aquí hay un ejemplo simple:
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Plantilla</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Bienvenido a Mi Sitio Web</h1>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header> <main>
<section class="hero">
<h2>Tu Slogan Aquí</h2>
<p>Descripción breve de tu sitio web.</p>
</section>
<section class="about">
<h2>Sobre Nosotros</h2>
<p>Texto sobre tu empresa o sitio web.</p>
</section>
</main>
<footer>
<p>© 2024 Mi Sitio Web. Todos los derechos reservados.</p>
</footer>
</body>
</html>
2. Crear y Vincular el Archivo CSS
El siguiente paso es crear un archivo CSS llamado styles.css y vincularlo a tu plantilla HTML como se muestra en la sección <head>.
3. Aplicar Estilos Básicos
Ahora, puedes comenzar a aplicar estilos a los diferentes elementos de la plantilla. Aquí te dejo un ejemplo de cómo puedes hacerlo:
/* Reset básico para eliminar márgenes y rellenos predeterminados */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}/* Estilo del cuerpo */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
}
/* Estilo del encabezado */
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
header h1 {
margin-bottom: 10px;
}
header nav ul {
list-style: none;
}
header nav ul li {
display: inline;
margin-right: 20px;
}
header nav ul li a {
color: #fff;
text-decoration: none;
}
header nav ul li a:hover {
text-decoration: underline;
}
/* Sección Hero */
.hero {
background: url('hero-image.jpg') no-repeat center center/cover;
color: #fff;
padding: 100px 0;
text-align: center;
}
.hero h2 {
font-size: 2.5em;
margin-bottom: 10px;
}
/* Sección Sobre Nosotros */
.about {
padding: 20px;
background-color: #fff;
margin: 20px 0;
}
.about h2 {
margin-bottom: 10px;
}
/* Estilo del pie de página */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
footer p {
margin: 0;
}
4. Personalizar y Ajustar Estilos
a. Personalización del Header
Puedes cambiar los colores, fuentes y el espaciado del encabezado (header) según la identidad visual de tu sitio.
b. Estilizar la Sección Hero
La sección hero es la primera que los usuarios ven. Asegúrate de que sea impactante utilizando imágenes de fondo, colores contrastantes y tipografía llamativa.
c. Configuración del Footer
El pie de página suele tener enlaces y textos importantes como derechos de autor. Asegúrate de que sea claro y consistente con el resto del diseño.
d. Responsividad
Asegúrate de que tu diseño sea responsive, ajustándose bien a diferentes tamaños de pantalla. Puedes utilizar media queries para aplicar estilos específicos en móviles o tablets:
@media (max-width: 768px) {
header nav ul li {
display: block;
text-align: center;
} .hero {
padding: 50px 0;
}
}
5. Pruebas y Ajustes
Después de aplicar los estilos, abre la página en diferentes navegadores y dispositivos para asegurarte de que todo se vea como esperas. Realiza ajustes si es necesario.