Módulo 2 CSS Intermedio

Aprende a manejar pseudo-clases, pseudoelementos, transiciones y animaciones. Uso de selectores avanzados.

🎯 Objetivos

Aprender a manejar pseudo-clases y pseudo-elementos.
Introducir transiciones y animaciones para dar dinamismo.
Usar selectores avanzados para mayor control.
Aplicar variables CSS para mantener consistencia en los estilos.

🔹 1. Pseudo-clases

Las pseudo-clases permiten aplicar estilos en estados específicos de un elemento.

css

/* Cambiar color de enlace al pasar el ratón */
a:hover {
  color: #ff6600;
}

/* Estilo para el primer párrafo dentro de un contenedor */
p:first-child {
  font-weight: bold;
}

🔹 2. Pseudo-elementos

Los pseudo-elementos crean contenido virtual antes o después de un elemento.

css

/* Añadir comillas decorativas antes de un bloque de cita */
blockquote::before {
  content: "“";
  font-size: 2em;
  color: #003366;
}

🔹 3. Transiciones

Las transiciones suavizan los cambios de estilo.

css

button {
  background-color: #003366;
  color: #fff;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #ff6600;
}

🔹 4. Animaciones

Las animaciones permiten crear efectos más complejos.

css

@keyframes parpadeo {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

.icono {
  animation: parpadeo 1s infinite;
}

🔹 5. Selectores avanzados

css

/* Selecciona todos los enlaces dentro de un párrafo */
p a {
  text-decoration: underline;
}

/* Selecciona inputs de tipo texto */
input[type="text"] {
  border: 2px solid #003366;
}

🔹 6. Variables CSS

Las variables permiten definir colores y estilos reutilizables.

css

:root {
  --color-primario: #003366;
  --color-secundario: #ff6600;
}

h1 {
  color: var(--color-primario);
}

button {
  background-color: var(--color-secundario);
}

📝 Actividad práctica

Crea un botón que cambie de color con transición al pasar el ratón.
Añade un icono ⚡ que parpadee con animación.
Usa variables CSS para definir los colores principales de tu página.

MÓDULO 3 CSS AVANZADO