Articles
Einführung in CSS
CSS-`@`-Regeln

CSS-`@`-Regeln

Dieser Artikel erklärt CSS-@-Regeln.

Sie können den Gebrauch und die Erstellung von @-Regeln wie @import und @media lernen.

YouTube Video

HTML zur Vorschau

css-at-rule.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS At Rules</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-at-rule.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS At(@) Rules</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS At(@) Rules</h2></header>
 19        <article>
 20            <h3>@import</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24@import url('styles.css');
 25</pre>
 26            </section>
 27        </article>
 28        <article>
 29            <h3>@media</h3>
 30            <section>
 31                <header><h4>CSS</h4></header>
 32<pre class="sample">
 33@media screen and (max-width: 600px) {
 34    body {
 35        background-color: lightblue;
 36    }
 37}
 38</pre>
 39            </section>
 40        </article>
 41        <article>
 42            <h3>@media Example(Screen Width)</h3>
 43            <section>
 44                <header><h4>CSS</h4></header>
 45<pre class="sample">
 46@media (min-width: 600px) {
 47    body {
 48        background-color: lightblue;
 49    }
 50}
 51@media (max-width: 599px) {
 52    body {
 53        background-color: lightpink;
 54    }
 55}
 56</pre>
 57            </section>
 58        </article>
 59        <article>
 60            <h3>@media Example(Orientation)</h3>
 61            <section>
 62                <header><h4>CSS</h4></header>
 63<pre class="sample">
 64@media (orientation: portrait) {
 65    body {
 66        font-size: 18px;
 67    }
 68}
 69@media (orientation: landscape) {
 70    body {
 71        font-size: 16px;
 72    }
 73}
 74</pre>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>@media Example(Resolution)</h3>
 79            <section>
 80                <header><h4>CSS</h4></header>
 81<pre class="sample">
 82@media (min-resolution: 2dppx) {
 83    body {
 84        background-image: url('high-res-image.png');
 85    }
 86}
 87</pre>
 88            </section>
 89        </article>
 90        <article>
 91            <h3>@media Example(AND Condition)</h3>
 92            <section>
 93                <header><h4>CSS</h4></header>
 94<pre class="sample">
 95@media (min-width: 600px) and (orientation: portrait) {
 96    body {
 97        background-color: lightgreen;
 98    }
 99}
100</pre>
101            </section>
102        </article>
103        <article>
104            <h3>@media Example(OR Condition)</h3>
105            <section>
106                <header><h4>CSS</h4></header>
107<pre class="sample">
108@media (max-width: 400px), (orientation: landscape) {
109    body {
110        color: gray;
111    }
112}
113</pre>
114            </section>
115        </article>
116        <article>
117            <h3>@media Example(NOT Condition)</h3>
118            <section>
119                <header><h4>CSS</h4></header>
120<pre class="sample">
121@media not all and (min-width: 600px) {
122    body {
123        font-size: 14px;
124    }
125}
126</pre>
127            </section>
128        </article>
129        <article>
130            <h3>@font-face</h3>
131            <section>
132                <header><h4>CSS</h4></header>
133<pre class="sample">
134@font-face {
135  font-family: 'CustomFont';
136  src: url('customfont.woff2') format('woff2'),
137       url('customfont.woff') format('woff');
138}
139</pre>
140            </section>
141        </article>
142        <article>
143            <h3>@keyframes</h3>
144            <section>
145                <header><h4>CSS</h4></header>
146<pre class="sample">
147@keyframes slidein {
148    from {
149        transform: translateX(100%);
150    }
151    to {
152        transform: translateX(0%);
153    }
154}
155
156div {
157    animation: slidein 2s ease-in-out;
158}
159</pre>
160            </section>
161        </article>
162        <article>
163            <h3>@supports</h3>
164            <section>
165                <header><h4>CSS</h4></header>
166<pre class="sample">
167@supports (display: grid) {
168    .container {
169        display: grid;
170    }
171}
172</pre>
173            </section>
174        </article>
175        <article>
176            <h3>@page</h3>
177            <section>
178                <header><h4>CSS</h4></header>
179<pre class="sample">
180@page {
181    size: A4;
182    margin: 2cm;
183}
184</pre>
185            </section>
186        </article>
187        <article>
188            <h3>@charset</h3>
189            <section>
190                <header><h4>CSS</h4></header>
191<pre class="sample">
192@charset "UTF-8";
193</pre>
194            </section>
195        </article>
196        <article>
197            <h3>@layer</h3>
198            <section>
199                <header><h4>CSS</h4></header>
200<pre class="sample">
201@layer reset {
202    h1 {
203        margin: 0;
204    }
205}
206@layer base {
207    h1 {
208        font-size: 24px;
209        color: blue;
210    }
211}
212@layer theme {
213    h1 {
214        color: red;
215    }
216}
217</pre>
218                <header><h4>HTML</h4></header>
219<pre>
220&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
221&lt;p&gt;
222    This page demonstrates how to apply styles to
223    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
224&lt;/p&gt;
225</pre>
226                <header><h4>HTML+CSS</h4></header>
227                <section class="sample-view">
228                    <h1>CSS Layer Test</h1>
229                    <p>
230                        This page demonstrates how to apply styles to
231                        the <code>&lt;h1&gt;</code> element using CSS layers.
232                    </p>
233                </section>
234            </section>
235        </article>
236        <article>
237            <h3>@layer with order</h3>
238            <section>
239                <header><h4>CSS</h4></header>
240<pre class="sample">
241@layer theme, base, reset;
242
243@layer reset {
244    h1 {
245        margin: 0;
246    }
247}
248@layer base {
249    h1 {
250        font-size: 24px;
251        color: blue;
252    }
253}
254@layer theme {
255    h1 {
256        color: red;
257    }
258}
259</pre>
260                <header><h4>HTML</h4></header>
261<pre>
262&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
263&lt;p&gt;
264    This page demonstrates how to apply styles to
265    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
266&lt;/p&gt;
267</pre>
268                <header><h4>HTML+CSS</h4></header>
269                <section class="sample-view">
270                    <h1>CSS Layer Test</h1>
271                    <p>
272                        This page demonstrates how to apply styles to
273                        the <code>&lt;h1&gt;</code> element using CSS layers.
274                    </p>
275                </section>
276            </section>
277        </article>
278        <article>
279            <h3>@import &amp; @layer</h3>
280            <section>
281                <header><h4>CSS</h4></header>
282<pre class="sample">
283@import url('css/reset.css') layer(reset);
284@import url('css/base.css') layer(base);
285@import url('css/theme.css') layer(theme);
286</pre>
287                <header><h4>HTML</h4></header>
288<pre>
289&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
290&lt;p&gt;
291    This page demonstrates how to apply styles to
292    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
293&lt;/p&gt;
294</pre>
295                <header><h4>HTML+CSS</h4></header>
296                <section class="sample-view">
297                    <h1>CSS Layer Test</h1>
298                    <p>
299                        This page demonstrates how to apply styles to
300                        the <code>&lt;h1&gt;</code> element using CSS layers.
301                    </p>
302                </section>
303            </section>
304        </article>
305    </main>
306</body>
307</html>

CSS-@-Regeln

CSS-@-Regeln (At-Rules) sind spezielle Anweisungen, die das Verhalten und die Anwendungsbedingungen von Stylesheets steuern. Im Gegensatz zu normalen CSS-Eigenschaften wenden @-Regeln Stile bedingt an oder importieren externe Ressourcen. Repräsentative @-Regeln umfassen unter anderem @media, @import und @keyframes.

Arten von beispielhaften @-Regeln

@import 

1@import url('styles.css');

@import wird verwendet, um andere CSS-Dateien in das aktuelle Stylesheet zu importieren. Dies ermöglicht eine einfache Wiederverwendung externer CSS-Dateien.

Punkte:

  • @import muss am Anfang des Stylesheets geschrieben werden.
  • Es sollte in großen Projekten vermieden werden, da es die Leistung beeinträchtigen kann.

@media 

1@media screen and (max-width: 600px) {
2  body {
3    background-color: lightblue;
4  }
5}
  • @media verwendet Media Queries, um Stile basierend auf bestimmten Bedingungen (wie Bildschirmbreite, Auflösung usw.) anzuwenden. Es wird häufig bei der Umsetzung von Responsive Design verwendet.

Häufig verwendete Bedingungen

Die folgenden sind häufig verwendete Bedingungen, die häufig in Media Queries verwendet werden.

Bedingungen basierend auf der Breite 
 1@media (min-width: 600px) {
 2    body {
 3        background-color: lightblue;
 4    }
 5}
 6@media (max-width: 599px) {
 7    body {
 8        background-color: lightpink;
 9    }
10}
  • Minimale Breite (min-width) wendet Stile an, wenn die Breite gleich oder größer als der angegebene Wert ist.
  • Maximale Breite (max-width) wendet Stile an, wenn die Breite gleich oder kleiner als der angegebene Wert ist.
Ausrichtung des Geräts (orientation) 
 1@media (orientation: portrait) {
 2    body {
 3        font-size: 18px;
 4    }
 5}
 6@media (orientation: landscape) {
 7    body {
 8        font-size: 16px;
 9    }
10}
  • Ausrichtung des Geräts (orientation) kann auf Hochformat oder Querformat eingestellt werden.
Auflösung (resolution) 
1@media (min-resolution: 2dppx) {
2    body {
3        background-image: url('high-res-image.png');
4    }
5}
  • Stile können basierend auf der Auflösung (resolution) angewendet werden.
  • In diesem Beispiel wird ein hochauflösendes Hintergrundbild für hochauflösende Displays angegeben.

Kombinieren von Bedingungen

Media Queries können auch mehrere Bedingungen kombinieren.

UND-Bedingung (and) 
1@media (min-width: 600px) and (orientation: portrait) {
2    body {
3        background-color: lightgreen;
4    }
5}
  • Die UND-Bedingung wendet Stile an, wenn alle Bedingungen erfüllt sind.
  • In diesem Beispiel wird die Hintergrundfarbe des body auf Hellgrün gesetzt, wenn die Bildschirmbreite 600px oder größer ist und das Gerät im Hochformat ist.
ODER-Bedingung (,) 
1@media (max-width: 400px), (orientation: landscape) {
2    body {
3        color: gray;
4    }
5}
  • Die ODER-Bedingung wendet Stile an, wenn eine der Bedingungen erfüllt ist.
  • In diesem Beispiel wird die Textfarbe des body auf Grau gesetzt, wenn die Bildschirmbreite 400px oder kleiner ist, oder das Gerät im Querformat ist.
NICHT-Bedingung (not) 
1@media not all and (min-width: 600px) {
2    body {
3        font-size: 14px;
4    }
5}
  • Die NICHT-Bedingung wendet Stile an, wenn die Bedingung nicht erfüllt ist.
  • In diesem Beispiel wird für alle Geräte die Schriftgröße des body auf 14px gesetzt, wenn die Bildschirmbreite nicht 600px oder größer ist.

@font-face 

1@font-face {
2  font-family: 'CustomFont';
3  src: url('customfont.woff2') format('woff2'),
4       url('customfont.woff') format('woff');
5}

@font-face wird verwendet, um Webfonts zu definieren. Mit dieser Regel können externe Schriftarten heruntergeladen und auf einer Webseite angewendet werden.

  • Benutzerdefinierte Schriftarten können anstelle von Standardschriftarten verwendet werden.
  • Es ist wichtig, auf die Dateigröße der Schriftarten zu achten.

@keyframes 

 1@keyframes slidein {
 2  from {
 3    transform: translateX(100%);
 4  }
 5  to {
 6    transform: translateX(0%);
 7  }
 8}
 9
10div {
11  animation: slidein 2s ease-in-out;
12}

@keyframes wird verwendet, um CSS-Animationen zu erstellen. Stile können für jeden Schritt einer Animation definiert werden.

  • Es ermöglicht eine detaillierte Steuerung von Animationen.
  • Es wird in Verbindung mit der animation-Eigenschaft verwendet.

@supports 

1@supports (display: grid) {
2  .container {
3    display: grid;
4  }
5}

@supports prüft, ob bestimmte CSS-Funktionen vom Browser unterstützt werden, und wendet Stile basierend auf dem Ergebnis an.

  • Es hilft, die Kompatibilität zwischen älteren und neueren Browsern aufrechtzuerhalten.
  • Fallbacks können durch Feature-Erkennung angewendet werden.

@page 

1@page {
2  size: A4;
3  margin: 2cm;
4}

@page wird verwendet, um Stile für den Druck zu steuern. Es ist nützlich, um Seitengröße und Ränder festzulegen.

Punkte:

  • Es wird verwendet, um Stile für Druckmedien festzulegen.
  • Sie können auch die Stile von spezifischen Seitenelementen wie Kopf- und Fußzeilen anpassen.

@charset 

1@charset "UTF-8";

@charset gibt die Zeichenkodierung einer CSS-Datei an. In der Regel wird UTF-8 angegeben.

  • Es muss am Anfang des Stylesheets angegeben werden.
  • Es wird besonders für mehrsprachige Websites verwendet.

@layer

@layer ist eine neue @-Regel, die verwendet wird, um die Priorität von Stylesheets in CSS zu organisieren, wodurch mehrere CSS-Regeln in Schichten gruppiert und verwaltet werden können. Diese Regel ist besonders nützlich in großen Stylesheets oder Projekten mit mehreren externen Stylesheets, um CSS-Konflikte zu vermeiden.

In CSS-Stylesheets wird die Priorität normalerweise durch die 'Cascade' bestimmt, aber durch die Verwendung von @layer kann die Stilpriorität flexibler und expliziter gesteuert werden.

Grundlegende Syntax 

1@layer <layer-name> {
2  /* Styles within this layer */
3}
  • Wenn Sie Stile mit @layer definieren, sieht die Syntax so aus.
 1@layer reset {
 2    h1 {
 3        margin: 0;
 4    }
 5}
 6@layer base {
 7    h1 {
 8        font-size: 24px;
 9        color: blue;
10    }
11}
12@layer theme {
13    h1 {
14        color: red;
15    }
16}
  • Zum Beispiel können Sie Stile in verschiedenen Layern wie folgt definieren:
  • In diesem Fall werden die reset-, base- und theme-Schichten jeweils definiert, und der endgültige h1-Stil wird durch den Inhalt der theme-Schicht bestimmt, was dazu führt, dass color: red; angewendet wird.

Priorität mehrerer Layer

Die mächtige Funktion von @layer besteht darin, die Priorität der Stile zwischen Schichten zu verwalten. Im obigen Beispiel überschreibt die zuletzt definierte theme-Schicht die in anderen Schichten definierten Stile.

Außerdem kann @layer verwendet werden, um die Prioritätskaskade in externen Stylesheets oder CSS-Dateien, die aus anderen Bibliotheken geladen werden, zu verwalten.

Globale Priorität 
 1@layer theme, base, reset;
 2
 3@layer reset {
 4    h1 {
 5        margin: 0;
 6    }
 7}
 8@layer base {
 9    h1 {
10        font-size: 24px;
11        color: blue;
12    }
13}
14@layer theme {
15    h1 {
16        color: red;
17    }
18}
  • Die Reihenfolge der Schichten hat innerhalb der CSS-Cascade Vorrang, wobei später definierte Stile überwiegen. Sie können beispielsweise die Reihenfolge der Schichten ausdrücklich festlegen, indem Sie sie wie folgt schreiben.
  • Dies stellt sicher, dass Styles in der Reihenfolge theme, base und reset angewendet werden, selbst wenn die theme-Ebene zuerst definiert wurde.

Verwendung von @import mit @layer 

1@import url('css/reset.css') layer(reset);
2@import url('css/base.css') layer(base);
3@import url('css/theme.css') layer(theme);
  • Durch die Kombination von @import und @layer ist es auch möglich, Schichten in externen Stylesheets zu verwalten.
  • Dadurch können externe Stylesheets in verschiedenen Schichten platziert und deren Priorität verwaltet werden.

Wichtige Punkte zu @layer

@layer ist ein mächtiges Werkzeug im CSS-Stilmanagement und bietet eine praktische Methode, um Stilkonflikte in großen Projekten zu vermeiden. Es ist besonders bemerkenswert, um Stilprioritäten prägnant zu verwalten, wenn mehrere Stilquellen verwendet werden. Es ist sinnvoll, die folgenden Punkte zu beachten.

  • Durch die Trennung von Stilen in Schichten können Sie die Priorität der Cascade steuern.
  • Durch die Verwendung zusammen mit @import können externe CSS-Dateien in die Schichtverwaltung einbezogen werden.
  • Das Definieren mehrerer Ebenen kann Stilkonflikte verhindern.

Dies minimiert Stilkonflikte und ermöglicht ein effizientes Design, selbst in Projekten, die ein komplexes Stilmanagement erfordern.

Beispiele für die Verwendung von @layer

Bei der Verwendung von @layer können Aspekte wie Benennungsrichtlinien für Layer, Importreihenfolge und die Anzahl der Layer, die zum Umfang des Projekts passen, berücksichtigt werden.

Benennung von Layern

Layer-Namen werden auf der Grundlage der Struktur und des Zwecks des Projekts festgelegt. Häufige Beispiele für die Benennung von Layern umfassen Folgendes:.

1@layer base, layout, components, utilities;
  • base: Ein Layer, der grundlegende Stile wie Resets und Typografie definiert.
  • layout: Ein Layer, der die Stile für Seitenlayouts und Rastersysteme definiert.
  • components: Ein Layer, der die Stile für wiederverwendbare UI-Komponenten wie Buttons und Karten definiert.
  • utilities: Ein Layer, der Stile für Dienstklassen (z. B. margin, padding, text-center) definiert.
Klar definierte Importreihenfolge 
1@import url('base.css') layer(base);
2@import url('layout.css') layer(layout);
3@import url('components.css') layer(components);
4@import url('utilities.css') layer(utilities);
  • Beim Umgang mit mehreren CSS-Dateien ist es wichtig, eine klare Reihenfolge mit @import festzulegen. Diese Reihenfolge stellt sicher, dass die beabsichtigte Priorität eingehalten wird.
Konsolidierung und Vereinfachung von Layern 
 1@layer common {
 2  body {
 3    margin: 0;
 4    padding: 0;
 5    box-sizing: border-box;
 6  }
 7
 8  .container {
 9    max-width: 1200px;
10    margin: 0 auto;
11  }
12}
  • In kleineren Projekten kann die Begrenzung der Anzahl der Layer die Komplexität reduzieren.

Zusammenfassung

CSS-@-Regeln sind mächtige Werkzeuge, die eine flexible Stil-Anwendung und Leistungsverbesserung im Webdesign unterstützen. @media, @keyframes und @supports erleichtern das Styling unter Berücksichtigung von Geräteunterschieden und Browser-Kompatibilität. Zusätzlich ermöglichen @import und @font-face die effiziente Einbindung externer Ressourcen für eine ausdrucksstärkere Gestaltung.

Das Verstehen und korrekte Anwenden dieser @-Regeln ermöglicht eine effektivere CSS-Programmierung.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

CSS Pseudo-Klassen und Pseudo-Elemente