Saltearse 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:

    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?

  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:

    src/pages/about.astro
    <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:

    src/pages/about.astro
    <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í:

    src/pages/about.astro
    ---
    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 = "navy";
    ---
  2. Actualiza tu etiqueta <style> para definir primero, y luego usar, esta variable skillColor dentro de llaves dobles.

    src/pages/about.astro
    <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 azul marino, 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.

    src/pages/about.astro
    <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 azul marino
    • El texto está en negrita
    • Los elementos de la lista están en mayúsculas (todo en mayúsculas)
✅ ¡Enséñame el código! ✅
src/pages/about.astro
---
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 = "navy";
const fontWeight = "bold";
const textCase = "uppercase";
---

Checklist

Recursos