十大免费实用网站,网站视频链接,广州美工培训,装修平台网络推广公司本文转载自#xff1a;众成翻译 链接#xff1a;http: //www.zcfy.cc/article/390 万维网联盟#xff08;W3C#xff09; 使用了一套特别的语法来定义 CSS 的属性值#xff0c;能让所有的 CSS 属性都用。如果你曾看过 CSS 规范#xff0c;你可能已经见过这套语法了。就像… 本文转载自众成翻译 链接http: //www.zcfy.cc/article/390 万维网联盟W3C 使用了一套特别的语法来定义 CSS 的属性值能让所有的 CSS 属性都用。如果你曾看过 CSS 规范你可能已经见过这套语法了。就像 border-image-slice 的语法 让我们看看
border-image-slice [number | percentage]{1,4} fill?
如果你不知道这些符号以及它们如何工作的话这套语法可能非常难理解。然而这值得花时间来学。如果你理解 W3C 是如何定义这些属性值的你就可以理解 W3C CSS 规范 中任意一个了。 巴科斯范式
首先我们看看巴科斯范式Backus-Naur Form因为这能帮我们理解 W3C 的属性值语法。
Backus–Naur FormBNF 是用来描述计算机语言语法的正式符号集。它被设计得很清晰所以在语言如何表达方面不会造成二义或者模糊。
最初 Backus-Naur 符号集有很多的扩展与变种在今天都在使用包括 扩展巴科斯范式EBNF和扩充巴克斯范式ABNF.
一个 BNF 规范是按下面的形式编写的一套规则
symbol :: __expression__
式子左边通常是一个非终止符跟着一个 :: 符号代表着“可被换为”。式子右边 __expression__ 由一或多个符号序列组成这些符号序列被用来推导左侧符号的意义。
BNF 规范从根本上说“无论左侧式子是什么也无论右侧式子是什么左侧的式子都能被右侧的式子替换”。
非终止符与终止符
非终止符是指能在之后被替换或被分解的符号。在 BNF 中非终止符通常都在尖角括号中 与 。在下面的例子中integet 和 digit 是非终止符。
integer :: digit | digitinteger
终止符表明这个值不能被替换或者分解。在下面的例子中所有的数值都是终止符。
digit :: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
CSS 属性值语法
尽管 W3C CSS 属性值语法是基于 BNF 的概念它们也有一些不同。像 BNF 的是它起始于一个非终止符。不像 BNF 的是它还描述了用在表达式中作为“成分值component values”的符号。
在下面的例子中line-width 是非终止符而 lengththinmedium 和 thick 是成分值。
line-width length | thin | medium | thick
成分值
有四种成分值关键字、基本数据类型、属性数据类型与非数据数据类型。
1. 关键字值
关键字值不被引号或尖角括号包围。它们可直接作为属性值。因为它们不能再被代替或分解所以它们是终止符。在下面的例子中thin、medium 和 thick 都是关键字值。这意味着它们在 CSS 中直接使用。
line-width length | thin | medium | thick
2. 基本数据类型
基本数据类型定义了一些核心值如 length 与 color。它们是非终止符因为它们可以被替换成真实的长度或颜色值。在下面的例子中 color 是基本数据类型。
background-color color
color 可在我们的 CSS 中通过关键字扩展关键字RGB、RGBA、HSL、HSLA或 transparent 关键字被替换为实际的颜色值。
.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; }
3. 属性数据类型
属性数据类型定义了属性实际的名字是非终止符。它由包含在尖角括号中的属性名包含引号定义。在下面的例子中border-width 是属性数据类型。
border-width line-width{1,4}
属性数据类型可作为属性直接出现在我们的 CSS 文件中。在下面的例子中border-width 属性给 .exmplate 类定义了 2px 的边框。
.example { border-width: 2px; }
4. 非属性数据类型
非属性数据类型并不与属性分享同一个名字是非终止符。然而它定义了某个些属性的一些层面。例如line-width 不是个属性但它是一个定义了各种 border 的数据类型。
line-width length | thin | medium | thick
border-width line-width{1,4}
成分值组合器Combinator
使用下面的五个方法成分值能被分配至属性值组合器
1. 相邻值
成分值接连而写意味着所有这些值都必须按给定的顺序出现。在下面的例子中语法列出了三个不同的值value1, value2 与 value3。在 CSS 规则中这三个值必须按照正确的顺序出现才算合法。
/* Component arrangement: all in given order */
property value1 value2 value3/* Example */
.example { property: value1 value2 value3; }
2. 双与符号
分开两个或更多成分值的双与符号意味着这些值必须出现顺序任意。在下面的例子中语法列出了两个值由双与符号分开。下面的 CSS 规则说明了这两个值都得出现但可能是不同的顺序。
/* Component arrangement: all, in any order */
property value1 value2/* Examples */
.example { property: value1 value2; }
.example { property: value2 value1; }
3. 单管道符号
分开两个或更多成分值的单管道符号|意味着这些值中只需一个值出现。在下面的例子中语法列出了三个值由单管道符号分开。在下面的 CSS 规则中展示了三个可能选项
/* Component arrangement: one of them must occur */
property value1 | value2 | value3/* Examples */
.example { property: value1; }
.example { property: value2; }
.example { property: value3; }
4. 双管道符号
分开两个或更多选择的双管道符号||意味着这些值中一个或多个值必须出现顺序任意。在下面的例子中语法列出了三个值由双管道符号分开。在你写 CSS 规则来匹配这个语法时有大量可选的选择 —— 你可以使用一个两个或三个值以任意顺序。
/* 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
5. 中括号
包住了两个或更多选择的中括号[ ]意味着其中的成分值属于一个单独的组。在下面的例子中语法列出了三个值但其中两个在中括号中所以它们属于一个组。所以在 CSS 规则中有两种选择value1 与 value3 或 value2 与 value3。
/* Component arrangement: a single grouping */
property [ value1 | value2 ] value3/* Examples */
.example { property: value1 value3; }
.example { property: value2 value3; }
成分值累乘器Multipliers
使用下列 8 个方法之一成分值也可被重用
1. ?
问号?表明其之前的类型关键字或者组是可选的且出现零次或一次。在下面的例子中第二个成分值与一个逗号一起放在了中括号里。放置其后的问号意味着value1 必须出现但我们也可使用 value1 和 value2以逗号分隔。
/* Component multiplier: zero or one time */
property value1 [, value2 ]?/* Examples */
.example { property: value1; }
.example { property: value1, value2; }
2. *
星号*表明其之前的类型关键字或者组出现零次或更多次。在下面的例子中第二个成分值与一个逗号一起放在了中括号里。放置其后的星号意味着value1 必须出现但我们也能随我们想地使用 value2 任意次每个成分值以逗号分隔。
/* 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
3.
加号表明其之前的类型关键字或者组出现一次或更多次。在下面的例子中放置于成分值之后的加号意味着该值必须被使用超过一次 —— 无需逗号。
/* Component multiplier: one or more times */
property value/* Examples */
.example { property: value; }
.example { property: value value; }
.example { property: value value value; }
...etc
4. {A}
大括号{A}中包含一个数字表明其之前的类型关键字或者组出现 A 次。在下面的例子中value 的两个实例都必须根据出现才合法。
/* Component multiplier: occurs A times */
property value{2}/* Examples */
.example { property: value value ; }
5. {A,B}
大括号{A,B}中包含由逗号分开的两个数字表明其之前的类型关键字或者组出现至少 A 次至少 B 次。在下面的例子中最少一个、最多三个值肯能被用来定义该属性。这些成分值不以逗号分离。
/* 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; }
6. {A,}
在 {A,} 中 B 被省去了这意味着至少有 A 次重复而没有上限。在下面的例子中至少需要使用一个成分值但也可以额外使用任意数量的成分值值。这些成分值不以逗号分离。
/* 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
7. #
井号#表明其之前的类型关键字或者组出现一次或多次。在下面的例子中一个或多个成分值可能被使用这些成分值以逗号分离。
/* Component multiplier: one or more, separated by commas */
property value#/* Examples */
.example { property: value; }
.example { property: value, value; }
.example { property: value, value, value; }
...etc
8. !
一个组后的感叹号!意味着该组是必须的且产生至少一个值。在下面的例子中value1 是必须的以及一个来自与由 value2 与 value3 组成的组的值。该属性只有两个属性值它们是value1 与 value2 或 value1 与 value3。
/* Component multiplier: required group, at least one value */
property value1 [ value2 | value3 ]!/* Examples */
.example { property: value1 value2; }
.example { property: value1 value3; }
一个例子text-shadow 语法
让我们把 text-shadow 当作例子观察一番。这是它在规范里的定义
text-shadow none | [ length{2,3} color? ]#
我们可以拆分这些符号
| 表明我们可以使用关键字 none 或者一个组# 表明我们可以使用这个组一次或多次以逗号分割在组中{2,3} 表明我们可以使用 2 或 3 个长度值 意味着我们必须包括所有值但顺序可以任意有点棘手的是color 后有一个 ? 这意味着其可能出现零次或一次。
用简单的话讲这也可以被写成 指明了 none 或 一个或多个由逗号分离的组其中包含了二到三个长度值与一个可选的颜色值。长度值与可选的颜色值可以以任意顺序编写。 这意味着我们能够以很多不同的方式来写 text-shadow 属性的值。例如可以设置其为 none:
.example { text-shadow: none; }
我们也可以只写两个长度值这意味着我们将设置阴影水平与竖直方向的便宜但不会有模糊半径或者颜色值。
因为没有定义模糊半径将会使用初始值 0所以该阴影的边缘会很锋利。由于没有定义颜色所以阴影将使用文本的颜色。
.example { text-shadow: 10px 10px; }
如果我们使用了三个长度值我们将会同时定义阴影的水平与竖直方向的偏移和模糊半径。
.example { text-shadow: 10px 10px 10px; }
我们也可以加入颜色且颜色可以出现在 2 或 3 个长度值的前面或后面。在下面的例子中red 值可以放在任一长度值的后面。
.example { text-shadow: 10px 10px 10px red; }
.example { text-shadow: red 10px 10px 10px; }
最后我们也能包含多个文本阴影写作以逗号分隔的组。阴影效果将从前至后分层应用第一个阴影在最顶层其它的层在其后。阴影不能覆盖在文本上。在下面的例子中红色阴影将在绿黄色阴影的顶上。
.example {text-shadow:10px 10px red,-20px -20px 5px lime;
}
结论
如果你以写 CSS 为生了解如何正确地写合法的 CSS 属性值很重要。一旦你了解了不同的值是如何被组合或累乘的CSS 属性值语法就变得非常容易理解了。然后看 CSS 的规范与写合法的 CSS 都会变得更容易了。
如果像拓展阅读看看下列的网站吧
“Value Definition Syntax” in “CSS Values and Units Module Level 3”, W3C“CSS Reference,” Mozilla Developer Network“How to Read W3C Specs,” J. David Eisenberg, A List Apart 博客名称王乐平博客 博客地址http://blog.lepingde.com CSDN博客地址http://blog.csdn.net/lecepin
