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

Sección titulada 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

Sección titulada 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

Sección titulada 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

Sección titulada Checklist

Recursos

Sección titulada Recursos