Teilen Sie die Verwendung einiger @-Regeln in CSS

In diesem Artikel wird hauptsächlich die Verwendung einiger @-Regeln in CSS erläutert. Dabei handelt es sich um Grundkenntnisse für das einführende Erlernen von CSS. Freunde, die es benötigen, können darauf zurückgreifen.

at-rule ist eine Anweisung, die die Ausführung ermöglicht oder wie man CSS-Anweisungen verwendet. 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 außer Kraft setzt.

Der Code lautet wie folgt:

@charset "UTF-8";

@import
Dies Die Regel gibt das Anforderungs-Stylesheet an. In dieser Zeile wird eine externe CSS-Datei eingefügt, wenn der Inhalt korrekt ist.

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 greift auf CSS-Dateien zu und verarbeitet sie in eine CSS-Datei. Für natives CSS ist 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.

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 verwendet werden können spezifische Umstände.

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 Anpassungsgrad. wird unterstützt, 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 uns das Markieren Beginn der Animation und Endzeichen.

Der Code lautet wie folgt:

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

@media
Diese Regel enthält bedingte Deklarationen, mit denen Stile für bestimmte Bildschirme angegeben werden können kann die Bildschirmgröße einbeziehen. Dies ist sehr nützlich bei bildschirmadaptiven Stilen.  

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 den Stil nur beim Drucken des Dokuments an  

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 Regel kann testen, ob der Browser ein bestimmtes Feature/eine bestimmte Funktion unterstützt. 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 dazu führen, dass CSS funktioniert einige verrückte und interessante Dinge. 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.

Das obige ist der detaillierte Inhalt vonTeilen Sie die Verwendung einiger @-Regeln in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!