Aggiungi styling a livello di sito

Ora che hai una pagina Su di me stilizzata, è il momento di aggiungere alcuni stili globali per il resto del tuo sito!

Preparati a…

Applica stili globalmente

Aggiungi un foglio di stile globale

Hai visto che il tag <style> di Astro è scoped di default, il che significa che influenza solo gli elementi nel suo stesso file.

Ci sono alcuni modi per definire stili globalmente in Astro, ma in questo tutorial, creerai e importerai un file global.css in ciascuna delle tue pagine. Questa combinazione di foglio di stile e tag <style> ti dà la possibilità di controllare alcuni stili a livello di sito e di applicare alcuni stili specifici esattamente dove li vuoi.

Crea un nuovo file nella posizione src/styles/global.css (Dovrai prima creare una cartella styles.)

Copia il seguente codice nel tuo nuovo file, global.css

html {
  background-color: #f1f5f9;
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: 100%;
  max-width: 80ch;
  padding: 1rem;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
}

h1 {
  margin: 1rem 0;
  font-size: 2.5rem;
}

In about.astro, aggiungi la seguente dichiarazione di importazione al tuo frontmatter:

---
import '../styles/global.css';

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

Controlla l’anteprima del browser della tua pagina Su di me e ora dovresti vedere nuovi stili applicati!

Prova tu stesso - Importa il tuo foglio di stile globale

Aggiungi la riga di codice necessaria a ogni file .astro nel tuo progetto per applicare i tuoi stili globali a ogni pagina del tuo sito.

✅ Mostrami il codice! ✅

Aggiungi la seguente dichiarazione di importazione agli altri due file di pagina: src/pages/index.astro e src/pages/blog.astro

---
import '../styles/global.css';
---

Apporta qualsiasi modifica o aggiunta che desideri al contenuto della tua pagina Su di me aggiungendo elementi HTML al template della pagina, staticamente o dinamicamente. Scrivi qualsiasi JavaScript aggiuntivo nel tuo script frontmatter per fornirti valori da utilizzare nel tuo HTML. Quando sei soddisfatto di questa pagina, esegui il commit delle tue modifiche su GitHub prima di passare alla prossima lezione.

Analizza lo Schema

La tua pagina Su di me è ora stilizzata usando sia il file global.css importato sia un tag <style>.

Gli stili da entrambi i metodi di styling vengono applicati?

Sì
Ci sono stili in conflitto e, in tal caso, quali vengono applicati?

Sì, <h1> ha una dimensione di 2.5rem globalmente, ma 4rem localmente nel tag <style>. La regola locale 4rem viene applicata sulla pagina Su di me.
Descrivi come funzionano insieme global.css e <style>.

Quando stili in conflitto sono definiti sia globalmente che nel tag <style> locale di una pagina, gli stili locali dovrebbero sovrascrivere qualsiasi stile globale. (Ma, ci possono essere altri fattori coinvolti, quindi controlla sempre visivamente il tuo sito per assicurarti che i tuoi stili siano applicati correttamente!)
Come sceglieresti se dichiarare uno stile in un file global.css o in un tag <style>?

Se vuoi che uno stile venga applicato a livello di sito, sceglieresti di usare un file global.css. Tuttavia, se vuoi che gli stili si applichino solo al contenuto HTML in un singolo file .astro e non influenzino altri elementi sul tuo sito, sceglieresti un tag <style>.

Checklist

Posso aggiungere stili CSS globali importando un file .css.

Risorse

Contribuisci Comunità Sponsor