Salta ai contenuti

Stila la tua pagina Su di me

Ora che hai una pagina Su di me con contenuti su di te, è il momento di stilizzarla!

Preparati a…

  • Stila elementi su una singola pagina
  • Usa variabili CSS

Stila una singola pagina

Usando i tag <style></style> di Astro, puoi stilizzare elementi sulla tua pagina. Aggiungere attributi e direttive a questi tag ti offre ancora più modi per stilizzare.

  1. Copia il seguente codice e incollalo in src/pages/about.astro:

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

    Controlla tutte e tre le pagine nell'anteprima del tuo browser.

    • Di che colore è il titolo della pagina di:

      • La tua pagina Home?
      • La tua pagina Su di me?
      • La tua pagina Blog?

    • La pagina con il testo del titolo più grande è?

    :::tipSe non riesci a determinare i colori visivamente, puoi usare gli strumenti per sviluppatori nel tuo browser per ispezionare gli elementi del titolo <h1> e verificare il colore del testo applicato.:::

  2. Aggiungi il nome di classe skill agli elementi <li> generati sulla tua pagina Su di me, in modo da poterli stilizzare. Il tuo codice dovrebbe ora apparire così:

    <p>Le mie competenze sono:</p>
<ul>
  {skills.map((skill) => <li class="skill">{skill}</li>)}
</ul>

  3. Aggiungi il seguente codice al tuo tag di stile esistente:

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

  4. Visita di nuovo la tua pagina Su di me nel tuo browser e verifica, tramite ispezione visiva o strumenti per sviluppatori, che ogni elemento nella tua lista di competenze sia ora verde e in grassetto.

Usa la tua prima variabile CSS

Il tag <style> di Astro può anche fare riferimento a qualsiasi variabile dal tuo script frontmatter usando la direttiva define:vars={ {...} }. Puoi definire variabili all'interno del tuo recinto di codice, poi usarle come variabili CSS nel tuo tag di stile.

  1. Definisci una variabile skillColor aggiungendola allo script frontmatter di src/pages/about.astro in questo modo:

    ---
const pageTitle = "Su di me";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Scrittrice tecnica",
  hobbies: ["fotografia", "birdwatching", "baseball"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Scrivere Documenti"];

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

const skillColor = "navy";
---

  2. Aggiorna il tuo tag <style> esistente qui sotto per definire per prima cosa, poi usare questa variabile skillColor all'interno di doppie parentesi graffe.

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

  3. Controlla la tua pagina Su di me nell'anteprima del tuo browser. Dovresti vedere che le competenze sono ora blu navy, come impostato dalla variabile skillColor passata alla direttiva define:vars.

Prova tu stesso - Definisci variabili CSS

  1. Aggiorna il tag <style> sulla tua pagina Su di me in modo che corrisponda a quello qui sotto.

    <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. Aggiungi qualsiasi definizione di variabile mancante nel tuo script frontmatter in modo che il tuo nuovo tag <style> applichi con successo questi stili alla tua lista di competenze:

    • Il colore del testo è blu navy
    • Il testo è in grassetto
    • Le voci di elenco sono in maiuscolo (tutte lettere maiuscole)

✅ Mostrami il codice! ✅

---
const pageTitle = "Su di me";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Scrittrice tecnica",
  hobbies: ["fotografia", "birdwatching", "baseball"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Scrivere Documenti"];

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

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

Checklist

Risorse

Contribuisci Comunità Sponsor