Explication détaillée de l'utilisation de la valeur de la propriété CSS-tutoriel CSS-php.cn

<p>Le World Wide Web Consortium (<a href="//m.sbmmt.com/wiki/1550.html" target="_blank">W3C</a>) utilise une syntaxe spéciale pour définir la valeur de la <a href="//m.sbmmt.com/wiki/169.html" target="_blank">propriété</a> de CSS, qui peut être utilisée par toutes les propriétés CSS. Si vous avez déjà consulté la spécification CSS, vous avez probablement vu cette syntaxe. Tout comme la syntaxe de </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">border-image-slice</pre><div class="contentsignin">Copier après la connexion</div></div><p> , voyons : <br/><br/><'border-image-slice'> = [<number> 4} && fill ?<br/>Cette syntaxe peut être très difficile à comprendre si vous ne connaissez pas les symboles et leur fonctionnement. Cependant, cela vaut la peine de prendre le temps d'apprendre. Si vous comprenez comment le W3C définit ces valeurs de propriété, vous pouvez comprendre n'importe quelle spécification CSS du W3C. <br/><br/><img src="https://img.php.cn/upload/article/000/000/007/4677425410cd1e76461f7bcdcbdbfb20-0.jpg"/ alt="Explication détaillée de l'utilisation de la valeur de la propriété CSS" ><br/><br/></p><h2>Paradigme backusien </h2><p>Regardons d'abord Backus-Naur <a href="//m.sbmmt.com/wiki/125.html" target="_blank">Pour</a>m ), car cela aide nous comprenons la syntaxe des valeurs d'attribut du W3C. <br/><br/>La forme Backus-Naur (BNF) est un ensemble formel de symboles utilisés pour décrire la syntaxe des langages informatiques. Il est conçu pour être clair afin qu'il n'y ait aucune ambiguïté ni ambiguïté dans la façon dont le langage est exprimé. <br/><br/>L'ensemble de notation Backus-Naur original comporte de nombreuses extensions et variantes utilisées aujourd'hui, notamment la forme normale de Backus étendue (EBNF) et la forme normale de Backus étendue (ABNF).<br/><br/>Une spécification BNF. un ensemble de règles écrites sous la forme suivante : <br/><br/><symbol> ::= expression<br/>Le côté gauche de l'expression est généralement un caractère non terminal, suivi d'un </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">::=</pre><div class="contentsignin">Copier après la connexion</div></div> <p> symbole , qui signifie "peut être remplacé par". Le côté droit de la formule </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">expression</pre><div class="contentsignin">Copier après la connexion</div></div><p> est constitué d'une ou plusieurs séquences de symboles, qui sont utilisées pour déduire la signification du symbole de gauche. </p><p>La spécification BNF dit essentiellement : « Quelle que soit l'expression de gauche, et quelle qu'en soit l'expression de droite, l'expression de gauche peut être remplacée par l'expression de droite. <br/></p><h2>Symboles non terminaux et symboles terminaux </h2><p>Les symboles non terminaux font référence à des symboles qui peuvent être remplacés ou décomposés ultérieurement. Dans BNF, les caractères non terminaux sont généralement placés entre crochets, </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><</pre><div class="contentsignin">Copier après la connexion</div></div><p> et </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">></pre><div class="contentsignin">Copier après la connexion</div></div><p>. Dans l'exemple ci-dessous, </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><integet></pre><div class="contentsignin">Copier après la connexion</div></div><p> et </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><digit></pre><div class="contentsignin">Copier après la connexion</div></div><p> sont des caractères non terminaux. <br/><<a href="//m.sbmmt.com/wiki/54.html" target="_blank">entier</a>> ::= <digit> <digit><integer> Le terminateur <br/> indique que cette valeur ne peut pas être remplacée ou décomposée. Dans l'exemple suivant, toutes les valeurs sont des terminateurs. <br/><chiffre> ::= 0 | 2 | 3 | 5 | 7 | 9<br/></p><h2> >Bien que la syntaxe des valeurs de propriété CSS du W3C soit basée sur les concepts BNF, elles présentent quelques différences. Comme BNF, il commence par un caractère non terminal. Contrairement à BNF, il décrit également les symboles utilisés comme « valeurs composantes » dans les expressions </h2><h2>. <span style="max-width:90%"></span><a href="//m.sbmmt.com/wiki/81.html" target="_blank" style="font-size: 14px; line-height: 1.76em;"> Dans l'exemple ci-dessous, </a><span style="font-size: 14px; line-height: 1.76em;"></span> est un caractère non terminal, tandis que </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;"><line-width></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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;"><length></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p></p> et <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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p></p> sont des valeurs de composants. <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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p><line-width> = <length> mince | moyen épais</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p>Valeur du composant <br/><br/>Il existe quatre valeurs de composant : mot-clé, basique <br/>Type de données</p>, type de données d'attribut et type de données non-données. <h2></h2><p>1. Les valeurs des mots-clés <a href="//m.sbmmt.com/code/5808.html" target="_blank"></a>Les valeurs des mots-clés ne sont pas entourées de guillemets ou de crochets angulaires. Ils peuvent être utilisés directement comme valeurs d'attribut. Parce qu’ils ne peuvent plus être remplacés ou décomposés, ce sont des terminateurs. Dans l'exemple ci-dessous, <br/></p><h3>, </h3><p></p> et <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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p></p> sont toutes des valeurs de mots clés. Cela signifie qu'ils sont utilisés directement en CSS. <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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p><line-width> = <length> mince | moyen épais</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p>2. , tels que <br/><br/><br/> et </p><h3></h3>. Ils ne sont pas terminaux car ils peuvent être remplacés par des valeurs réelles de longueur ou de couleur. Dans l'exemple ci-dessous, <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;"><length></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> est le type de données de base. <p><'</p>background-color<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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div>'> = <color><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;"><color></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p> Vous pouvez développer des mots-clés via des mots-clés dans nos CSS, RVB, RGBA, HSL , HSLA ou <br/><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">transparent</pre><div class="contentsignin">Copier après la connexion</div></div><p> 关键字，被替换为实际的颜色值。<br/>.example { background-color: red; }<br/>.example { background-color: honeydew; }<br/>.example { background-color: rgb(50%,50%,50%); }<br/>.example { background-color: rgba(100%,100%,100%,.5); }<br/>.example { background-color: hsl(280,100%,50%); }<br/>.example { background-color: hsla(280,100%,50%,0.5); }<br/>.example { background-color: transparent; }<br/></p><h3>3. 属性数据类型</h3><p>属性数据类型定义了属性实际的名字，是非终止符。它由包含在尖角括号中的属性名（包含引号）定义。在下面的例子中，</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><'border-width'></pre><div class="contentsignin">Copier après la connexion</div></div><p> 是属性数据类型。<br/><br/><'border-width'> = <line-width>{1,4}<br/>属性数据类型可作为属性直接出现在我们的 CSS 文件中。在下面的例子中，</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">border-width</pre><div class="contentsignin">Copier après la connexion</div></div><p> 属性给 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">.exmplate</pre><div class="contentsignin">Copier après la connexion</div></div><p> 类定义了 2px 的边框。<br/>.example { border-width: 2px; }<br/></p><h3>4. 非属性数据类型</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;"><line-width></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p> 不是个属性，但它是一个定义了各种 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;"><border></pre><div class="contentsignin">Copier après la connexion</div></div><p> 的数据类型。<br/><br/><line-width> = <length> | thin | medium | thick<br/><'border-width'> = <line-width>{1,4}<br/></p><h2>成分值组合器（Combinator）</h2><p>使用下面的五个方法，成分值能被分配至属性值组合器：<br/></p><h3>1. 相邻值</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;"><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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p>。在 CSS 规则中，这三个值必须按照正确的顺序出现才算合法。<br/><br/>/* Component ar<a href="//m.sbmmt.com/wiki/1078.html" target="_blank">range</a>ment: <a href="//m.sbmmt.com/wiki/1483.html" target="_blank">all</a> in given order */<br/><'property'> = value1 value2 value3<br/>/* Example */<br/>.example { property: value1 value2 value3; }<br/></p><h3>2. 双与符号（&）</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p>）意味着，这些值必须出现，顺序任意。在下面的例子中，语法列出了两个值，由双与符号分开。下面的 CSS 规则说明了这两个值都得出现但可能是不同的顺序。<br/><br/>/* Component arrangement: all, in any order */<br/><'property'> = value1 && value2<br/><br/>/* Examples */<br/>.example { property: value1 value2; }<br/>.example { property: value2 value1; }<br/></p><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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p>）意味着，这些值中只需一个值出现。在下面的例子中，语法列出了三个值，由单管道符号分开。在下面的 CSS 规则中展示了三个可能选项：<br/><br/>/* Component arrangement: one of them must occur */<br/><'property'> = value1 | value2 | value3<br/>/* Examples */<br/>.example { property: value1; }<br/>.example { property: value2; }<br/>.example { property: value3; }<br/></p><h3>4. 双管道符号</h3><p>分开两个或更多选择的双管道符号（</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">||</pre><div class="contentsignin">Copier après la connexion</div></div><p>）意味着，这些值中一个或多个值必须出现，顺序任意。在下面的例子中，语法列出了三个值，由双管道符号分开。在你写 CSS 规则来匹配这个语法时，有大量可选的选择　——　你可以使用一个，两个或三个值，以任意顺序。<br/><br/>/* Component arrangement: one or more in any order */<br/><'property'> = value1 || value2 || value3<br/><br/>/* Examples */<br/>.example { property: value1; }<br/>.example { property: value2; }<br/>.example { property: value3; }<br/>.example { property: value1 value2; }<br/>.example { property: value1 value2 value3; }<br/>...etc<br/></p><h3>5. 中括号</h3><p>包住了两个或更多选择的中括号（</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">[ ]</pre><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p>。<br/><br/>/* Component arrangement: a single grouping */<br/><'property'> = [ value1 | value2 ] value3<br/><br/>/* Examples */<br/>.example { property: value1 value3; }<br/>.example { property: value2 value3; }<br/></p><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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p>，以逗号分隔。<br/><br/>/* Component multiplier: zero or one <a href="//m.sbmmt.com/wiki/1268.html" target="_blank">time</a> */<br/><'property'> = value1 [, value2 ]?<br/><br/>/* Examples */<br/>.example { property: value1; }<br/>.example { property: value1, value2; }<br/></p><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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p> 任意次，每个成分值以逗号分隔。<br/><br/>/* Component multiplier: zero or more times */<br/><'property'> = value1 [, <value2> ]*<br/><br/>/* Examples */<br/>.example { property: value1; }<br/>.example { property: value1, <value2>; }<br/>.example { property: value1, <value2>, <value2>; }<br/>.example { property: value1, <value2>, <value2>, <value2>; }<br/>...etc<br/></p><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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p>）表明其之前的类型，关键字或者组出现一次或更多次。在下面的例子中，放置于成分值之后的加号意味着该值必须被使用超过一次 —— 无需逗号。<br/><br/>/* Component multiplier: one or more times */<br/><'property'> = <value>+<br/><br/>/* Examples */<br/>.example { property: <value>; }<br/>.example { property: <value> <value>; }<br/>.example { property: <value> <value> <value>; }<br/>...etc<br/></p><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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p> 次。在下面的例子中，value 的两个实例都必须根据出现才合法。<br/><br/>/* Component multiplier: occurs A times */<br/><'property'> = <value>{2}<br/><br/>/* Examples */<br/>.example { property: <value> <value> ; }<br/></p><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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p> 次。在下面的例子中，最少一个、最多三个值肯能被用来定义该属性。这些成分值不以逗号分离。<br/><br/>/* Component multiplier: at least A and at most B */<br/><'property'> = <value>{1,3}<br/><br/>/* Examples */<br/>.example { property: <value>; }<br/>.example { property: <value> <value>; }<br/>.example { property: <value> <value> <value>; }<br/></p><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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p> 次重复，而没有上限。在下面的例子中，至少需要使用一个成分值，但也可以额外使用任意数量的成分值值。这些成分值不以逗号分离。<br/><br/>/* Component multiplier: at least A, with no upper limit */<br/><'property'> = <value>{1,}<br/><br/>/* Examples */<br/>.example { property: <value>; }<br/>.example { property: <value> <value>; }<br/>.example { property: <value> <value> <value> ; }<br/>...etc<br/></p><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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p>）表明其之前的类型，关键字或者组出现一次或多次。在下面的例子中，一个或多个成分值可能被使用，这些成分值以逗号分离。<br/><br/>/* Component multiplier: one or more, separated by commas */<br/><'property'> = <value>#<br/><br/>/* Examples */<br/>.example { property: <value>; }<br/>.example { property: <value>, <value>; }<br/>.example { property: <value>, <value>, <value>; }<br/>...etc<br/></p><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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p>。<br/><br/>/* Component multiplier: <a href="//m.sbmmt.com/wiki/136.html" target="_blank">require</a>d group, at least one value */<br/><'property'> = value1 [ value2 | value3 ]!<br/><br/>/* Examples */<br/>.example { property: value1 value2; }<br/>.example { property: value1 value3; }<br/></p><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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p> 当作例子观察一番。这是它在规范里的定义：<br/><br/><'text-shadow'> = none | [ <length>{2,3} && <color>? ]#<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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">#</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><p> 表明我们可以使用 2 或 3 个长度值<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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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;"><color></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><p>这意味着我们能够以很多不同的方式来写 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">text-shadow</pre><div class="contentsignin">Copier après la connexion</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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p>:<br/><br/>.example { text-shadow: none; }<br/>我们也可以只写两个长度值，这意味着我们将设置阴影水平与竖直方向的便宜，但不会有模糊半径或者颜色值。<br/><br/>因为没有定义模糊半径，将会使用初始值 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:plain;">0</pre><div class="contentsignin">Copier après la connexion</div></div><p>；所以，该阴影的边缘会很锋利。由于没有定义颜色，所以阴影将使用文本的颜色。<br><br>.example { text-shadow: 10px 10px; }<br>如果我们使用了三个长度值，我们将会同时定义阴影的水平与竖直方向的偏移和模糊半径。<br><br>.example { text-shadow: 10px 10px 10px; }<br>我们也可以加入颜色，且颜色可以出现在 2 或 3 个长度值的前面或后面。在下面的例子中，red 值可以放在任一长度值的后面。<br><br>.example { text-shadow: 10px 10px 10px red; }<br>.example { text-shadow: red 10px 10px 10px; }<br>最后，我们也能包含多个<a href="//m.sbmmt.com/code/6103.html" target="_blank">文本阴影</a>，写作以逗号分隔的组。阴影效果将从前至后分层应用：第一个阴影在最顶层，<a href="//m.sbmmt.com/java/java-alibaba-qita.html" target="_blank">其它</a>的层在其后。阴影不能覆盖在文本上。在下面的例子中，红色阴影将在绿黄色阴影的顶上。<br><br>.example {<br> text-shadow:<br> 10px 10px red,<br> -20px -20px 5px lime;<br>}<br></p> <h2>结论</h2> <p>如果你以写 CSS 为生，了解如何正确地写合法的 CSS 属性值很重要。一旦你了解了不同的值是如何被组合或累乘的，CSS 属性值语法就变得非常容易理解了。然后看 CSS 的规范与写合法的 CSS 都会变得更容易了。<br><br>如果像拓展阅读，看看下列的网站吧：<br><br>“Value Definition Syntax” in “CSS Values and Units <a href="//m.sbmmt.com/code/8212.html" target="_blank">Module</a> Level 3”, W3C<br><br>“CSS Reference,” Mozilla Developer Network<br><br>“How to Read W3C Specs,” J. David Eisenberg, A <a href="//m.sbmmt.com/wiki/1059.html" target="_blank">List</a> Apart</p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!