Ir al contenido

Estiliza tu página 'Acerca de'

Ahora que ya tienes una página 'Acerca de' con contenido sobre ti, ¡es hora de darle estilo!

Prepárate para...

  • Estilizar elementos en una sola página.
  • Utilizar variables CSS

Estiliza una página individual

Usando las etiquetas <style></style> de Astro, puedes dar estilo a los elementos de tu página. Si añades atributos y directivas a estas etiquetas, tendrás aún más formas de aplicar estilos.

  1. Copia el siguiente código y pégalo en src/pages/about.astro:

    <html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{pageTitle}</title>
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
    </style>
  </head>

    Comprueba las tres páginas en la vista previa de tu navegador

    • De qué color es el título de la página:

      • ¿Tu página de inicio?
      • ¿Tu página 'Acerca de'?
      • ¿La página de tu blog?

    • La página con el mayor texto de título es?

    :::tipSi no puedes determinar los colores visualmente, puedes utilizar las herramientas de desarrollo de tu navegador para inspeccionar los elementos de título <h1> y verificar el color del texto aplicado.:::

  2. Añade el nombre de clase skill a los elementos <li> generados en tu página 'Acerca de', para que puedas aplicarles estilo. Tu código debería tener este aspecto:

    <p>Mis habilidades son:</p>
<ul>
  {skills.map((skill) => <li class="skill">{skill}</li>)}
</ul>

  3. Añade el siguiente código a la etiqueta de estilo existente:

    <style>
  h1 {
    color: purple;
    font-size: 4rem;
  }
  .skill {
    color: green;
    font-weight: bold;
  }
</style>

  4. Vuelve a visitar tu página 'Acerca de' en tu navegador y comprueba, mediante inspección visual o herramientas de desarrollo, que cada elemento de tu lista de habilidades está ahora en verde y en negrita.

Utiliza tu primera variable CSS

La etiqueta de Astro <style> también puede hacer referencia a cualquier variable de tu script frontmatter usando la directiva define:vars={ {...} }. Puedes definir variables dentro de tu código vallado, y luego utilizarlas como variables CSS en tu etiqueta de estilo.

  1. Define una variable skillColor añadiéndola al script frontmatter de src/pages/about.astro así:

    ---
const pageTitle = "Sobre mi";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Escritor técnico",
  hobbies: ["fotografia", "observación de aves", "peñarol"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Redacción de documentos"];

const happy = true;
const finished = false;
const goal = 3;

const skillColor = "crimson";
---

  2. Actualiza tu etiqueta <style> para definir primero, y luego usar, esta variable skillColor dentro de llaves dobles.

    <style define:vars={{skillColor}}> 
  h1 {
    color: purple;
    font-size: 4rem;
  }
  .skill {
    color: green;
    color: var(--skillColor);
    font-weight: bold;
  }
</style>

  3. Comprueba tu página 'Acerca de' en la vista previa de tu navegador. Deberías ver que las habilidades son ahora de color rojo carmesí, tal y como establece la variable skillColor pasada a la directiva define:vars.

Pruébalo tú mismo - Definir variables CSS

  1. Actualiza la etiqueta <style> de tu página 'Acerca de' para que coincida con la de abajo.

    <style define:vars={{skillColor, fontWeight, textCase}}>
  h1 {
    color: purple;
    font-size: 4rem;
  }
  .skill {
    color: var(--skillColor);
    font-weight: var(--fontWeight);
    text-transform: var(--textCase);
  }
</style>

  2. Añade las definiciones de variables que falten en tu script frontmatter para que tu nueva etiqueta <style> aplique correctamente estos estilos a tu lista de habilidades:

    • El color del texto es rojo carmesí
    • El texto está en negrita
    • Los elementos de la lista están en mayúsculas (todo en mayúsculas)

✅ ¡Enséñame el código! ✅

---
const pageTitle = "Sobre mi";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Escritor técnico",
  hobbies: ["fotografia", "observación de aves", "peñarol"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Redacción de documentos"];

const happy = true;
const finished = false;
const goal = 3;

const skillColor = "crimson";
const fontWeight = "bold";
const textCase = "uppercase";
---

Checklist

Recursos

Contribuir Comunidad Patrocinador