Style deine „Über mich“-Seite

Jetzt, da du eine About-Seite mit Inhalten über dich hast, ist es Zeit, sie zu gestalten!

Mach dich bereit, …

Elemente auf einer einzelnen Seite zu gestalten
CSS-Variablen zu verwenden

Eine einzelne Seite gestalten

Mit Astros eigenen <style></style>-Tags kannst du Elemente auf deiner Seite gestalten. Wenn du diesen Tags Attribute und Direktiven hinzufügst, erhältst du noch mehr Möglichkeiten, das Styling zu steuern.

Kopiere den folgenden Code und füge ihn in src/pages/about.astro ein:
src/pages/about.astro
```
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{pageTitle}</title>
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
    </style>
  </head>
```
Überprüfe alle drei Seiten in der Browservorschau.
- Welche Farbe hat der Seitentitel auf:
  - Deiner Startseite? schwarz
  - Deiner About-Seite? lila
  - Deiner Blog-Seite? schwarz
- Die Seite mit der größten Überschrift ist? deine „Über mich“-Seite
Wenn du Farben nicht visuell unterscheiden kannst, kannst du die Entwicklertools deines Browsers verwenden, um die <h1>-Titel-Elemente zu inspizieren und die angewandte Textfarbe zu überprüfen.
Füge den Klassennamen skill zu den generierten <li>-Elementen auf deiner About-Seite hinzu, damit du sie gestalten kannst. Dein Code sollte nun so aussehen:
src/pages/about.astro
```
<p>Meine Fähigkeiten sind:</p>
<ul>
  {skills.map((skill) => <li class="skill">{skill}</li>)}
</ul>
```

Füge den folgenden Code zu deinem bestehenden Style-Tag hinzu:

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

Öffne erneut deine „Über mich“-Seite im Browser und überprüfe, ob jedes Element in deiner Liste von Fähigkeiten nun grün und fett dargestellt wird – entweder visuell oder mit den Entwicklertools.

Deine erste CSS-Variable verwenden

Das Astro-<style>-Tag kann auch Variablen aus deinem Frontmatter-Skript referenzieren, wenn du die Direktive define:vars={ {...} } verwendest. Du kannst Variablen innerhalb deines Codeblocks definieren und sie dann als CSS-Variablen in deinem Style-Tag verwenden.

Definiere eine Variable skillColor, indem du sie dem Frontmatter-Skript von src/pages/about.astro hinzufügst, wie hier gezeigt:

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

Aktualisiere dein vorhandenes <style>-Tag so, dass es zuerst die Variable skillColor definiert und sie dann innerhalb doppelter geschweifter Klammern verwendet:

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

Überprüfe deine „Über mich“-Seite in der Browservorschau. Du solltest sehen, dass die Fähigkeiten nun karminrot (crimson) sind – entsprechend der skillColor-Variable, die an die Direktive define:vars übergeben wurde.

Probiere es selbst – CSS-Variablen definieren

Aktualisiere das <style>-Tag auf deiner „Über mich“-Seite so, dass es wie unten aussieht:

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

Füge in deinem Frontmatter-Skript alle fehlenden Variablen hinzu, damit dein neues <style>-Tag erfolgreich auf deine Liste von Fähigkeiten angewendet wird:
- Die Textfarbe ist Karminrot (crimson)
- Der Text ist fett
- Die Listenelemente sind in Großbuchstaben (ALL CAPS)

✅ Zeige mir den Code! ✅

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

Checkliste

Ich kann mit einem Astro-<style>-Tag CSS-Styles auf eine einzelne Seite anwenden.
Ich kann Variablen verwenden, um Elemente auf der Seite zu gestalten.

Ressourcen

Wirke mit Community Sponsor