Skip to content

Stila la tua pagina Su di me

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

Get ready to…

  • Stila elementi su una singola pagina
  • Usa variabili CSS

Stila una singola pagina

Section titled 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:

    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 è?

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

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

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

Section titled 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:

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

    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. 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

Section titled 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.

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

Section titled Checklist

Risorse

Section titled Risorse
Contribute Community Sponsor