Detaillierte Einführung in die Syntax von CSS-Attributwerten

<div></div> <p>Das World Wide Web Consortium (W3C) verwendet eine spezielle Syntax zur Definition von CSS-Eigenschaftswerten, sodass alle CSS-Eigenschaften verwendet werden können. Wenn Sie sich jemals die CSS-Spezifikation angesehen haben, ist Ihnen diese Syntax wahrscheinlich schon aufgefallen. Schauen wir uns genau wie die Syntax für </p><pre class="brush:css;toolbar:false;">border-image-slice</pre><p> an: <br></p><pre class="brush:css;toolbar:false"><&#39;border-image-slice&#39;> = [<number> | <percentage>]{1,4} && fill?</pre><p> Diese Syntax kann sehr schwer zu verstehen sein, wenn Sie die Symbole und ihre Funktionsweise nicht kennen arbeiten. . Es lohnt sich jedoch, sich die Zeit zum Lernen zu nehmen. Wenn Sie verstehen, wie das W3C diese Eigenschaftswerte definiert, können Sie alle W3C-CSS-Spezifikationen verstehen. <br><br><img src="https://img.php.cn/upload/article/000/000/194/4b2e0cb3ffe4e9d2c7616cbfbd8d0a35-0.jpg" alt="Detaillierte Einführung in die Syntax von CSS-Attributwerten" ><br><br></p> <h2>Backussche Form </h2> <p>Schauen wir uns zunächst die Backus-Naur-Form an, denn diese kann uns helfen, die W3C-Attributwertsyntax zu verstehen . <br><br>Backus-Naur-Form (BNF) ist ein formaler Satz von Symbolen, der zur Beschreibung der Syntax von Computersprachen verwendet wird. Es ist so gestaltet, dass es klar ist, sodass es keine Mehrdeutigkeit oder Mehrdeutigkeit in der Art und Weise gibt, wie die Sprache ausgedrückt wird. <br><br>Der ursprüngliche Backus-Naur-Notationssatz weist heute viele Erweiterungen und Varianten auf, darunter die Erweiterte Backus-Normalform (EBNF) und die Erweiterte Backus-Normalform (ABNF).<br><br>Eine BNF-Spezifikation eine Reihe von Regeln, die in der folgenden Form geschrieben sind: <br></p><pre class="brush:css;toolbar:false"><symbol> ::= __expression__</pre><p>Die linke Seite der Formel ist normalerweise ein nichtterminales Zeichen, gefolgt von einem <br></p><pre class="brush:css;toolbar:false;">::=</pre><p> Symbol, das „ersetzbar durch“ bedeutet. Die rechte Seite der Formel </p><pre class="brush:plain;">__expression__</pre><p> besteht aus einer oder mehreren Symbolsequenzen, aus denen die Bedeutung des Symbols auf der linken Seite abgeleitet wird. <br><br>In der BNF-Spezifikation heißt es grundsätzlich: „Egal, was der Ausdruck auf der linken Seite ist und egal, was der Ausdruck auf der rechten Seite ist, der Ausdruck auf der linken Seite kann durch den Ausdruck auf der rechten Seite ersetzt werden.“ <br><br></p> <h2>Nichtterminale Symbole und Terminalsymbole </h2> <p>Nichtterminale Symbole beziehen sich auf Symbole, die später ersetzt oder zerlegt werden können. In BNF werden nichtterminale Zeichen normalerweise in spitze Klammern eingeschlossen, </p><pre class="brush:plain;"><</pre><p> und </p><pre class="brush:plain;">></pre><p>. Im folgenden Beispiel sind </p><pre class="brush:plain;"><integet></pre><p> und </p><pre class="brush:plain;"><digit></pre><p> nichtterminale Zeichen. Das Abschlusszeichen <br></p><pre class="brush:css;toolbar:false"><integer> ::= <digit> | <digit><integer></pre><p> gibt an, dass der Wert nicht ersetzt oder zerlegt werden kann. Im folgenden Beispiel sind alle Werte Terminatoren. <br></p><pre class="brush:css;toolbar:false"><digit> ::= 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9</pre><h2>CSS-Eigenschaftswertsyntax</h2> <p>Obwohl die W3C-CSS-Eigenschaftswertsyntax auf BNF-Konzepten basiert, weisen sie einige Unterschiede auf. Wie BNF beginnt es mit einem nichtterminalen Zeichen. Im Gegensatz zu BNF beschreibt es auch Symbole, die als „Komponentenwerte“ in Ausdrücken verwendet werden. <br><br> Im folgenden Beispiel ist </p><pre class="brush:plain;"><line-width></pre><p> ein nichtterminales Zeichen, während </p><pre class="brush:plain;"><length></pre><p>, </p><pre class="brush:plain;">thin</pre><p>, </p><pre class="brush:plain;">medium</pre><p> und </p><pre class="brush:plain;">thick</pre><p> sind Komponentenwerte. <br></p><pre class="brush:css;toolbar:false"><line-width> = <length> | thin | medium | thick</pre><h2>Komponentenwert </h2> <p>Es gibt vier Komponentenwerte: Schlüsselwort, Basisdatentyp, Attributdatentyp und Nichtdatendatentyp. <br></p> <h3>1. Schlüsselwortwerte </h3> <p>Schlüsselwortwerte werden nicht in Anführungszeichen oder spitze Klammern gesetzt. Sie können direkt als Attributwerte verwendet werden. Da sie nicht mehr ersetzt oder zersetzt werden können, sind sie Terminatoren. Im Beispiel unten sind </p><pre class="brush:plain;">thin</pre><p>, </p><pre class="brush:plain;">medium</pre><p> und </p><pre class="brush:plain;">thick</pre><p> allesamt Schlüsselwortwerte. Dies bedeutet, dass sie direkt in CSS verwendet werden. <br></p><pre class="brush:css;toolbar:false"><line-width> = <length> | thin | medium | thick</pre><h3>2. Grundlegende Datentypen </h3> <p>Grundlegende Datentypen definieren einige Kernwerte, wie z. B. </p><pre class="brush:plain;"><length></pre><p> und </p><pre class="brush:plain;"><color></pre><p>. Sie sind nicht terminal, da sie durch echte Längen- oder Farbwerte ersetzt werden können. Im folgenden Beispiel ist </p><pre class="brush:plain;"><color></pre><p> der grundlegende Datentyp. <br></p><pre class="brush:css;toolbar:false"><'background-color'> = <color></pre><pre class="brush:plain;"><color></pre><p> kann in unserem CSS durch Schlüsselwörter, erweiterte Schlüsselwörter, RGB, RGBA, HSL, HSLA oder </p><pre class="brush:plain;">transparent</pre><p> Schlüsselwörter verwendet werden, wird durch ersetzt der tatsächliche Farbwert. <br><br></p><pre class="brush:css;toolbar:false">.example { background-color: red; } .example { background-color: honeydew; } .example { background-color: rgb(50%,50%,50%); } .example { background-color: rgba(100%,100%,100%,.5); } .example { background-color: hsl(280,100%,50%); } .example { background-color: hsla(280,100%,50%,0.5); } .example { background-color: transparent; }</pre><h3>3. Attributdatentyp </h3> <p>Der Attributdatentyp definiert den tatsächlichen Namen des Attributs, bei dem es sich um ein nicht terminales Zeichen handelt. Es wird durch einen Eigenschaftsnamen definiert, der in spitzen Klammern (einschließlich Anführungszeichen) eingeschlossen ist. Im folgenden Beispiel ist </p><pre class="brush:plain;"><'border-width'></pre><p> der Attributdatentyp. <br></p><pre class="brush:css;toolbar:false"><'border-width'> = <line-width>{1,4}</pre><p>Eigenschaftsdatentypen können direkt als Eigenschaften in unseren CSS-Dateien angezeigt werden. Im folgenden Beispiel definiert das Attribut <br></p><pre class="brush:plain;">border-width</pre><p> einen 2-Pixel-Rahmen für die Klasse </p><pre class="brush:plain;">.exmplate</pre><p>. <br></p><pre class="brush:css;toolbar:false">.example { border-width: 2px; }</pre><h3>4. Nicht-Attribut-Datentypen </h3> <p>Nicht-Attribut-Datentypen haben nicht denselben Namen wie Attribute und sind keine Terminatoren. Es definiert jedoch einige Aspekte eines bestimmten Attributs bzw. bestimmter Attribute. Beispielsweise ist </p><pre class="brush:plain;"><line-width></pre><p> keine Eigenschaft, sondern ein Datentyp, der verschiedene </p><pre class="brush:plain;"><border></pre><p> definiert. <br></p><pre class="brush:css;toolbar:false"><line-width> = <length> | thin | medium | thick <'border-width'> = <line-width>{1,4}</pre><h2>Kombinator </h2> <p>Komponentenwerte können Attributwertkombinatoren mithilfe der folgenden fünf Methoden zugewiesen werden: <br></p> <h3>1 ​</h3> <p>Nacheinander geschriebene Komponentenwerte bedeuten, dass alle diese Werte in der angegebenen Reihenfolge erscheinen müssen. Im folgenden Beispiel listet die Syntax drei verschiedene Werte auf: </p><pre class="brush:plain;">value1</pre><p>, </p><pre class="brush:plain;">value2</pre><p> und </p><pre class="brush:plain;">value3</pre><p>. In CSS-Regeln müssen diese drei Werte in der richtigen Reihenfolge erscheinen, um zulässig zu sein. <br></p><pre class="brush:css;toolbar:false">/* Component arrangement: all in given order */ <'property'> = value1 value2 value3 /* Example */ .example { property: value1 value2 value3; }</pre><h3>2. Doppeltes kaufmännisches Und (&) </h3> <p>Doppeltes kaufmännisches Und (&), das zwei oder mehr Komponentenwerte trennt (</p><pre class="brush:plain;">&&</pre><p>）意味着，这些值必须出现，顺序任意。在下面的例子中，语法列出了两个值，由双与符号分开。下面的 CSS 规则说明了这两个值都得出现但可能是不同的顺序。<br><br></p><pre class="brush:css;toolbar:false">/* Component arrangement: all, in any order */ <'property'> = value1 && value2 /* Examples */ .example { property: value1 value2; } .example { property: value2 value1; }</pre><h3>3. 单管道符号</h3> <p>分开两个或更多成分值的单管道符号（</p><pre class="brush:plain;">|</pre><p>）意味着，这些值中只需一个值出现。在下面的例子中，语法列出了三个值，由单管道符号分开。在下面的 CSS 规则中展示了三个可能选项：<br><br></p><pre class="brush:css;toolbar:false">/* Component arrangement: one of them must occur */ <'property'> = value1 | value2 | value3 /* Examples */ .example { property: value1; } .example { property: value2; } .example { property: value3; }</pre><h3>4. 双管道符号</h3> <p>分开两个或更多选择的双管道符号（</p><pre class="brush:plain;">||</pre><p>）意味着，这些值中一个或多个值必须出现，顺序任意。在下面的例子中，语法列出了三个值，由双管道符号分开。在你写 CSS 规则来匹配这个语法时，有大量可选的选择　——　你可以使用一个，两个或三个值，以任意顺序。<br><br></p><pre class="brush:css;toolbar:false">/* Component arrangement: one or more in any order */ <'property'> = value1 || value2 || value3 /* Examples */ .example { property: value1; } .example { property: value2; } .example { property: value3; } .example { property: value1 value2; } .example { property: value1 value2 value3; } ...etc</pre><h3>5. 中括号</h3> <p>包住了两个或更多选择的中括号（</p><pre class="brush:plain;">[ ]</pre><p>）意味着其中的成分值属于一个单独的组。在下面的例子中，语法列出了三个值，但其中两个在中括号中，所以它们属于一个组。所以在 CSS 规则中有两种选择：</p><pre class="brush:plain;">value1</pre><p> 与 </p><pre class="brush:plain;">value3</pre><p> 或 </p><pre class="brush:plain;">value2</pre><p> 与 </p><pre class="brush:plain;">value3</pre><pre class="brush:css;toolbar:false">/* Component arrangement: a single grouping */ <'property'> = [ value1 | value2 ] value3 /* Examples */ .example { property: value1 value3; } .example { property: value2 value3; }</pre><h2>成分值累乘器（Multipliers）</h2> <p>使用下列 8 个方法之一，成分值也可被重用：<br></p> <h3>1. <pre class="brush:plain;">?</pre></h3> <p>问号（</p><pre class="brush:plain;">?</pre><p>）表明其之前的类型，关键字或者组，是可选的且出现零次或一次。在下面的例子中，第二个成分值与一个逗号一起放在了中括号里。放置其后的问号意味着，</p><pre class="brush:plain;">value1</pre><p> 必须出现，但我们也可使用 </p><pre class="brush:plain;">value1</pre><p> 和 </p><pre class="brush:plain;">value2</pre><p>，以逗号分隔。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: zero or one time */ <'property'> = value1 [, value2 ]? /* Examples */ .example { property: value1; } .example { property: value1, value2; }</pre><h3>2. <pre class="brush:plain;">*</pre></h3> <p>星号（</p><pre class="brush:plain;">*</pre><p>）表明其之前的类型，关键字或者组出现零次或更多次。在下面的例子中，第二个成分值与一个逗号一起放在了中括号里。放置其后的星号意味着，</p><pre class="brush:plain;">value1</pre><p> 必须出现，但我们也能随我们想地使用 </p><pre class="brush:plain;">value2</pre><p> 任意次，每个成分值以逗号分隔。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: zero or more times */ <'property'> = value1 [, <value2> ]* /* Examples */ .example { property: value1; } .example { property: value1, <value2>; } .example { property: value1, <value2>, <value2>; } .example { property: value1, <value2>, <value2>, <value2>; } ...etc</pre><h3>3. <pre class="brush:plain;">+</pre></h3> <p>加号（</p><pre class="brush:plain;">+</pre><p>）表明其之前的类型，关键字或者组出现一次或更多次。在下面的例子中，放置于成分值之后的加号意味着该值必须被使用超过一次 —— 无需逗号。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: one or more times */ <'property'> = <value>+ /* Examples */ .example { property: <value>; } .example { property: <value> <value>; } .example { property: <value> <value> <value>; } ...etc</pre><h3>4. <pre class="brush:plain;">{A}</pre></h3> <p>大括号（</p><pre class="brush:plain;">{A}</pre><p>）中包含一个数字表明其之前的类型，关键字或者组出现 </p><pre class="brush:plain;">A</pre><p> 次。在下面的例子中，value 的两个实例都必须根据出现才合法。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: occurs A times */ <'property'> = <value>{2} /* Examples */ .example { property: <value> <value> ; }</pre><h3>5. <pre class="brush:plain;">{A,B}</pre></h3> <p>大括号（</p><pre class="brush:plain;">{A,B}</pre><p>）中包含由逗号分开的两个数字表明其之前的类型，关键字或者组出现至少 </p><pre class="brush:plain;">A</pre><p> 次，至少 </p><pre class="brush:plain;">B</pre><p> 次。在下面的例子中，最少一个、最多三个值肯能被用来定义该属性。这些成分值不以逗号分离。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: at least A and at most B */ <'property'> = <value>{1,3} /* Examples */ .example { property: <value>; } .example { property: <value> <value>; } .example { property: <value> <value> <value>; }</pre><h3>6. <pre class="brush:plain;">{A,}</pre></h3> <p>在 </p><pre class="brush:plain;">{A,}</pre><p> 中 </p><pre class="brush:plain;">B</pre><p> 被省去了，这意味着至少有 </p><pre class="brush:plain;">A</pre><p> 次重复，而没有上限。在下面的例子中，至少需要使用一个成分值，但也可以额外使用任意数量的成分值值。这些成分值不以逗号分离。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: at least A, with no upper limit */ <'property'> = <value>{1,} /* Examples */ .example { property: <value>; } .example { property: <value> <value>; } .example { property: <value> <value> <value> ; } ...etc</pre><h3>7. <pre class="brush:plain;">#</pre></h3> <p>井号（</p><pre class="brush:plain;">#</pre><p>）表明其之前的类型，关键字或者组出现一次或多次。在下面的例子中，一个或多个成分值可能被使用，这些成分值以逗号分离。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: one or more, separated by commas */ <'property'> = <value># /* Examples */ .example { property: <value>; } .example { property: <value>, <value>; } .example { property: <value>, <value>, <value>; } ...etc</pre><h3>8. <pre class="brush:plain;">!</pre></h3> <p>一个组后的感叹号（</p><pre class="brush:plain;">!</pre><p>）意味着该组是必须的且产生至少一个值。在下面的例子中，</p><pre class="brush:plain;">value1</pre><p> 是必须的，以及一个来自与由 </p><pre class="brush:plain;">value2</pre><p> 与 </p><pre class="brush:plain;">value3</pre><p> 组成的组的值。该属性只有两个属性值；它们是，</p><pre class="brush:plain;">value1</pre><p>与 </p><pre class="brush:plain;">value2</pre><p> 或 </p><pre class="brush:plain;">value1</pre><p> 与 </p><pre class="brush:plain;">value3</pre><p>。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: required group, at least one value */ <'property'> = value1 [ value2 | value3 ]! /* Examples */ .example { property: value1 value2; } .example { property: value1 value3; }</pre><h2>一个例子：<pre class="brush:plain;"><'text-shadow'></pre> 语法</h2> <p>让我们把 </p><pre class="brush:plain;"><'text-shadow'></pre><p> 当作例子观察一番。这是它在规范里的定义：<br></p><pre class="brush:css;toolbar:false"><'text-shadow'> = none | [ <length>{2,3} && <color>? ]#</pre><p>我们可以拆分这些符号：<br></p><pre class="brush:plain;">|</pre><p> 表明我们可以使用关键字 </p><pre class="brush:plain;">none</pre><p> 或者一个组<br><br></p><pre class="brush:plain;">#</pre><p> 表明我们可以使用这个组一次或多次，以逗号分割<br><br>在组中，</p><pre class="brush:plain;">{2,3}</pre><p> 表明我们可以使用 2 或 3 个长度值<br><br></p><pre class="brush:plain;">&&</pre><p> 意味着我们必须包括所有值，但顺序可以任意<br><br>有点棘手的是，</p><pre class="brush:plain;"><color></pre><p> 后有一个 </p><pre class="brush:plain;">?</pre><p> ，这意味着其可能出现零次或一次。<br><br>用简单的话讲，这也可以被写成：<br><br></p> <pre class="brush:php;toolbar:false">指明了 none 或 一个或多个由逗号分离的组，其中包含了二到三个长度值与一个可选的颜色值。长度值与可选的颜色值可以以任意顺序编写。</pre> <p><br>这意味着我们能够以很多不同的方式来写 </p><pre class="brush:plain;">text-shadow</pre><p> 属性的值。例如，可以设置其为 </p><pre class="brush:plain;">none</pre><p>:<br><br></p><pre class="brush:css;toolbar:false">.example { text-shadow: none; }</pre><p>我们也可以只写两个长度值，这意味着我们将设置阴影水平与竖直方向的便宜，但不会有模糊半径或者颜色值。<br><br>因为没有定义模糊半径，将会使用初始值 <br></p><pre class="brush:plain;">0</pre><p>；所以，该阴影的边缘会很锋利。由于没有定义颜色，所以阴影将使用文本的颜色。<br><br></p><pre class="brush:css;toolbar:false">.example { text-shadow: 10px 10px; }</pre><p>如果我们使用了三个长度值，我们将会同时定义阴影的水平与竖直方向的偏移和模糊半径。<br><br></p><pre class="brush:css;toolbar:false">.example { text-shadow: 10px 10px 10px; }</pre><p>我们也可以加入颜色，且颜色可以出现在 2 或 3 个长度值的前面或后面。在下面的例子中，red 值可以放在任一长度值的后面。<br><br></p><pre class="brush:css;toolbar:false">.example { text-shadow: 10px 10px 10px red; } .example { text-shadow: red 10px 10px 10px; }</pre><p>最后，我们也能包含多个文本阴影，写作以逗号分隔的组。阴影效果将从前至后分层应用：第一个阴影在最顶层，其它的层在其后。阴影不能覆盖在文本上。在下面的例子中，红色阴影将在绿***阴影的顶上。<br><br></p><pre class="brush:css;toolbar:false">.example { text-shadow: 10px 10px red, -20px -20px 5px lime; }</pre><h2>结论</h2> <p>如果你以写 CSS 为生，了解如何正确地写合法的 CSS 属性值很重要。一旦你了解了不同的值是如何被组合或累乘的，CSS 属性值语法就变得非常容易理解了。然后看 CSS 的规范与写合法的 CSS 都会变得更容易了。<br></p> <div></div> <!--<p class='doc-content-pic doc-pic'><img src="https://img.php.cn/upload/article/000/000/194/2dc0b7317ecd295de8469d48c5768c41-1.jpg" / alt="Detaillierte Einführung in die Syntax von CSS-Attributwerten" > </p>-->

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Syntax von CSS-Attributwerten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!