Title: Actividad 13: Pseudoclases CSS y efectos visuales (sin JS)
Course: 2025 - LI - Desarrollo Web del Lado del Servidor 2-2 > Section: Unidad 1 - Introducción al Desarrollo Web

🎯 Objetivo

Practicar pseudoclases de CSS para crear interacciones y realces visuales sin JavaScript: :hover, :focus, :active, :visited, :first-child, :last-child, :nth-child(), :not(), :checked, :required, :invalid, :focus-within.

🧩 Instrucciones

1. Identificación
Al inicio del documento escribe tu nombre completo y el nombre del profesor.
2. Archivos base
Crea index.html y styles.css. No modifiques la estructura HTML; tu trabajo principal es en el CSS.
3. Estructura HTML (copia en index.html)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Actividad 13 - Pseudoclases CSS</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header class="site-header">
    <h1>Galería & Formulario</h1>
    <nav class="site-nav">
      <a href="#home">Inicio</a>
      <a href="#galeria">Galería</a>
      <a href="#contacto">Contacto</a>
    </nav>
  </header>

  <main>
    <section id="galeria" class="galeria">
      <h2>Tarjetas</h2>
      <div class="cards">
        <article class="card">Card 1</article>
        <article class="card">Card 2</article>
        <article class="card">Card 3</article>
        <article class="card">Card 4</article>
        <article class="card">Card 5</article>
      </div>
      <ul class="lista">
        <li>Elemento A</li>
        <li>Elemento B</li>
        <li>Elemento C</li>
        <li>Elemento D</li>
      </ul>
    </section>

    <section id="form" class="form-wrap">
      <h2>Formulario</h2>
      <form class="form">
        <div class="grupo">
          <label>Nombre (requerido)</label>
          <input type="text" name="nombre" required />
        </div>

        <div class="grupo">
          <label>Correo (requerido, formato email)</label>
          <input type="email" name="correo" required />
        </div>

        <div class="grupo opciones">
          <label><input type="checkbox" name="acepto" /> Acepto términos</label>
          <label><input type="radio" name="plan" value="basic" /> Plan Básico</label>
          <label><input type="radio" name="plan" value="pro" /> Plan Pro</label>
        </div>

        <div class="grupo">
          <button type="submit" class="btn">Enviar</button>
          <button type="button" class="btn secundario">Cancelar</button>
        </div>
      </form>
    </section>
  </main>

  <footer class="site-footer">
    <p>© 2025 Sitio de práctica</p>
  </footer>
</body>
</html>


1. Requisitos (aplícalos en styles.css)

- Navegación (.site-nav a)
  - :hover: cambiar color/fondo.
  - :visited: estilo sutil distinto al estado normal.
  - :active: efecto de “clic” (por ejemplo, comprimir con transform: scale(0.98)).
- Tarjetas (.cards .card)
  - :hover: elevar con sombra/borde.
  - Usar :nth-child(odd) y :nth-child(even) para alternar fondo.
  - Con un selector de contexto: cuando .cards esté en :hover, las .card:not(:hover) bajan su opacidad (usar :not()).
- Lista (.lista li)
  - :first-child y :last-child: estilo distintivo (p. ej., color o borde).
  - :nth-child(3): resaltar el tercer elemento.
- Formulario (.form)
  - Inputs :focus: borde y/o sombra de enfoque clara.
  - :required: marcar visualmente los campos requeridos.
  - :invalid: indicar error de validación (color de borde/fondo).
  - Contenedor .grupo:focus-within: resaltar el grupo cuando cualquiera de sus hijos tenga foco.
  - En .opciones, cuando un checkbox esté :checked, el texto del label asociado debe verse en negritas o con color; para radios, resaltar el label seleccionado (puedes aplicar estilos a input:checked + label si ajustas la estructura, o usar estilos en el label contenedor).
- Botones (.btn)
  - :hover y :active con cambios adecuados (color, sombra, “presionado”).
  - Diferenciar .btn.secundario del principal solo con CSS.
- Accesibilidad mínima
  - Garantiza contraste legible en todos los estados (:hover, :focus, :active, :visited).
  - Evita depender solo del color para indicar estados (añade borde/sombra o subrayado).

No uses animaciones/transiciones si no lo deseas; el foco es practicar pseudoclases.

📁 Evidencia

Un único PDF que incluya:

- El contenido completo de tu styles.css.
- Capturas que muestren:
  - Enlaces en :hover, :visited y :active.
  - Tarjetas con :hover, alternancia por :nth-child, y efecto de :not(:hover).
  - :first-child, :last-child y :nth-child(3) en la lista.
  - Inputs :focus, :required, :invalid y un grupo con :focus-within.
  - Checkbox/Radio con estado :checked reflejado en el label.
  - Estados :hover/:active de los botones.

📤 Método de entrega

Sube tu PDF a la plataforma.

🎯 Objetivo

Practicar pseudoclases de CSS para crear interacciones y realces visuales sin JavaScript: :hover, :focus, :active, :visited, :first-child, :last-child, :nth-child(), :not(), :checked, :required, :invalid, :focus-within.

🧩 Instrucciones

1. Identificación
Al inicio del documento escribe tu nombre completo y el nombre del profesor.
2. Archivos base
Crea index.html y styles.css. No modifiques la estructura HTML; tu trabajo principal es en el CSS.
3. Estructura HTML (copia en index.html)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Actividad 13 - Pseudoclases CSS</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header class="site-header">
    <h1>Galería & Formulario</h1>
    <nav class="site-nav">
      <a href="#home">Inicio</a>
      <a href="#galeria">Galería</a>
      <a href="#contacto">Contacto</a>
    </nav>
  </header>

  <main>
    <section id="galeria" class="galeria">
      <h2>Tarjetas</h2>
      <div class="cards">
        <article class="card">Card 1</article>
        <article class="card">Card 2</article>
        <article class="card">Card 3</article>
        <article class="card">Card 4</article>
        <article class="card">Card 5</article>
      </div>
      <ul class="lista">
        <li>Elemento A</li>
        <li>Elemento B</li>
        <li>Elemento C</li>
        <li>Elemento D</li>
      </ul>
    </section>

    <section id="form" class="form-wrap">
      <h2>Formulario</h2>
      <form class="form">
        <div class="grupo">
          <label>Nombre (requerido)</label>
          <input type="text" name="nombre" required />
        </div>

        <div class="grupo">
          <label>Correo (requerido, formato email)</label>
          <input type="email" name="correo" required />
        </div>

        <div class="grupo opciones">
          <label><input type="checkbox" name="acepto" /> Acepto términos</label>
          <label><input type="radio" name="plan" value="basic" /> Plan Básico</label>
          <label><input type="radio" name="plan" value="pro" /> Plan Pro</label>
        </div>

        <div class="grupo">
          <button type="submit" class="btn">Enviar</button>
          <button type="button" class="btn secundario">Cancelar</button>
        </div>
      </form>
    </section>
  </main>

  <footer class="site-footer">
    <p>© 2025 Sitio de práctica</p>
  </footer>
</body>
</html>


1. Requisitos (aplícalos en styles.css)

- Navegación (.site-nav a)
  - :hover: cambiar color/fondo.
  - :visited: estilo sutil distinto al estado normal.
  - :active: efecto de “clic” (por ejemplo, comprimir con transform: scale(0.98)).
- Tarjetas (.cards .card)
  - :hover: elevar con sombra/borde.
  - Usar :nth-child(odd) y :nth-child(even) para alternar fondo.
  - Con un selector de contexto: cuando .cards esté en :hover, las .card:not(:hover) bajan su opacidad (usar :not()).
- Lista (.lista li)
  - :first-child y :last-child: estilo distintivo (p. ej., color o borde).
  - :nth-child(3): resaltar el tercer elemento.
- Formulario (.form)
  - Inputs :focus: borde y/o sombra de enfoque clara.
  - :required: marcar visualmente los campos requeridos.
  - :invalid: indicar error de validación (color de borde/fondo).
  - Contenedor .grupo:focus-within: resaltar el grupo cuando cualquiera de sus hijos tenga foco.
  - En .opciones, cuando un checkbox esté :checked, el texto del label asociado debe verse en negritas o con color; para radios, resaltar el label seleccionado (puedes aplicar estilos a input:checked + label si ajustas la estructura, o usar estilos en el label contenedor).
- Botones (.btn)
  - :hover y :active con cambios adecuados (color, sombra, “presionado”).
  - Diferenciar .btn.secundario del principal solo con CSS.
- Accesibilidad mínima
  - Garantiza contraste legible en todos los estados (:hover, :focus, :active, :visited).
  - Evita depender solo del color para indicar estados (añade borde/sombra o subrayado).

No uses animaciones/transiciones si no lo deseas; el foco es practicar pseudoclases.

📁 Evidencia

Un único PDF que incluya:

- El contenido completo de tu styles.css.
- Capturas que muestren:
  - Enlaces en :hover, :visited y :active.
  - Tarjetas con :hover, alternancia por :nth-child, y efecto de :not(:hover).
  - :first-child, :last-child y :nth-child(3) en la lista.
  - Inputs :focus, :required, :invalid y un grupo con :focus-within.
  - Checkbox/Radio con estado :checked reflejado en el label.
  - Estados :hover/:active de los botones.

📤 Método de entrega

Sube tu PDF a la plataforma.