In CSS sind zwei Syntaxregeln enthalten:
Gewöhnliche Regeln: Bestehend aus Selektoren, Attributen und Werten, haben wir diese Art von Regeln in früheren Studien hauptsächlich verwendet;
@Regel: Sie beginnt mit @ und wird von einem Schlüsselwort gefolgt. Sie wird auch als „AT-Regel“ bezeichnet und kann je nach Verwendungsmethode in „ reguläre Regel “ und „ verschachtelte Regel “ unterteilt werden.
Lassen Sie uns hauptsächlich die @-Regel in CSS einführen.
1. Allgemeine Regeln
Die sogenannten „regulären Regeln“ beziehen sich auf Regeln mit einer Syntax ähnlich der folgenden:
@[KEYWORD](REGEL);
(1)@charset
@charset wird verwendet, um die in CSS-Dateien verwendete Zeichenkodierung festzulegen. Das Syntaxformat ist wie folgt:
@charset<charset>;
Unter diesen ist <charset> die spezifische Zeichenkodierung und der Standardwert ist „utf-8“.
Bei der Verwendung müssen Sie folgende Punkte beachten:
① Wenn @charset festgelegt ist, muss es am Anfang der CSS-Datei stehen und vor @charset dürfen keine Zeichen stehen.
②Die Zeichenkodierung muss in doppelte Anführungszeichen gesetzt werden.
③ Um den @rule-Namen (@charset) und die spezifische Zeichenkodierung zu trennen, muss ein Leerzeichen verwendet werden.
④Das Semikolon nach der Regel kann nicht weggelassen werden;
⑤Wenn mehrere @charsets festgelegt sind, ist nur die erste Anweisung gültig;
⑥@charset kann nicht in HTML-Elementen oder <style>-Tags verwendet werden;
⑦Wenn mehrere Zeichenkodierungsregeln auf unterschiedliche Weise definiert sind, ist ihre Prioritätsreihenfolge wie folgt:
● Deklaration der Zeichenkodierung am Anfang der HTML-Datei;
●Zeichenkodierungsdeklaration im HTTP-Anforderungsheader;
●Die durch @charset definierte Zeichenkodierungsdeklaration wird in der CSS-Datei verwendet;
●Die Zeichenkodierungsdeklaration, die durch das charset-Attribut im <link>-Tag festgelegt wird (in HTML5 veraltet).
Das folgende Beispiel demonstriert die Verwendung von @charset sowie mehrere Fehlerbeispiele:
/*Setzen Sie das CSS-Kodierungsformat auf UnicodeUTF-8*/@charsetUTF-8;@charsetutf-8;/*Groß-/Kleinschreibung wird nicht beachtet*//*Fehlerdemonstration*/@charset'iso-8859-15';/*Ungültig Ja, die falschen Anführungszeichen werden verwendet */@charset'UTF-8';/*Ungültig, die falschen Anführungszeichen werden verwendet*/@charsetUTF-8;/*Ungültig, zwischen @charset und der Zeichenkodierung steht ein zusätzliches Leerzeichen * /@charsetUTF-8;/*Ungültig, es gibt ein zusätzliches Leerzeichen vor der @-Regel*/@charsetUTF-8;/*Ungültig, die Zeichenkodierung muss in doppelte Anführungszeichen gesetzt werden*/
(2) @import
@import wird verwendet, um andere Stildateien in die aktuelle CSS-Stildatei zu importieren. Alle Inhalte außer @charset in anderen Stylesheet-Dateien können über @import eingefügt werden. Darüber hinaus muss @import auch am Anfang der Style-Datei platziert werden. Das Syntaxformat von @import lautet wie folgt:
@import<url><media_query_list>
Unter anderem ist <url> der Pfad der externen Stylesheet-Datei, der mit einem absoluten oder relativen Pfad importiert werden soll. Sie können auch die Funktion url() verwenden, um den Dateipfad anzugeben Bedingungen der Medienabfrage Verwenden Sie Kommas, um mehrere Bedingungen zu trennen.
In tatsächlichen Projekten wird nicht empfohlen, @import zu häufig zu verwenden, da dies viele zusätzliche Anforderungen verursacht und das Laden anderer Dateien blockiert.
Bei der Verwendung von @import müssen Sie außerdem die folgenden Punkte beachten:
●@import muss zuerst am Anfang der Stylesheet-Datei deklariert werden und die Deklaration muss mit einem Semikolon enden. Wenn das abschließende Semikolon weggelassen wird, wird das externe Stylesheet möglicherweise nicht korrekt importiert.
●Mit @import im IE-Browser können nur bis zu 35 Stylesheets eingeführt werden.
Das folgende Beispiel demonstriert die Verwendung von @import:
@importurl(global.css);@importurl(global.css);@importglobal.css;@importurl(fineprint.css)print;@importurl(bluish.css)projection,tv;@import'custom.css';@ importurl(chrome://communicator/skin/);@importcommon.cssscreen,projection;@importurl('landscape.css')screenand(orientation:landscape);Die oben genannten Definitionsmethoden sind alle gültig. Wenn Sie url() zum Festlegen des Pfads der Stylesheet-Datei verwenden, sind die Anführungszeichen des Umbruchpfads optional Der Umbruchpfad der Anführungszeichen muss beibehalten werden.
(3)@namespace
@namespace wird verwendet, um die @-Regel des XML-Namespace im CSS-Stylesheet zu definieren. Es kann den angegebenen Namespace für alle Selektoren in der aktuellen Style-Datei festlegen. @namespace wird normalerweise verwendet, um Dokumente zu verarbeiten, die mehrere Namespaces enthalten, z. B. Inline-SVG in HTML5, MathML oder XML gemischt mit mehreren Vokabularien.
@namespace muss nach allen @charset und @import und vor allen anderen Stildeklarationen im Stylesheet definiert werden. @namespace kann verwendet werden, um einen Standard-Namespace zu definieren. Wenn der Standard-Namespace angegeben ist, werden alle universellen Selektoren und Klassenselektoren (jedoch keine Attributselektoren) nur auf Elemente in diesem Namespace angewendet. @namespace kann auch zum Definieren eines Namespace-Präfixes verwendet werden. Wenn einem allgemeinen, Klassen- oder Attributselektor ein Namespace-Präfix vorangestellt ist, stimmt dieser Selektor nur mit Elementen überein, deren Namespace mit dem Elementnamen oder Attribut übereinstimmt.
Das folgende Beispiel demonstriert die Verwendung von @namespace:
/*Standardnamespace*/@namespaceurl(XML-namespace-URL);@namespaceXML-namespace-URL;/*Namespacepräfix*/@namespaceprefixurl(XML-namespace-URL);@namespaceprefixXML-namespace-URL;
2. Verschachtelte Regeln
Die sogenannten „verschachtelten Regeln“ bedeuten, dass der @-Regel eine geschweifte Klammer {} folgen muss, die einige andere Regeldeklarationen enthält, ähnlich den folgenden:
@[KEYWORD]{/*Verschachtelte Anweisungen*/}(1)@media
@media wird verwendet, um einen bestimmten Teil des Stylesheets (Stilinformationen in geschweiften Klammern) basierend auf den Ergebnissen einer oder mehrerer Medienabfragen anzuwenden. Mit @media können Sie genau eine Reihe von Medienabfragen und einen CSS-Stilblock angeben wenn das Medium Die angegebenen CSS-Stile werden nur dann auf das Dokument angewendet, wenn die Abfrage mit dem verwendeten Gerät übereinstimmt.
Bei der Medienabfrage handelt es sich um eine Reihe von Bedingungen, die zum Bestimmen von Geräteinformationen verwendet werden, z. B. Breiten- und Höhenwert, Seitenverhältnis, Farbe, Auflösung usw. des Geräts. Wenn die Bedingungen übereinstimmen, werden die verschachtelten Stilinformationen ausgeführt.
@media kann an einer beliebigen Stelle im Stylesheet oder in anderen @-Regeln platziert werden. Der Beispielcode lautet wie folgt:
@mediaalland(min-width:1280px){/*Breite größer als 1280*/}@media(-webkit-min-device-pixel-ratio:1.5),(min-resolution:2dppx){/*Retina-Bildschirm*/ } @mediaprint{/*print*/}@media screen,screen9{/*IE7,IE8*/}@mediascreen9{/*IE7*/}(2)@page
@page wird zum Ändern bestimmter CSS-Eigenschaften beim Drucken eines Dokuments verwendet. Beachten Sie, dass Sie mit @page nur einige CSS-Eigenschaften ändern können, z. B. den äußeren Abstandseigenschaftenrand, druckbezogene Waisenzeichen, Windows-Eigenschaften und Seitenumbruch -* Eigenschaften, andere CSS-Eigenschaften werden ignoriert.
/*Gibt an, dass der obere und linke Rand der ersten Seite beim Drucken beide 50 % betragen*/@page:first{margin-left:50%;margin-top:50%;}(3)@supports
@supports wird verwendet, um zu überprüfen, ob der Browser eine bestimmte CSS-Funktion unterstützt, auch bekannt als „Feature-Abfrage“. Die Syntaxstruktur dieser Regel ist wie folgt:
@supports(rule)[operator(rule)]*{sRules};Unter diesen ist die Regel ein spezifischer CSS-Stil und muss in Klammern gesetzt werden. Die optionalen Werte des Operators sind „or“, „and“ und „not“. Über den Operator-Parameter können mehrere CSS-Stile angegeben werden.
@supports können oben in einer Stildatei oder innerhalb anderer verschachtelter Regeln definiert werden. Allerdings befindet sich @supports noch im experimentellen Stadium. Bevor Sie es verwenden, müssen Sie zunächst überprüfen, ob der Browser es unterstützt.
Das folgende Beispiel demonstriert die Verwendung von @supports:
/*CSS-Stil, der verwendet werden soll, wenn der Browser das display:grid-Attribut unterstützt*/@supports(display:grid){div{display:grid;}}/*CSS, der verwendet werden soll, wenn der Browser das display:grid-Attribut nicht unterstützt attribute Style*/@supportsnot(display:grid){div{float:right;}}/*Mehrere Bedingungen gleichzeitig prüfen*/@supports(display:flex)and(-webkit-appearance:checkbox){.module {Anzeige: Flex;}}(4) @font-face
@font-face wird verwendet, um die angegebene Schriftart vom Remote-Server oder vom Benutzer lokal zu laden. Das Syntaxformat ist wie folgt:
@font-face{font-family:<identifier>;src:<url>[format(<string>)][,<url>[format(<string>)]]*;<font>;}Die Parameterbeschreibung lautet wie folgt:
●<Bezeichner>: Schriftartname;
●<url>: Verwenden Sie url() (Remote-Schriftart) oder local() (lokale Schriftart), um den Schriftartspeicherpfad anzugeben, der ein relativer oder ein absoluter Pfad sein kann;
●<string>: wird verwendet, um das Format benutzerdefinierter Schriftarten anzugeben, z. B. der folgenden Typen: TrueType, OpenType, Embedded-OpenType, SVG usw.;
●<Schriftart>: Definieren Sie schriftartbezogene Stile.
Tipp: @font-face kann oben in einem CSS-Stylesheet oder innerhalb anderer verschachtelter Regeln platziert werden. Wenn Sie zum Laden von Schriftarten sowohl die Funktion local() als auch die Funktion url() verwenden, wird zuerst die in der Funktion local() definierte lokale Schriftart geladen. Wenn sie nicht gefunden wird, wird die in der Funktion url() definierte Remote-Schriftart geladen geladen.
Das folgende Beispiel demonstriert die Verwendung von @font-face:
/*@font-face-Regeln definieren*/@font-face{/*Geben Sie den Namen der Schriftart an*/font-family:OpenSans;/*Geben Sie den Pfad zur Schriftartdatei an*/src:url(/fonts/OpenSans-Regular -webfont. woff2)format(woff2),url(/fonts/OpenSans-Regular-webfont.woff)format(woff);}/*Font application*/p{font-family:OpenSans;}(5)@keyframes
@keyframes wird verwendet, um den Stil von Animations-Keyframes (oder Wegpunkten) in CSS3 zu definieren, um die Zwischenschritte in der Animationssequenz zu steuern. Nachdem Sie diese Regel definiert haben, müssen Sie sie über das Attribut „animation-name“ verwenden. Keyframe-Sequenzen werden nach Prozentsätzen benannt, wobei der Anfangs- und der Endstatus von und bis 0 % bzw. 100 % darstellen.
Das Syntaxformat von @keyframes ist wie folgt:
@keyframes<identifier>{<keyframes-blocks>}Unter anderem wird <identi fier> verwendet, um den Namen der Animation zu definieren; <keyframes-blocks> wird verwendet, um den Stil der Animation in jeder Phase, also der Frame-Animation, zu definieren.
Die Verwendung von @keyframes wird im folgenden Beispiel demonstriert:
/*Statement*/@keyframessslidein{from{margin-left:100%;width:300%;}to{margin-left:0%;width:100%;}}@keyframessslideout{0%{top:0;} 50 %{top:30px;}100 %{top:60px;}}/*Apply*/p{animation-name:slidein;animation-duration:4s;}div{animation-name:slideout;animation-duration:4s ;}(6)@document
@document wird verwendet, um den Umfang der Stile im Dokument basierend auf der URL des Dokuments einzuschränken. Dieses Attribut kann verwendet werden, um exklusive Stile für bestimmte Benutzer zu definieren. Derzeit befindet sich @document noch im experimentellen Stadium und die spezifischen Standards werden in CSS4 festgelegt.
Die verfügbaren Funktionen in @document sind wie folgt:
●url(): entspricht der gesamten URL;
●url-prefix(): Ob die URL des übereinstimmenden Dokuments mit dem durch den Parameter angegebenen Wert beginnt;
●domain(): Ob der Domänenname des übereinstimmenden Dokuments der im Parameter angegebene Domänenname oder sein Unterdomänenname ist;
●regexp(): Ob die URL des übereinstimmenden Dokuments mit dem im Parameter angegebenen regulären Ausdruck übereinstimmt. Der Ausdruck muss mit der gesamten URL übereinstimmen.
Tipp: Für die Funktionen url(), url-prefix() und domain() bereitgestellte Parameter können ohne Anführungszeichen eingeschlossen werden, für die Funktion regexp() bereitgestellte Parameter müssen jedoch in Anführungszeichen eingeschlossen werden.
Das folgende Beispiel demonstriert die Verwendung von @document:
@documenturl(http://www.weixueyuan.net/),url-prefix(http://www.weixueyuan.net/Style/),domain(weixueyuan.net),regexp(https:.*){/* Diese CSS-Regel wird auf die folgenden Webseiten angewendet: + Die Seite, deren URL http://www.weixueyuan.net/ ist. + Jede Webseite, deren URL mit http://www.weixueyuan.net/Style/ beginnt Der Domainname weixueyuan. Alle Webseiten unter net + alle Webseiten, deren URL mit https:*//*define style*/body{color:purple;background:yellow;} beginnt