Welche Rolle spielt @ in CSS?

In CSS ist „@“ eine Anweisung, die Anweisungen zur CSS-Ausführung oder zum Verhalten gibt. Jede Regeldeklaration beginnt mit „@“, gefolgt von einem verfügbaren Schlüsselwort, das als Bezeichner dient und angibt, was CSS tun soll. Beispielsweise definiert die „@charset“-Regel den vom Browser verwendeten Zeichensatz, die „@font“-Regel. Die Regel „Gesicht“ ermöglicht das Laden benutzerdefinierter Schriftarten auf Webseiten.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer. Es gibt es schon seit der

@ 在 CSS1 中的 @import-Ära und wird in CSS at-rules genannt.

at-rule ist eine Deklaration, die Anweisungen für die Ausführung oder das Verhalten von CSS bereitstellt. Jede Regeldeklaration 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);

@charset

Diese Regel definiert den vom Browser verwendeten Zeichensatz, wenn das Stylesheet Nicht- ASCII-Zeichen (z. B. UTF-8). Beachten Sie, dass der im HTTP-Header platzierte Zeichensatz die @charset-Regel überschreibt. Der Code lautet wie folgt: Führen Sie eine externe CSS-Datei ein.

Der Code lautet wie folgt:

@charset "UTF-8";

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:

@import 'global.css';

Verschachtelte Regeln

Verschachtelte Regeln enthalten zusätzliche Teilmengendeklarationen, von denen einige nur in bestimmten Situationen verwendet werden können.

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

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

@[KEYWORD] {
/* Nested Statements */
}

@font-face

Diese Regel ermöglicht das Laden benutzerdefinierter Schriftarten auf Webseiten. Es gibt unterschiedliche Unterstützungsgrade für benutzerdefinierte Schriftarten, aber diese Regel akzeptiert Anweisungen zum Erstellen und Bereitstellen dieser Schriftarten .

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

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

 @font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}

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

 @keyframes pulse {
0% {
background-color: #001f3f;
}
100% {
background-color: #ff4136;
}
}

Oder wenden Sie einfach den Stil an, wenn das Dokument gedruckt wirdDer 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%; }
}

@page

Diese Regel definiert den Stil für die einzelnen Seiten, die gedruckt werden sollen gedruckt. Insbesondere können Ränder für Seitenpseudoelemente festgelegt werden: :first, :left und :right

Der Code lautet wie folgt:

@media print {
}

@supports

Diese Regel kann testen, ob der Browser eine bestimmte Funktion unterstützt/ Funktion werden bestimmte Stile auf diese Elemente angewendet, wenn die Bedingungen erfüllt sind. Ein bisschen wie Modernizr, aber wirklich CSS-Eigenschaften.

Der Code lautet wie folgt:

@page :first {
margin: 1in;
}

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 mit Stilen für bestimmte Bedingungen verwendet werden können, um Benutzererlebnisse und Interaktionen zu erstellen, die zu bestimmten Szenarien passen.

(Lernvideo-Sharing: Web-Frontend)

Das obige ist der detaillierte Inhalt vonWelche Rolle spielt @ in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!