at-rule ist eine Anweisung, die Anweisungen für die Ausführung oder das Verhalten von CSS bereitstellt. Jede Deklaration beginnt mit @, gefolgt von einem verfügbaren Schlüsselwort, das als Bezeichner dient und angibt, was das CSS tun soll. Dies ist eine allgemeine Syntax, obwohl es für jede at-Regel andere Syntaxvarianten gibt.
Allgemeine Regeln
Allgemeine Regeln folgen der folgenden Syntax:
Der Code lautet wie folgt:
@[KEYWORD] (RULE);
@ Zeichensatz
Diese Regel definiert den vom Browser verwendeten Zeichensatz, wenn das Stylesheet Nicht-ASCII-Zeichen enthält (z. B. UTF-8). Beachten Sie, dass der im HTTP-Header platzierte Zeichensatz die @charset-Regel
mit dem folgenden Code überschreibt:
@charset "UTF-8";
@import
Diese Regel gibt die Anforderung an Stylesheet: Wenn der Inhalt korrekt ist, wird in dieser Zeile eine externe CSS-Datei eingefügt.
Der Code lautet wie folgt:
@import 'global.css';
Obwohl beliebte CSS-Präprozessoren @import unterstützen, sollte beachtet werden, dass sie anders funktionieren als natives CSS: Der Präprozessor crawlt CSS-Dateien und verarbeitet sie in eine CSS-Datei. Bei nativem CSS ist jeder @import eine separate HTTP-Anfrage.
@namespace
Diese Regel ist sehr nützlich für die Anwendung von CSS auf XML-HTML (XHTML), da das XHTML-Element als Selektor bei der CSS-Verwendung verwendet werden kann.
Der Code lautet wie folgt:
/* Namespace for XHTML */ @namespace url(http://www.w3.org/1999/xhtml); /* Namespace for SVG embedded in XHTML */ @namespace svg url(http://www.w3.org/2000/svg);
Verschachtelte Regeln
Verschachtelte Regeln enthalten zusätzliche Teilmengendeklarationen, von denen einige nur für bestimmte Bedingungen verwendet werden können .
Der Code lautet wie folgt:
@[KEYWORD] {
/* Nested Statements */
}@document
Diese Regel legt Bedingungen für das Stylesheet fest: Es kann nur auf bestimmte Seiten angewendet werden. Beispielsweise stellen wir eine URL bereit und passen dann die Stile für diese bestimmte Seite an. Auf anderen Seiten werden diese Stile ignoriert.
Der Code lautet wie folgt:
@document
/* Rules for a specific page */
url(http://css-tricks.com/),
/* Rules for pages with a URL that begin with... */
url-prefix(http://css-tricks.com/snippets/),
/* Rules for any page hosted on a domain */
domain(css-tricks.com),
/* Rules for all secure pages */
regexp("https:.*")
{
/* Start styling */
body { font-family: Comic Sans; }
}@font-face
Diese Regel ermöglicht das Laden benutzerdefinierter Schriftarten auf Webseiten mit unterschiedlichem Unterstützungsgrad für benutzerdefinierte Schriftarten , aber diese Regel akzeptiert Anweisungen zum Erstellen und Bereitstellen dieser Schriftarten.
Der Code lautet wie folgt:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}@keyframes
Unter vielen CSS-Eigenschaften ist diese Regel die Grundlage der Keyframe-Animation und ermöglicht es uns, den Anfang zu markieren und Ende der Animation.
Der Code lautet wie folgt:
@keyframes pulse {
0% {
background-color: #001f3f;
}
100% {
background-color: #ff4136;
}
}@media
Diese Regel enthält bedingte Deklarationen, die zum Festlegen von Stilen für bestimmte Bildschirme verwendet werden können Die Bildschirmgröße ist gegebenenfalls sehr nützlich.
Der Code lautet wie folgt:
/* iPhone in Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
.module { width: 100%; }
}Oder verwenden Sie den Stil nur beim Drucken des Dokuments
Der Code lautet wie folgt:
@media print {
} @page
Diese Regel definiert Stile für einzelne Seiten, die gedruckt werden. Insbesondere können Ränder für Seitenpseudoelemente festgelegt werden: :first, :left und :right
Der Code lautet wie folgt:
@page :first {
margin: 1in;
}@supports
Diese Regeln testen das Wissen des Browsers über die Unterstützung einer Funktion/Funktion und wenden, wenn die Bedingungen erfüllt sind, bestimmte Stile auf diese Elemente an. Ein bisschen wie Modernizr, aber wirklich CSS-Eigenschaften.
Der Code lautet wie folgt:
/* Check one supported condition */
@supports (display: flex) {
.module { display: flex; }
}
/* Check multiple conditions */
@supports (display: flex) and (-webkit-appearance: checkbox) {
.module { display: flex; }
}Zusammenfassung
at-rule kann CSS dazu bringen, einige verrückte und interessante Dinge zu tun . Obwohl die Beispiele im Artikel grundlegend sind, können Sie sehen, wie sie für bestimmte Bedingungen verwendet werden können, um Benutzererlebnisse und Interaktionen zu erstellen, die zu bestimmten Szenarien passen.
Empfohlenes Tutorial: „CSS-Tutorial“
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von @ in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
