Füge Styles für die gesamte Website hinzu

Jetzt, da du eine gestylte About-Seite hast, ist es an der Zeit, globale Styles für den Rest deiner Website hinzuzufügen!

Mach dich bereit, …

Styles global anzuwenden

Ein globales Stylesheet hinzufügen

Du hast gesehen, dass der Astro-<style>-Tag standardmäßig scoped ist, was bedeutet, dass er nur die Elemente in seiner eigenen Datei beeinflusst.

Es gibt verschiedene Möglichkeiten, Styles global in Astro zu definieren, aber in diesem Tutorial erstellst und importierst du eine Datei global.css in jede deiner Seiten. Diese Kombination aus Stylesheet und <style>-Tag gibt dir die Möglichkeit, einige Styles siteweit zu kontrollieren und bestimmte Styles genau dort anzuwenden, wo du sie haben möchtest.

Erstelle eine neue Datei unter src/styles/global.css (du musst zuerst einen Ordner styles erstellen).

Kopiere den folgenden Code in die neue Datei 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;
}

Füge in about.astro die folgende Import-Anweisung in dein Frontmatter ein:

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

const pageTitle = "Über mich";

const identity = {
  firstName: "Sarah",
  country: "Kanada",
  occupation: "Technische Redakteurin",
  hobbies: ["Fotografie", "Vogelbeobachtung", "Baseball"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Dokumentation schreiben"];

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

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

Überprüfe die Browser-Vorschau deiner About-Seite, und du solltest nun die neuen Styles sehen!

Probiere es selbst – Importiere dein globales Stylesheet

Füge in jeder .astro-Datei deines Projekts die nötige Zeile ein, damit die globalen Styles auf allen Seiten angewendet werden.

✅ Zeige mir den Code! ✅

Füge die folgende Import-Anweisung in die beiden anderen Seiten-Dateien ein: src/pages/index.astro und src/pages/blog.astro

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

Nimm beliebige Änderungen oder Ergänzungen am Inhalt deiner About-Seite vor, indem du HTML-Elemente in das Seitentemplate einfügst – statisch oder dynamisch. Schreibe zusätzlichen JavaScript-Code in dein Frontmatter-Skript, um Werte für dein HTML bereitzustellen. Wenn die Seite fertig ist, committe deine Änderungen und lade sie auf GitHub hoch, bevor du mit der nächsten Lektion fortfährst.

Analysiere das Muster

Deine About-Seite wird nun sowohl durch die importierte Datei global.css als auch durch einen <style>-Tag gestylt.

Werden Styles aus beiden Styling-Methoden angewendet?

Ja
Gibt es widersprüchliche Styles und wenn ja, welche werden angewendet?

Ja, <h1> hat global eine Größe von 2.5rem, lokal im <style>-Tag jedoch 4rem. Die lokale 4rem-Regel wird auf der About-Seite angewendet.
Beschreibe, wie global.css und <style> zusammenarbeiten.

Wenn widersprüchliche Styles sowohl global als auch im lokalen <style>-Tag einer Seite definiert sind, überschreiben die lokalen Styles die globalen. (Es können jedoch andere Faktoren eine Rolle spielen, daher immer visuell prüfen, ob die Styles korrekt angewendet werden!)
Wie würdest du entscheiden, ob du einen Style in einer global.css-Datei oder in einem <style>-Tag definierst?

Wenn ein Style siteweit angewendet werden soll, benutzt man global.css. Soll der Style nur für den HTML-Inhalt einer einzelnen .astro-Datei gelten, verwendet man einen <style>-Tag.

Checkliste

Ich kann globale CSS-Styles durch das Importieren einer .css-Datei hinzufügen.

Ressourcen

Wirke mit Community Sponsor