Detailed introduction to css attribute value syntax-CSS Tutorial-php.cn

<div></div> <p>The World Wide Web Consortium (W3C) uses a special syntax to define CSS property values, so that all CSS properties can be used. If you've ever looked at the CSS specification, you've probably seen this syntax. Just like the syntax of </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;">border-image-slice</pre><div class="contentsignin">Copy after login</div></div><p> , let’s take a look: <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"><'border-image-slice'> = [<number> | <percentage>]{1,4} && fill?</pre><div class="contentsignin">Copy after login</div></div><p> This syntax can be very difficult to understand if you don’t know the symbols and how they work. However, it's worth taking the time to learn. If you understand how the W3C defines these property values, you can understand any of the W3C CSS specifications. <br/><br/><img src="https://img.php.cn/upload/article/000/000/194/4b2e0cb3ffe4e9d2c7616cbfbd8d0a35-0.jpg"/ alt="Detailed introduction to css attribute value syntax" ><br/><br/></p><h2>Backus-Naur Form</h2><p>First, let’s look at the Backus-Naur Form because this can help us Understand W3C attribute value syntax. <br/><br/>Backus–Naur Form (BNF) is a formal set of symbols used to describe the syntax of computer languages. It is designed to be clear so there is no ambiguity or ambiguity in how the language is expressed. <br/><br/>The original Backus-Naur symbol set has many extensions and variants in use today, including Extended Backus Normal Form (EBNF) and Extended Backus Normal Form (ABNF).<br/><br/>A BNF specification It is a set of rules written in the following form: <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"><symbol> ::= __expression__</pre><div class="contentsignin">Copy after login</div></div><p> The left side of the formula is usually a non-terminal character, followed by a <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;">::=</pre><div class="contentsignin">Copy after login</div></div><p> symbol, which represents "can be Replace with". The right side of the formula </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">__expression__</pre><div class="contentsignin">Copy after login</div></div><p> consists of one or more symbol sequences, which are used to deduce the meaning of the symbol on the left. <br/><br/>The BNF specification basically says, "No matter what the expression on the left is, and no matter what the expression on the right is, the expression on the left can be replaced by the expression on the right." <br/><br/></p><h2>Nonterminal symbols and terminal symbols</h2><p>Nonterminal symbols refer to symbols that can be replaced or decomposed later. In BNF, nonterminal characters are usually enclosed in angle brackets, </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><</pre><div class="contentsignin">Copy after login</div></div><p> and </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">></pre><div class="contentsignin">Copy after login</div></div><p>. In the example below, </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><integet></pre><div class="contentsignin">Copy after login</div></div><p> and </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><digit></pre><div class="contentsignin">Copy after login</div></div><p> are non-terminal characters. <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"><integer> ::= <digit> | <digit><integer></pre><div class="contentsignin">Copy after login</div></div><p>The terminator indicates that the value cannot be replaced or decomposed. In the following example, all values are terminators. <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"><digit> ::= 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9</pre><div class="contentsignin">Copy after login</div></div><h2>CSS Property Value Syntax</h2><p>Although the W3C CSS property value syntax is based on BNF concepts, they have some differences. Like BNF, it starts with a non-terminal character. Unlike BNF, it also describes symbols used as "component values" in expressions. <br/><br/> In the example below, </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><line-width></pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> is a non-terminal character, while </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><length></pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p>, </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">thin</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p>, </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">medium</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> and </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">thick</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> is the ingredient value. <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"><line-width> = <length> | thin | medium | thick</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><h2>Component value</h2><p>There are four component values: keyword, basic data type, attribute data type and non-data data type. <br/></p><h3>1. Keyword values</h3><p>Keyword values are not surrounded by quotation marks or angle brackets. They can be used directly as attribute values. Because they can no longer be replaced or decomposed, they are terminators. In the example below, </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">thin</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p>, </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">medium</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> and </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">thick</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> are all keyword values. This means they are used directly in CSS. <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"><line-width> = <length> | thin | medium | thick</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><h3>2. Basic data types </h3><p>Basic data types define some core values, such as </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><length></pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> and </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><color></pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p>. They are non-terminal because they can be replaced with real length or color values. In the following example </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><color></pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> is the basic data type. <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"><'background-color'> = <color></pre><div class="contentsignin">Copy after login</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><color></pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> can be replaced with the actual color in our CSS through keywords, extended keywords, RGB, RGBA, HSL, HSLA, or </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">transparent</pre><div class="contentsignin">Copy after login</div></div><p> keywords value. <br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div><h3>3. Attribute data type </h3><p>The attribute data type defines the actual name of the attribute, which is a non-terminal character. It is defined by a property name enclosed in angle brackets (including quotes). In the example below, </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><'border-width'></pre><div class="contentsignin">Copy after login</div></div><p> is the attribute data type. <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"><'border-width'> = <line-width>{1,4}</pre><div class="contentsignin">Copy after login</div></div><p>Property data types can appear directly as properties in our CSS files. In the example below, the <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">border-width</pre><div class="contentsignin">Copy after login</div></div><p> attribute defines a 2px border for the </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">.exmplate</pre><div class="contentsignin">Copy after login</div></div><p> class. <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.example { border-width: 2px; }</pre><div class="contentsignin">Copy after login</div></div><h3>4. Non-attribute data types</h3><p>Non-attribute data types do not share the same name as attributes and are non-terminators. However, it defines some aspects of a certain attribute(s). For example, </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><line-width></pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> is not a property, but it is a data type that defines various </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><border></pre><div class="contentsignin">Copy after login</div></div><p>. <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"><line-width> = <length> | thin | medium | thick <'border-width'> = <line-width>{1,4}</pre><div class="contentsignin">Copy after login</div></div><h2>Component value combiner (Combinator) </h2><p>Component values can be assigned to attribute value combiners using the following five methods: <br/></p><h3> 1. Adjacent Values </h3><p> component values are written one after another meaning that all these values must appear in the given order. In the example below, the syntax lists three different values: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">value1</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p>, </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">value2</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> and </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">value3</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p>. In CSS rules, these three values must appear in the correct order to be legal. <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">/* Component arrangement: all in given order */ <'property'> = value1 value2 value3 /* Example */ .example { property: value1 value2 value3; }</pre><div class="contentsignin">Copy after login</div></div><h3>2. Double ampersand (&)</h3><p>Double ampersand (&) that separates two or more component values<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">&&</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p>）意味着，这些值必须出现，顺序任意。在下面的例子中，语法列出了两个值，由双与符号分开。下面的 CSS 规则说明了这两个值都得出现但可能是不同的顺序。<br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div><h3>3. 单管道符号</h3><p>分开两个或更多成分值的单管道符号（</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">|</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p>）意味着，这些值中只需一个值出现。在下面的例子中，语法列出了三个值，由单管道符号分开。在下面的 CSS 规则中展示了三个可能选项：<br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div><h3>4. 双管道符号</h3><p>分开两个或更多选择的双管道符号（</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">||</pre><div class="contentsignin">Copy after login</div></div><p>）意味着，这些值中一个或多个值必须出现，顺序任意。在下面的例子中，语法列出了三个值，由双管道符号分开。在你写 CSS 规则来匹配这个语法时，有大量可选的选择　——　你可以使用一个，两个或三个值，以任意顺序。<br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div><h3>5. 中括号</h3><p>包住了两个或更多选择的中括号（</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">[ ]</pre><div class="contentsignin">Copy after login</div></div><p>）意味着其中的成分值属于一个单独的组。在下面的例子中，语法列出了三个值，但其中两个在中括号中，所以它们属于一个组。所以在 CSS 规则中有两种选择：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">value1</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 与 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">value3</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 或 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">value2</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 与 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">value3</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div><h2>成分值累乘器（Multipliers）</h2><p>使用下列 8 个方法之一，成分值也可被重用：<br/></p><h3>1. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">?</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div></h3><p>问号（</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">?</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p>）表明其之前的类型，关键字或者组，是可选的且出现零次或一次。在下面的例子中，第二个成分值与一个逗号一起放在了中括号里。放置其后的问号意味着，</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">value1</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 必须出现，但我们也可使用 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">value1</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 和 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">value2</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p>，以逗号分隔。<br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">/* Component multiplier: zero or one time */ <'property'> = value1 [, value2 ]? /* Examples */ .example { property: value1; } .example { property: value1, value2; }</pre><div class="contentsignin">Copy after login</div></div><h3>2. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">*</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div></h3><p>星号（</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">*</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p>）表明其之前的类型，关键字或者组出现零次或更多次。在下面的例子中，第二个成分值与一个逗号一起放在了中括号里。放置其后的星号意味着，</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">value1</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 必须出现，但我们也能随我们想地使用 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">value2</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 任意次，每个成分值以逗号分隔。<br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div><h3>3. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">+</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div></h3><p>加号（</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">+</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p>）表明其之前的类型，关键字或者组出现一次或更多次。在下面的例子中，放置于成分值之后的加号意味着该值必须被使用超过一次 —— 无需逗号。<br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div><h3>4. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">{A}</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div></h3><p>大括号（</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">{A}</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p>）中包含一个数字表明其之前的类型，关键字或者组出现 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">A</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 次。在下面的例子中，value 的两个实例都必须根据出现才合法。<br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">/* Component multiplier: occurs A times */ <'property'> = <value>{2} /* Examples */ .example { property: <value> <value> ; }</pre><div class="contentsignin">Copy after login</div></div><h3>5. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">{A,B}</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div></h3><p>大括号（</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">{A,B}</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p>）中包含由逗号分开的两个数字表明其之前的类型，关键字或者组出现至少 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">A</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 次，至少 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">B</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 次。在下面的例子中，最少一个、最多三个值肯能被用来定义该属性。这些成分值不以逗号分离。<br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div><h3>6. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">{A,}</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div></h3><p>在 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">{A,}</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 中 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">B</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 被省去了，这意味着至少有 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">A</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 次重复，而没有上限。在下面的例子中，至少需要使用一个成分值，但也可以额外使用任意数量的成分值值。这些成分值不以逗号分离。<br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div><h3>7. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">#</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div></h3><p>井号（</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">#</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p>）表明其之前的类型，关键字或者组出现一次或多次。在下面的例子中，一个或多个成分值可能被使用，这些成分值以逗号分离。<br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div><h3>8. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">!</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div></h3><p>一个组后的感叹号（</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">!</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p>）意味着该组是必须的且产生至少一个值。在下面的例子中，</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">value1</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 是必须的，以及一个来自与由 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">value2</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 与 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">value3</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 组成的组的值。该属性只有两个属性值；它们是，</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">value1</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p>与 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">value2</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 或 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">value1</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 与 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">value3</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p>。<br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div><h2>一个例子：<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><'text-shadow'></pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> 语法</h2><p>让我们把 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><'text-shadow'></pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 当作例子观察一番。这是它在规范里的定义：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"><'text-shadow'> = none | [ <length>{2,3} && <color>? ]#</pre><div class="contentsignin">Copy after login</div></div><p>我们可以拆分这些符号：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">|</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 表明我们可以使用关键字 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">none</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 或者一个组<br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">#</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 表明我们可以使用这个组一次或多次，以逗号分割<br/><br/>在组中，</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">{2,3}</pre><div class="contentsignin">Copy after login</div></div><p> 表明我们可以使用 2 或 3 个长度值<br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">&&</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 意味着我们必须包括所有值，但顺序可以任意<br/><br/>有点棘手的是，</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><color></pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> 后有一个 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">?</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p> ，这意味着其可能出现零次或一次。<br/><br/>用简单的话讲，这也可以被写成：<br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">指明了 none 或一个或多个由逗号分离的组，其中包含了二到三个长度值与一个可选的颜色值。长度值与可选的颜色值可以以任意顺序编写。</pre><div class="contentsignin">Copy after login</div></div><p><br/>这意味着我们能够以很多不同的方式来写 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">text-shadow</pre><div class="contentsignin">Copy after login</div></div><p> 属性的值。例如，可以设置其为 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">none</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><p>:<br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.example { text-shadow: none; }</pre><div class="contentsignin">Copy after login</div></div><p>我们也可以只写两个长度值，这意味着我们将设置阴影水平与竖直方向的便宜，但不会有模糊半径或者颜色值。<br/><br/>因为没有定义模糊半径，将会使用初始值 <br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">0</pre><div class="contentsignin">Copy after login</div></div><p>；所以，该阴影的边缘会很锋利。由于没有定义颜色，所以阴影将使用文本的颜色。<br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.example { text-shadow: 10px 10px; }</pre><div class="contentsignin">Copy after login</div></div><p>如果我们使用了三个长度值，我们将会同时定义阴影的水平与竖直方向的偏移和模糊半径。<br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.example { text-shadow: 10px 10px 10px; }</pre><div class="contentsignin">Copy after login</div></div><p>我们也可以加入颜色，且颜色可以出现在 2 或 3 个长度值的前面或后面。在下面的例子中，red 值可以放在任一长度值的后面。<br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.example { text-shadow: 10px 10px 10px red; } .example { text-shadow: red 10px 10px 10px; }</pre><div class="contentsignin">Copy after login</div></div><p>最后，我们也能包含多个文本阴影，写作以逗号分隔的组。阴影效果将从前至后分层应用：第一个阴影在最顶层，其它的层在其后。阴影不能覆盖在文本上。在下面的例子中，红色阴影将在绿***阴影的顶上。<br/><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.example { text-shadow: 10px 10px red, -20px -20px 5px lime; }</pre><div class="contentsignin">Copy after login</div></div><h2>结论</h2> <p>如果你以写 CSS 为生，了解如何正确地写合法的 CSS 属性值很重要。一旦你了解了不同的值是如何被组合或累乘的，CSS 属性值语法就变得非常容易理解了。然后看 CSS 的规范与写合法的 CSS 都会变得更容易了。<br></p> <div></div>

The above is the detailed content of Detailed introduction to css attribute value syntax. For more information, please follow other related articles on the PHP Chinese website!