Wie verwende ich die @-Regel in CSS? Einführung in die Nutzung

【Empfohlenes Tutorial: CSS-Video-Tutorial】

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

@charset

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 ü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 sind.

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 weiß, ob er a unterstützt Bei bestimmten Merkmalen/Funktionen 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 für bestimmte Bedingungen verwendet werden können, um Benutzererlebnisse und Interaktionen zu schaffen, die zu bestimmten Szenarien passen.

Der Artikel wird nachgedruckt und nur zum Teilen und Lernen verwendet. Bei Verstößen hinterlassen Sie bitte eine Nachricht und kontaktieren Sie uns zum Löschen. Vielen Dank!

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonWie verwende ich die @-Regel in CSS? Einführung in die Nutzung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!