diff --git a/docs/src/config.ts b/docs/src/config.ts index 2142fd0fc..57cfada7d 100644 --- a/docs/src/config.ts +++ b/docs/src/config.ts @@ -58,7 +58,7 @@ export const SIDEBAR = { { text: 'Anleitungen', header: true }, { text: 'Styling & CSS', link: 'de/guides/styling' }, - + { text: 'Referenz', header: true }, ], nl: [ diff --git a/docs/src/pages/de/guides/styling.md b/docs/src/pages/de/guides/styling.md index 7273d49a2..c5d115298 100644 --- a/docs/src/pages/de/guides/styling.md +++ b/docs/src/pages/de/guides/styling.md @@ -10,7 +10,6 @@ Astro verfügt über eine besondere Möglichkeit, um das Schreiben von CSS so ei Standardmäßig werden in Astro-Komponenten alle Styles nur auf Elemente im Rahmen der Komponente (genannt **Scope**) angewandt, der sie hinzugefügt wurden. Dies kann die Arbeit mit Styles erheblich erleichtern, da du dich zu jeder Zeit nur um die Gestaltung der Komponente kümmern musst, an der du arbeitest. - ```html

Ich bin ein Style im Scope der Komponente, und ich bin rot!

-

Ich bin ein Style im Scope der Komponente, und ich bin kursiv!!

+

+ Ich bin ein Style im Scope der Komponente, und ich bin kursiv!! +

``` Beachte dass der der `h1`-Selektor hier nicht über die Komponente hinaus wirksam wird! Die Styles werden nicht auf andere `h1`-Tags außerhalb dieses Dokuments angewandt - auch nicht in untergeordneten Komponenten. @@ -63,7 +64,7 @@ _Beachte: `Astro.resolve()` ist ein nützliches Hilfsmittel, um Verweise auf Dat #### Styling untergeordneter Elemente -Falls du Styles, die im Scope der Komponente gesetzt werden, auch auf untergeordnete Komponenten anwenden willst, kannst du auf die `:global()`-Funktion aus den [CSS-Modules][css-modules] zurückgreifen: +Falls du Styles, die im Scope der Komponente gesetzt werden, auch auf untergeordnete Komponenten anwenden willst, kannst du auf die `:global()`-Funktion aus den [CSS-Modules][css-modules] zurückgreifen: ```astro @@ -88,7 +89,7 @@ import PostContent from './Post.astro'; ``` -Dies ist eine sehr gute Methode, um Dinge zu stylen wie Blogposts oder Dokumente, die mit Inhalten aus einem CMS außerhalb von Astro gefüttert werden. Aber Vorsicht, wenn untergeordnete Elemente frei von Abhängigkeiten gestaltet werden, bricht dies auch die Verkapselung der Komponente auf. Das Arbeiten mit Komponenten die unterschiedlich aussehen, abhängig davon ob sie ein bestimmtes übergeordnetes Element haben oder nicht, kann sehr schnell unübersichtlich werden. +Dies ist eine sehr gute Methode, um Dinge zu stylen wie Blogposts oder Dokumente, die mit Inhalten aus einem CMS außerhalb von Astro gefüttert werden. Aber Vorsicht, wenn untergeordnete Elemente frei von Abhängigkeiten gestaltet werden, bricht dies auch die Verkapselung der Komponente auf. Das Arbeiten mit Komponenten die unterschiedlich aussehen, abhängig davon ob sie ein bestimmtes übergeordnetes Element haben oder nicht, kann sehr schnell unübersichtlich werden. #### Globale Styles innerhalb eines `