Saltar a contenido

WA3 · Ejercicios de CSS moderno

Estos ejercicios son de CSS: se hacen en una página HTML y se comprueban en el navegador (no hay salida de consola que comparar, salvo donde se indica). Crea un index.html con el HTML del enunciado y escribe tu CSS en una etiqueta <style> o en un estilos.css enlazado. Las soluciones modelo se han comprobado en un navegador real. Los marcados con ⭐ son más difíciles.

Ejercicio WA3.1

Un tema con variables. Parte de esta tarjeta. Define cuatro variables en :root (fondo, texto, acento y radio), úsalas en todas las reglas de la tarjeta y haz que <body data-tema="oscuro"> cambie solo las variables (no ninguna regla de la tarjeta) para obtener un tema oscuro. Prueba el tema oscuro cambiando el atributo en las herramientas del navegador.

<article class="tarjeta">
  <h2>Tema con variables</h2>
  <p>Un texto de ejemplo.</p>
  <button>Aceptar</button>
</article>
Solución modelo (bloqueada)

🔒 La solución completa está bloqueada. Esto es solo un ejemplo de cómo empieza:

<article class="tarjeta">
  <h2>Tema con variables</h2>
  <p>Un texto de ejemplo.</p>
  <button>Aceptar</button>
</article>
<style>
<!-- ... (resto de la solución bloqueado) -->

Ejercicio WA3.2

Título fluido. Haz que el <h1> mida 1,5 rem como mínimo, 3 rem como máximo y, entre medias, 1rem + 4vw, con una sola declaración (sin consultas de medios). Comprueba en la consola cuánto mide con la ventana a distintos anchos: a 400 px debe medir unos 32 px (16 + 16; algo menos si la página tiene barra de desplazamiento, que resta unos píxeles al ancho) y a 1000 px debe quedarse en 48 px.

<h1 id="titulo">Título fluido</h1>
<script>
  const mostrar = () => console.log(innerWidth + " px ->", getComputedStyle(document.getElementById("titulo")).fontSize);
  mostrar(); addEventListener("resize", mostrar);
</script>
Solución modelo (bloqueada)

🔒 La solución completa está bloqueada. Esto es solo un ejemplo de cómo empieza:

<h1 id="titulo">Título fluido</h1>
<style>
  h1 { font-size: clamp(1.5rem, 1rem + 4vw, 3rem); }
</style>
<script>
  const mostrar = () => console.log(innerWidth + " px ->", getComputedStyle(document.getElementById("titulo")).fontSize);
<!-- ... (resto de la solución bloqueado) -->

Ejercicio WA3.3

El selector «padre». Con solo CSS (sin JavaScript):

  1. Cada <label class="op"> debe tener borde azul y fondo azul claro cuando su casilla está marcada.
  2. Cada <article class="producto"> que contenga una <img> debe tener un borde grueso; las que no, borde fino.
<label class="op"><input type="checkbox"> Opción A</label>
<label class="op"><input type="checkbox"> Opción B</label>

<article class="producto"><img alt="" width="40" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><rect width='40' height='40' fill='tomato'/></svg>"> Con foto</article>
<article class="producto">Sin foto</article>
Solución modelo (bloqueada)

🔒 La solución completa está bloqueada. Esto es solo un ejemplo de cómo empieza:

<label class="op"><input type="checkbox"> Opción A</label>
<label class="op"><input type="checkbox"> Opción B</label>
<article class="producto"><img alt="" width="40" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><rect width='40' height='40' fill='tomato'/></svg>"> Con foto</article>
<article class="producto">Sin foto</article>
<style>
  .op { display: block; margin: .25rem 0; padding: .4rem; border: 2px solid #cbd5e1; border-radius: 8px; }
<!-- ... (resto de la solución bloqueado) -->

Ejercicio WA3.4

Ganar sin !important. Este botón debería ser verde (la regla .btn), pero la regla #acceso de la hoja «de la librería» lo pinta de rojo por ser más específica. Sin tocar los selectores y sin !important, usa @layer para que gane el verde. Comprueba el color calculado del botón en la consola.

<button id="acceso" class="btn">Entrar</button>
<style>
  /* hoja de la «librería» */
  #acceso { background: crimson; color: white; }

  /* tu hoja */
  .btn { background: seagreen; color: white; }
</style>
<script>console.log(getComputedStyle(document.getElementById("acceso")).backgroundColor);</script>
Solución modelo (bloqueada)

🔒 La solución completa está bloqueada. Esto es solo un ejemplo de cómo empieza:

<button id="acceso" class="btn">Entrar</button>
<style>
  @layer libreria, mio;                 /* «mio» pesa más que «libreria» */
  @layer libreria {
    #acceso { background: crimson; color: white; }
  }
<!-- ... (resto de la solución bloqueado) -->

Ejercicio WA3.5

Una tarjeta que se adapta a su sitio. Dentro de una caja redimensionable, haz que la tarjeta se muestre en columna (imagen arriba, texto debajo) y pase a dos columnas (imagen a la izquierda, texto a la derecha) solo cuando la caja mida 30 rem o más, con una consulta de contenedor (no de medios).

<div class="caja">
  <article class="tarjeta"><div class="foto">🖼</div><div><h3>Título</h3><p>Texto de la tarjeta.</p></div></article>
</div>
<style>
  .caja { resize: horizontal; overflow: auto; width: 20rem; max-width: 100%; border: 2px dashed gray; padding: .5rem; }
  .foto { font-size: 3rem; text-align: center; }
</style>
Solución modelo (bloqueada)

🔒 La solución completa está bloqueada. Esto es solo un ejemplo de cómo empieza:

<div class="caja">
  <article class="tarjeta"><div class="foto">🖼</div><div><h3>Título</h3><p>Texto de la tarjeta.</p></div></article>
</div>
<style>
  .caja { resize: horizontal; overflow: auto; width: 20rem; max-width: 100%; border: 2px dashed gray; padding: .5rem;
          container-type: inline-size; }
<!-- ... (resto de la solución bloqueado) -->

Ejercicio WA3.6

⭐ Galería adaptable con pies alineados. Con solo CSS: una rejilla de 6 tarjetas con columnas de al menos 10 rem que se reparten el ancho (usando auto-fit y minmax, sin consultas de medios), de forma que el pie de cada tarjeta quede alineado con los de su fila aunque los textos tengan longitudes distintas (usa subgrid).

<div class="galeria">
  <article class="t"><h3>Uno</h3><p>Texto corto.</p><footer>Ver</footer></article>
  <article class="t"><h3>Dos con título largo largo largo</h3><p>Texto.</p><footer>Ver</footer></article>
  <article class="t"><h3>Tres</h3><p>Un texto más largo que ocupa varias líneas en la tarjeta.</p><footer>Ver</footer></article>
  <article class="t"><h3>Cuatro</h3><p>Texto.</p><footer>Ver</footer></article>
  <article class="t"><h3>Cinco</h3><p>Texto corto.</p><footer>Ver</footer></article>
  <article class="t"><h3>Seis</h3><p>Texto.</p><footer>Ver</footer></article>
</div>
Solución modelo (bloqueada)

🔒 La solución completa está bloqueada. Esto es solo un ejemplo de cómo empieza:

<div class="galeria">
  <article class="t"><h3>Uno</h3><p>Texto corto.</p><footer>Ver</footer></article>
  <article class="t"><h3>Dos con título largo largo largo</h3><p>Texto.</p><footer>Ver</footer></article>
  <article class="t"><h3>Tres</h3><p>Un texto más largo que ocupa varias líneas en la tarjeta.</p><footer>Ver</footer></article>
  <article class="t"><h3>Cuatro</h3><p>Texto.</p><footer>Ver</footer></article>
  <article class="t"><h3>Cinco</h3><p>Texto corto.</p><footer>Ver</footer></article>
<!-- ... (resto de la solución bloqueado) -->