📄 Enunciado
En este ejercicio se trabajan distintos selectores CSS para aplicar estilos de forma precisa a elementos HTML según su tipo, clase, ID o jerarquía en el documento. Incluye el uso de selectores universales, descendientes, de clase y de elementos específicos.
💻 Referencia HTML
A continuación se muestra el código HTML utilizado para el ejercicio:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Repaso CSS</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header class="cabecera">
<h1>Mi sitio web</h1>
<nav>
<a href="#">Inicio</a>
<a href="#">Servicios</a>
<a href="#">Contacto</a>
</nav>
</header>
<main>
<section class="contenedor">
<div class="caja">Caja 1</div>
<div class="caja">Caja 2</div>
<div class="caja especial">Caja 3</div>
</section>
</main>
<footer>
<p>© 2026 - Repaso de CSS</p>
</footer>
</body>
</html>
🎨 Solución CSS
A continuación se detalla el código CSS utilizado para dar estilo a la estructura anterior, aplicando selectores y propiedades de posicionamiento:
/* Selectores y herencia */
body {
font-family: Arial, sans-serif;
color: #333;
margin: 0;
}
/* Cabecera y menú */
.cabecera {
background-color: #eaeaea;
padding: 15px;
}
/* Selector descendente para enlaces del nav */
.cabecera nav a {
color: #0066cc;
margin-right: 15px;
text-decoration: none;
}
/* Hover en enlaces del menú */
.cabecera nav a:hover {
color: red;
}
/* Posicionamiento básico */
.contenedor {
position: relative;
margin: 30px;
}
/* Modelo de caja */
.caja {
width: 150px;
height: 100px;
border: 2px solid black;
padding: 10px;
/* Margin y padding */
margin: 20px;
/* Display */
display: inline-block;
/* Centrado sin flexbox */
text-align: center;
line-height: 100px;
}
/* Caja especial */
.especial {
position: absolute;
top: 20px;
right: 20px;
background-color: #ffeb3b;
color: darkred;
}
/* Footer */
footer {
margin-top: 40px;
text-align: center;
}