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.

Copia il seguente codice e incollalo in src/pages/about.astro:
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? nero
  - La tua pagina Su di me? viola
  - La tua pagina Blog? nero
- La pagina con il testo del titolo più grande è? La tua pagina Su di me
Se 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.
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ì:
src/pages/about.astro
```
<p>Le mie competenze sono:</p>
<ul>
  {skills.map((skill) => <li class="skill">{skill}</li>)}
</ul>
```

Aggiungi il seguente codice al tuo tag di stile esistente:

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

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.

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";
---

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>

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

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>

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

Posso aggiungere stili CSS a una singola pagina usando un tag <style> di Astro.
Posso usare variabili per stilizzare elementi sulla pagina.

Risorse

Contribuisci Comunità Sponsor