Verwendung der @-Regel in CSS

In diesem Artikel wird hauptsächlich die Verwendungszusammenfassung einiger @-Regeln in CSS vorgestellt. Dies ist das Grundwissen für das einführende Erlernen von CSS. Freunde, die es benötigen, können darauf zurückgreifen.

at-rule ist eine Anweisung, die Folgendes bereitstellt Ausführung für CSS Oder Anweisungen zum Verhalten. 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:

@[KEYWORD] (RULE);

@charset
Diese Regel definiert, welche Zeichen der Browser verwendet Wird gesetzt, 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:

@charset "UTF-8";

@import
Diese Regel gibt an, dass das angeforderte Stylesheet in dieser Zeile korrekt ist, wenn der Inhalt korrekt ist , wird eine externe CSS-Datei eingeführt.

@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 greift auf die CSS-Dateien zu und verarbeitet sie in einer CSS-Datei, bei nativem CSS ist es jeder @import 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.

/* 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.

@[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.

@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 unterschiedliche Grade der Unterstützung für benutzerdefinierte Schriftarten, aber diese Regel akzeptiert Anweisungen zum Erstellen und Bereitstellen dieser Schriftarten.

@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 für Keyframe-Animationen und ermöglicht es uns, den Anfang und das Ende der Animation zu markieren.

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

/* 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

@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

@page :first {
          margin: 1in;
        }

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

/* Check one supported condition */
        @supports (display: flex) {
          .module { display: flex; }
        }
        /* Check multiple conditions */
        @supports (display: flex) and (-webkit-appearance: checkbox) {
          .module { display: flex; }
        }

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Zusammenfassung der hohen Leistung beim Schreiben von CSS-Code

Regeln von CSS-Stilen überschreiben

Das obige ist der detaillierte Inhalt vonVerwendung der @-Regel in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!