CSS 속성 값 구문에 대한 자세한 소개

<div></div> <p>W3C(World Wide Web Consortium)는 모든 CSS 속성을 사용할 수 있도록 특수 구문을 사용하여 CSS 속성 값을 정의합니다. CSS 사양을 살펴본 적이 있다면 아마도 이 구문을 본 적이 있을 것입니다. </p><pre class="brush:css;toolbar:false;">border-image-slice</pre><p> 구문과 마찬가지로 다음을 살펴보겠습니다. <br></p><pre class="brush:css;toolbar:false"><&#39;border-image-slice&#39;> = [<number> | <percentage>]{1,4} && fill?</pre><p> 이 구문은 기호와 작동 방식을 모르면 이해하기 매우 어려울 수 있습니다. 그러나 배우는 데 시간을 투자할 가치가 있습니다. W3C가 이러한 속성 값을 정의하는 방법을 이해하면 W3C CSS 사양을 모두 이해할 수 있습니다. <br><br><img src="https://img.php.cn/upload/article/000/000/194/4b2e0cb3ffe4e9d2c7616cbfbd8d0a35-0.jpg" alt="CSS 속성 값 구문에 대한 자세한 소개" ><br><br></p> <h2>Backus-Naur Form</h2> <p>먼저 Backus-Naur Form을 살펴보겠습니다. W3C의 속성 값 구문을 이해하는 데 도움이 되기 때문입니다. <br><br>BNF(Backus-Naur Form)는 컴퓨터 언어의 구문을 설명하는 데 사용되는 공식 기호 집합입니다. 언어가 어떻게 표현되는지에 있어 모호함이나 모호함이 없도록 명확하게 디자인되었습니다. <br><br>원본 Backus-Naur 기호 세트에는 EBNF(Extended Backus Normal Form) 및 ABNF(Extended Backus Normal Form)를 포함하여 오늘날 사용되는 많은 확장 및 변형이 있습니다. <br><br>BNF 사양은 다음 형식으로 작성됩니다. 규칙 세트: <br></p><pre class="brush:css;toolbar:false"><symbol> ::= __expression__</pre><p> 표현식의 왼쪽은 일반적으로 비종말 문자이고 그 뒤에 "대체 가능"을 의미하는 <br></p><pre class="brush:css;toolbar:false;">::=</pre><p> 기호가 옵니다. 공식 </p><pre class="brush:plain;">__expression__</pre><p>의 오른쪽은 왼쪽 기호의 의미를 추론하는 데 사용되는 하나 이상의 기호 시퀀스로 구성됩니다. <br><br>BNF 사양은 기본적으로 "왼쪽의 표현이 무엇이든, 오른쪽의 표현이 무엇이든 왼쪽의 표현은 오른쪽의 표현으로 대체될 수 있다"고 되어 있습니다. <br><br></p> <h2>비단자기호와 단자기호</h2> <p>비단자기호는 추후 대체되거나 분해될 수 있는 기호를 말합니다. BNF에서 비종단 기호는 일반적으로 꺾쇠 괄호(</p><pre class="brush:plain;"><</pre><p> 및 </p><pre class="brush:plain;">></pre><p>)로 묶입니다. 아래 예에서 </p><pre class="brush:plain;"><integet></pre><p> 및 </p><pre class="brush:plain;"><digit></pre><p>는 비터미널 문자입니다. <br></p><pre class="brush:css;toolbar:false"><integer> ::= <digit> | <digit><integer></pre><p> 종결자는 값을 대체하거나 분해할 수 없음을 나타냅니다. 다음 예에서는 모든 값이 종결자입니다. <br></p><pre class="brush:css;toolbar:false"><digit> ::= 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9</pre><h2>CSS 속성 값 구문</h2> <p>W3C CSS 속성 값 구문은 BNF 개념을 기반으로 하지만 몇 가지 차이점이 있습니다. BNF와 마찬가지로 비터미널 문자로 시작합니다. BNF와 달리 표현식에서 "구성요소 값"으로 사용되는 기호도 설명합니다. <br><br>아래 예에서 </p><pre class="brush:plain;"><line-width></pre><p>는 비종말 문자이고 </p><pre class="brush:plain;"><length></pre><p>, </p><pre class="brush:plain;">thin</pre><p>, </p><pre class="brush:plain;">medium</pre><p> 및 </p><pre class="brush:plain;">thick</pre><p>는 구성 요소 값입니다. <br></p><pre class="brush:css;toolbar:false"><line-width> = <length> | thin | medium | thick</pre><h2>구성요소 값</h2> <p>구성요소 값에는 키워드, 기본 데이터 유형, 속성 데이터 유형, 비데이터 데이터 유형의 네 가지가 있습니다. <br></p> <h3>1. 키워드 값 </h3> <p>키워드 값은 따옴표나 꺾쇠괄호로 묶지 않습니다. 속성 값으로 직접 사용할 수 있습니다. 더 이상 교체되거나 분해될 수 없기 때문에 터미네이터입니다. 아래 예에서 </p><pre class="brush:plain;">thin</pre><p>, </p><pre class="brush:plain;">medium</pre><p> 및 </p><pre class="brush:plain;">thick</pre><p>는 모두 키워드 값입니다. 이는 CSS에서 직접 사용된다는 의미입니다. <br></p><pre class="brush:css;toolbar:false"><line-width> = <length> | thin | medium | thick</pre><h3>2. 기본 데이터 유형</h3> <p>기본 데이터 유형은 </p><pre class="brush:plain;"><length></pre><p> 및 </p><pre class="brush:plain;"><color></pre><p>과 같은 일부 핵심 값을 정의합니다. 실제 길이나 색상 값으로 대체될 수 있으므로 비터미널적입니다. 아래 예에서 </p><pre class="brush:plain;"><color></pre><p>는 기본 데이터 유형입니다. <br></p><pre class="brush:css;toolbar:false"><'background-color'> = <color></pre><pre class="brush:plain;"><color></pre><p>는 키워드, 확장 키워드, RGB, RGBA, HSL, HSLA 또는 </p><pre class="brush:plain;">transparent</pre><p> 키워드를 통해 CSS의 실제 색상 값으로 대체될 수 있습니다. <br><br></p><pre class="brush:css;toolbar:false">.example { background-color: red; } .example { background-color: honeydew; } .example { background-color: rgb(50%,50%,50%); } .example { background-color: rgba(100%,100%,100%,.5); } .example { background-color: hsl(280,100%,50%); } .example { background-color: hsla(280,100%,50%,0.5); } .example { background-color: transparent; }</pre><h3>3. 속성 데이터 유형 </h3> <p> 속성 데이터 유형은 비종단 문자인 속성의 실제 이름을 정의합니다. 이는 꺾쇠괄호(따옴표 포함)로 묶인 속성 이름으로 정의됩니다. 아래 예에서 </p><pre class="brush:plain;"><'border-width'></pre><p>는 속성 데이터 유형입니다. <br></p><pre class="brush:css;toolbar:false"><'border-width'> = <line-width>{1,4}</pre><p>속성 데이터 유형은 CSS 파일의 속성으로 직접 나타날 수 있습니다. 아래 예에서 <br></p><pre class="brush:plain;">border-width</pre><p> 속성은 </p><pre class="brush:plain;">.exmplate</pre><p> 클래스에 대한 2px 테두리를 정의합니다. <br></p><pre class="brush:css;toolbar:false">.example { border-width: 2px; }</pre><h3>4. 비속성 데이터 유형</h3> <p>비속성 데이터 유형은 속성과 동일한 이름을 공유하지 않으며 종결자가 아닙니다. 그러나 이는 특정 속성의 일부 측면을 정의합니다. 예를 들어 </p><pre class="brush:plain;"><line-width></pre><p>는 속성은 아니지만 다양한 </p><pre class="brush:plain;"><border></pre><p>를 정의하는 데이터 유형입니다. <br></p><pre class="brush:css;toolbar:false"><line-width> = <length> | thin | medium | thick <'border-width'> = <line-width>{1,4}</pre><h2>Combinator</h2> <p>구성 요소 값은 다음 다섯 가지 방법을 사용하여 속성 값 결합자에 할당될 수 있습니다. <br></p> <h3>1 인접 값 ​​</h3> <p>구성 요소 값이 차례로 기록되면 이러한 값이 모두 의미됩니다. 모두 주어진 순서대로 나타나야 합니다. 아래 예에서 문법은 </p><pre class="brush:plain;">value1</pre><p>, </p><pre class="brush:plain;">value2</pre><p> 및 </p><pre class="brush:plain;">value3</pre><p>의 세 가지 값을 나열합니다. CSS 규칙에서 이 세 가지 값이 올바른 순서로 나타나야 합법적입니다. <br></p><pre class="brush:css;toolbar:false">/* Component arrangement: all in given order */ <'property'> = value1 value2 value3 /* Example */ .example { property: value1 value2 value3; }</pre><h3>2. 이중 앰퍼샌드(&) </h3> <p>두 개 이상의 구성요소 값을 구분하는 이중 앰퍼샌드(</p>)<pre class="brush:plain;">&&</pre><p>）意味着，这些值必须出现，顺序任意。在下面的例子中，语法列出了两个值，由双与符号分开。下面的 CSS 规则说明了这两个值都得出现但可能是不同的顺序。<br><br></p><pre class="brush:css;toolbar:false">/* Component arrangement: all, in any order */ <'property'> = value1 && value2 /* Examples */ .example { property: value1 value2; } .example { property: value2 value1; }</pre><h3>3. 单管道符号</h3> <p>分开两个或更多成分值的单管道符号（</p><pre class="brush:plain;">|</pre><p>）意味着，这些值中只需一个值出现。在下面的例子中，语法列出了三个值，由单管道符号分开。在下面的 CSS 规则中展示了三个可能选项：<br><br></p><pre class="brush:css;toolbar:false">/* Component arrangement: one of them must occur */ <'property'> = value1 | value2 | value3 /* Examples */ .example { property: value1; } .example { property: value2; } .example { property: value3; }</pre><h3>4. 双管道符号</h3> <p>分开两个或更多选择的双管道符号（</p><pre class="brush:plain;">||</pre><p>）意味着，这些值中一个或多个值必须出现，顺序任意。在下面的例子中，语法列出了三个值，由双管道符号分开。在你写 CSS 规则来匹配这个语法时，有大量可选的选择　——　你可以使用一个，两个或三个值，以任意顺序。<br><br></p><pre class="brush:css;toolbar:false">/* Component arrangement: one or more in any order */ <'property'> = value1 || value2 || value3 /* Examples */ .example { property: value1; } .example { property: value2; } .example { property: value3; } .example { property: value1 value2; } .example { property: value1 value2 value3; } ...etc</pre><h3>5. 中括号</h3> <p>包住了两个或更多选择的中括号（</p><pre class="brush:plain;">[ ]</pre><p>）意味着其中的成分值属于一个单独的组。在下面的例子中，语法列出了三个值，但其中两个在中括号中，所以它们属于一个组。所以在 CSS 规则中有两种选择：</p><pre class="brush:plain;">value1</pre><p> 与 </p><pre class="brush:plain;">value3</pre><p> 或 </p><pre class="brush:plain;">value2</pre><p> 与 </p><pre class="brush:plain;">value3</pre><pre class="brush:css;toolbar:false">/* Component arrangement: a single grouping */ <'property'> = [ value1 | value2 ] value3 /* Examples */ .example { property: value1 value3; } .example { property: value2 value3; }</pre><h2>成分值累乘器（Multipliers）</h2> <p>使用下列 8 个方法之一，成分值也可被重用：<br></p> <h3>1. <pre class="brush:plain;">?</pre></h3> <p>问号（</p><pre class="brush:plain;">?</pre><p>）表明其之前的类型，关键字或者组，是可选的且出现零次或一次。在下面的例子中，第二个成分值与一个逗号一起放在了中括号里。放置其后的问号意味着，</p><pre class="brush:plain;">value1</pre><p> 必须出现，但我们也可使用 </p><pre class="brush:plain;">value1</pre><p> 和 </p><pre class="brush:plain;">value2</pre><p>，以逗号分隔。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: zero or one time */ <'property'> = value1 [, value2 ]? /* Examples */ .example { property: value1; } .example { property: value1, value2; }</pre><h3>2. <pre class="brush:plain;">*</pre></h3> <p>星号（</p><pre class="brush:plain;">*</pre><p>）表明其之前的类型，关键字或者组出现零次或更多次。在下面的例子中，第二个成分值与一个逗号一起放在了中括号里。放置其后的星号意味着，</p><pre class="brush:plain;">value1</pre><p> 必须出现，但我们也能随我们想地使用 </p><pre class="brush:plain;">value2</pre><p> 任意次，每个成分值以逗号分隔。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: zero or more times */ <'property'> = value1 [, <value2> ]* /* Examples */ .example { property: value1; } .example { property: value1, <value2>; } .example { property: value1, <value2>, <value2>; } .example { property: value1, <value2>, <value2>, <value2>; } ...etc</pre><h3>3. <pre class="brush:plain;">+</pre></h3> <p>加号（</p><pre class="brush:plain;">+</pre><p>）表明其之前的类型，关键字或者组出现一次或更多次。在下面的例子中，放置于成分值之后的加号意味着该值必须被使用超过一次 —— 无需逗号。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: one or more times */ <'property'> = <value>+ /* Examples */ .example { property: <value>; } .example { property: <value> <value>; } .example { property: <value> <value> <value>; } ...etc</pre><h3>4. <pre class="brush:plain;">{A}</pre></h3> <p>大括号（</p><pre class="brush:plain;">{A}</pre><p>）中包含一个数字表明其之前的类型，关键字或者组出现 </p><pre class="brush:plain;">A</pre><p> 次。在下面的例子中，value 的两个实例都必须根据出现才合法。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: occurs A times */ <'property'> = <value>{2} /* Examples */ .example { property: <value> <value> ; }</pre><h3>5. <pre class="brush:plain;">{A,B}</pre></h3> <p>大括号（</p><pre class="brush:plain;">{A,B}</pre><p>）中包含由逗号分开的两个数字表明其之前的类型，关键字或者组出现至少 </p><pre class="brush:plain;">A</pre><p> 次，至少 </p><pre class="brush:plain;">B</pre><p> 次。在下面的例子中，最少一个、最多三个值肯能被用来定义该属性。这些成分值不以逗号分离。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: at least A and at most B */ <'property'> = <value>{1,3} /* Examples */ .example { property: <value>; } .example { property: <value> <value>; } .example { property: <value> <value> <value>; }</pre><h3>6. <pre class="brush:plain;">{A,}</pre></h3> <p>在 </p><pre class="brush:plain;">{A,}</pre><p> 中 </p><pre class="brush:plain;">B</pre><p> 被省去了，这意味着至少有 </p><pre class="brush:plain;">A</pre><p> 次重复，而没有上限。在下面的例子中，至少需要使用一个成分值，但也可以额外使用任意数量的成分值值。这些成分值不以逗号分离。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: at least A, with no upper limit */ <'property'> = <value>{1,} /* Examples */ .example { property: <value>; } .example { property: <value> <value>; } .example { property: <value> <value> <value> ; } ...etc</pre><h3>7. <pre class="brush:plain;">#</pre></h3> <p>井号（</p><pre class="brush:plain;">#</pre><p>）表明其之前的类型，关键字或者组出现一次或多次。在下面的例子中，一个或多个成分值可能被使用，这些成分值以逗号分离。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: one or more, separated by commas */ <'property'> = <value># /* Examples */ .example { property: <value>; } .example { property: <value>, <value>; } .example { property: <value>, <value>, <value>; } ...etc</pre><h3>8. <pre class="brush:plain;">!</pre></h3> <p>一个组后的感叹号（</p><pre class="brush:plain;">!</pre><p>）意味着该组是必须的且产生至少一个值。在下面的例子中，</p><pre class="brush:plain;">value1</pre><p> 是必须的，以及一个来自与由 </p><pre class="brush:plain;">value2</pre><p> 与 </p><pre class="brush:plain;">value3</pre><p> 组成的组的值。该属性只有两个属性值；它们是，</p><pre class="brush:plain;">value1</pre><p>与 </p><pre class="brush:plain;">value2</pre><p> 或 </p><pre class="brush:plain;">value1</pre><p> 与 </p><pre class="brush:plain;">value3</pre><p>。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: required group, at least one value */ <'property'> = value1 [ value2 | value3 ]! /* Examples */ .example { property: value1 value2; } .example { property: value1 value3; }</pre><h2>一个例子：<pre class="brush:plain;"><'text-shadow'></pre> 语法</h2> <p>让我们把 </p><pre class="brush:plain;"><'text-shadow'></pre><p> 当作例子观察一番。这是它在规范里的定义：<br></p><pre class="brush:css;toolbar:false"><'text-shadow'> = none | [ <length>{2,3} && <color>? ]#</pre><p>我们可以拆分这些符号：<br></p><pre class="brush:plain;">|</pre><p> 表明我们可以使用关键字 </p><pre class="brush:plain;">none</pre><p> 或者一个组<br><br></p><pre class="brush:plain;">#</pre><p> 表明我们可以使用这个组一次或多次，以逗号分割<br><br>在组中，</p><pre class="brush:plain;">{2,3}</pre><p> 表明我们可以使用 2 或 3 个长度值<br><br></p><pre class="brush:plain;">&&</pre><p> 意味着我们必须包括所有值，但顺序可以任意<br><br>有点棘手的是，</p><pre class="brush:plain;"><color></pre><p> 后有一个 </p><pre class="brush:plain;">?</pre><p> ，这意味着其可能出现零次或一次。<br><br>用简单的话讲，这也可以被写成：<br><br></p> <pre class="brush:php;toolbar:false">指明了 none 或 一个或多个由逗号分离的组，其中包含了二到三个长度值与一个可选的颜色值。长度值与可选的颜色值可以以任意顺序编写。</pre> <p><br>这意味着我们能够以很多不同的方式来写 </p><pre class="brush:plain;">text-shadow</pre><p> 属性的值。例如，可以设置其为 </p><pre class="brush:plain;">none</pre><p>:<br><br></p><pre class="brush:css;toolbar:false">.example { text-shadow: none; }</pre><p>我们也可以只写两个长度值，这意味着我们将设置阴影水平与竖直方向的便宜，但不会有模糊半径或者颜色值。<br><br>因为没有定义模糊半径，将会使用初始值 <br></p><pre class="brush:plain;">0</pre><p>；所以，该阴影的边缘会很锋利。由于没有定义颜色，所以阴影将使用文本的颜色。<br><br></p><pre class="brush:css;toolbar:false">.example { text-shadow: 10px 10px; }</pre><p>如果我们使用了三个长度值，我们将会同时定义阴影的水平与竖直方向的偏移和模糊半径。<br><br></p><pre class="brush:css;toolbar:false">.example { text-shadow: 10px 10px 10px; }</pre><p>我们也可以加入颜色，且颜色可以出现在 2 或 3 个长度值的前面或后面。在下面的例子中，red 值可以放在任一长度值的后面。<br><br></p><pre class="brush:css;toolbar:false">.example { text-shadow: 10px 10px 10px red; } .example { text-shadow: red 10px 10px 10px; }</pre><p>最后，我们也能包含多个文本阴影，写作以逗号分隔的组。阴影效果将从前至后分层应用：第一个阴影在最顶层，其它的层在其后。阴影不能覆盖在文本上。在下面的例子中，红色阴影将在绿***阴影的顶上。<br><br></p><pre class="brush:css;toolbar:false">.example { text-shadow: 10px 10px red, -20px -20px 5px lime; }</pre><h2>结论</h2> <p>如果你以写 CSS 为生，了解如何正确地写合法的 CSS 属性值很重要。一旦你了解了不同的值是如何被组合或累乘的，CSS 属性值语法就变得非常容易理解了。然后看 CSS 的规范与写合法的 CSS 都会变得更容易了。<br></p> <div></div> <!--<p class='doc-content-pic doc-pic'><img src="https://img.php.cn/upload/article/000/000/194/2dc0b7317ecd295de8469d48c5768c41-1.jpg" / alt="CSS 속성 값 구문에 대한 자세한 소개" > </p>-->

위 내용은 CSS 속성 값 구문에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!