/* Archivo style.css */
/* Aquí añadiremos nuestros estilos CSS */
.code-block {
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
margin-bottom: 20px;
font-family: 'Courier New', monospace;
}
/* ----- EJERCICIO 1: Estilos Base y Reset Mínimo ----- */
body {
/*margin: 0; Eliminamos el margen por defecto del body */
font-family: Arial, sans-serif; /* Establecemos una fuente base */
background-color: #f4f4f4; /* Color de fondo general */
color: #333; /* Color de texto general */
}
header {
background-color: #333; /* Color de fondo para el encabezado */
padding: 10px 0; /* Relleno superior e inferior */
position: sticky; /*Hacemos que el header sea pegajoso */
top: 0; /* Se pega en la parte superior */
z-index: 1000; /* Aseguramos que esté por encima de otros elementos */
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra sutil */
}
.menu-principal ul {
list-style-type: none; /* Quitamos los puntos de la lista */
margin: 0; /* Quitamos márgenes por defecto de la lista */
padding: 0; /* Quitamos relleno por defecto de la lista */
text-align: center; /* Centramos los elementos del menú */
}
.menu-principal ul li {
display: inline-block; /* Colocamos los elementos en línea */
}
.menu-principal ul li a {
display: block; /* Hacemos que el enlace ocupe todo el espacio del li */
padding: 15px 25px; /* Relleno interno para cada enlace (más espacio clickeable) */
text-decoration: none; /* Quitamos el subrayado de los enlaces */
color: #fff; /* Color del texto de los enlaces */
font-weight: bold; /* Texto en negrita */
}
/* ----- EJERCICIO 2: Efecto Hover Básico ----- */
.menu-principal ul li a:hover {
background-color: #575757; /* Cambiamos el color de fondo al pasar el mouse */
color: #ffc107; /* Cambiamos el color del texto al pasar el mouse */
}
/* ----- EJERCICIO 3: Bordes y Separadores ----- */
/* Opción A: Borde inferior en el elemento activo o al hacer hover */
/* (Para el activo, necesitaremos una clase específica, la añadiremos luego) */
.menu-principal ul li a:hover {
/* Ya tenemos background y color, podemos añadir un borde si queremos */
/* border-bottom: 3px solid #ffc107; */ /* Ejemplo de borde inferior */
}
/* Opción B: Separadores entre elementos (excepto el último) */
.menu-principal ul li:not(:last-child) {
border-right: 1px solid #eeeeee; /**/ /* Línea separadora a la derecha */
}
/* ----- EJERCICIO 4: Transiciones Suaves ----- */
.menu-principal ul li a {
/* ... (estilos anteriores) ... */
display: block;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font-weight: bold;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease-out; /* Transición suave para color de fondo, color de texto y transformación */
}
.menu-principal ul li a:hover {
background-color: #575757;
color: #ffc107;
transform: translateY(-3px); /* Efecto de elevación sutil al pasar el mouse */
}
/* ----- EJERCICIO 5: Elemento Activo ----- */
/* Añade la clase .activo al enlace de la página actual en tu HTML */
/* Por ejemplo: Inicio */
.menu-principal ul li a.activo {
background-color: #ffc107; /* Color de fondo para el enlace activo */
color: #333; /* Color de texto para el enlace activo */
box-shadow: inset 0 0 10px rgba(0,0,0,0.1); /* Sombra interior sutil */
}
/* ----- EJERCICIO 6: Variante - Menú Vertical ----- */
/* Comenta o elimina los estilos de .menu-principal ul li { display: inline-block; } */
/* y .menu-principal ul { text-align: center; } si quieres probar esta variante. */
/*
.menu-principal-vertical ul li {
display: block; // Cada elemento ocupa una línea
}
.menu-principal-vertical ul {
padding-left: 20px; // Un poco de padding para que no esté pegado al borde
}
.menu-principal-vertical ul li a {
border-bottom: 1px solid #444; // Separador inferior para cada item
}
.menu-principal-vertical ul li:last-child a {
border-bottom: none; // Quitamos el borde del último elemento
}
*/
/* ----- EJERCICIO 7: Mejoras Visuales Adicionales ----- */
/* Fuentes Personalizadas (Ejemplo con Google Fonts) */
/* Añade en tu HTML, dentro de :
*/
/*
body {
font-family: 'Open Sans', sans-serif;
}
.menu-principal ul li a {
font-family: 'Roboto', sans-serif;
font-size: 1.1em; // Tamaño de fuente ligeramente mayor
text-transform: uppercase; // Convertir texto a mayúsculas
letter-spacing: 1px; // Espaciado entre letras
}
*/
/* Sombras y Profundidad */
.menu-principal ul li a {
/* ... (estilos anteriores) ... */
/* Ya hemos añadido una transición para transform */
}
.menu-principal ul li a:hover {
/* ... (estilos anteriores) ... */
/* Ya hemos añadido transform: translateY(-3px); */
box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Sombra más pronunciada al hacer hover para dar efecto de elevación */
}
/* Estilo de Botón para los Enlaces */
/*
.menu-principal ul li a {
display: inline-block; // Necesario para que el padding y margin funcionen como bloque pero en línea
padding: 12px 20px;
margin: 5px; // Margen alrededor de cada "botón"
border-radius: 25px; // Bordes redondeados para forma de píldora
background-color: #007bff; // Un color de fondo base para el botón
color: white;
text-align: center;
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.menu-principal ul li a:hover {
background-color: #0056b3; // Color más oscuro al pasar el mouse
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.menu-principal ul li a.activo {
background-color: #004085; // Color aún más oscuro para el activo
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
header { // Ajustar el header si usamos estilo botón
padding: 15px 0;
}
*/