Was sind die Verwendungszwecke von @ in CSS?

Der @-Befehl wird häufig im CSS-Code verwendet und hat verschiedene Funktionen. Die Syntaxstruktur ist grundsätzlich dieselbe. Auf @ folgt ein Schlüsselwort zur Angabe der jeweiligen Funktionen.

at-rule ist eine Anweisung, die Anweisungen zur CSS-Ausführung oder zum Verhalten 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.

(Video-Tutorial empfohlen: CSS-Video-Tutorial)

Allgemeine Regeln

Allgemeine Regeln folgen der folgenden Syntax:

Der Code lautet wie folgt:

@[KEYWORD] (RULE);

@charset

Diese Regel definiert den Zeichensatz, der von verwendet wird Browser, wenn das Stylesheet Nicht-ASCII-Zeichen enthält (z. B. UTF-8). Beachten Sie, dass der im HTTP-Header platzierte Zeichensatz die @charset-Regel überschreibt

Der Code lautet wie folgt:

@charset "UTF-8";

@import

Diese Regel gibt an, dass das Stylesheet in dieser Zeile angefordert wird, wenn der Inhalt korrekt ist. a Externe CSS-Dateien.

Der Code lautet wie folgt:

@import 'global.css';

Obwohl gängige CSS-Präprozessoren alle @import unterstützen, sollte beachtet werden, dass sie anders funktionieren als natives CSS: Der Präprozessor erfasst die CSS-Dateien und verarbeitet sie in CSS-Dateien, für natives CSS Jeder @import ist eine unabhängige 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 in CSS 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 in bestimmten Situationen 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.

(Zugehörige Tutorial-Empfehlung: CSS-Tutorial)

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. Es gibt jedoch unterschiedliche Grade der Unterstützung für benutzerdefinierte Schriftarten Diese Regeln akzeptieren Anweisungen zur Erstellung und Bereitstellung 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 und das Ende der Animation zu markieren.

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. Diese Deklarationen können Bildschirmgrößen umfassen, die bei bildschirmadaptiven Stilen nützlich sein können.

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 wenden Sie einfach den Stil an, wenn das Dokument gedruckt wird

Der Code lautet wie folgt:

@media print {
}

@page

Diese Regel definiert den Stil für die einzelnen 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 Regel kann testen, ob der Browser weiß, ob er eine bestimmte Funktion unterstützt /function. Wenn die Bedingungen erfüllt sind, werden bestimmte Stile auf diese Elemente angewendet. 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.

Das obige ist der detaillierte Inhalt vonWas sind die Verwendungszwecke von @ in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!