来自 前端知识 2019-11-21 21:27 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

理解CSS属性值语法

组合值

有四种类型的组合值:关键词,基本数据类型,属性数据类型和非属性数据类型。

@规则语法

@import"subs.css";
@charset"UTF-8";
@media print{
    body{font-size: 10pt}
}
@keyframes fadeint{
    0%{top: 0;}
    50%{top: 30px;}
    100%{top: 0;}
}

@标识符 xxx;
@标识符 xxx {}

2.*

* 表示前置类型,一个词或一个组出现零次或者多次。在下面的例子中,第二个值被放在[]里面和一个’,’在一起。放在这一组后面的 * 意味着 value1必须出现,但是我们也可以使用任意次 <value2>,用逗号分隔。

CSS

/* 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

1
2
3
4
5
6
7
8
9
/* 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

基本元素

  • 关键字
    -auto,solid,bold…
  • 类型
    基本类型(<length>,<percentage>,<color>…)
    其他类型(<'padding-width'>.<color-stop>…)
  • 符号(/,)
    分割属性值
  • inherit,initial

组合值叠加

组合值也可以使用下面的 8 种方法被叠加。

@规则

  • @media
    用来做布局,设备只有符合了媒体查询条件,里面的样式才能生效
  • keyframes
    用来描述css动画的中间步骤
  • font-face
    引入外部字体,十页面中字体更加丰富

<'text-shadow '>语法:一个例子

让我们来看看 <'text-shadow'>这个属性作为例子。让我们来看看规范中是如何定义这个属性的:

CSS

<'text-shadow'> = none | [ <length>{2,3} && <color>? ]#

1
<'text-shadow'> = none | [ <length>{2,3} && <color>? ]#

我们可以分解这些符号:

  • | 代表我们可以使用关键词 none 或组 []
  • # 代表我们可以使用一次或多次这个组,用逗号分隔。
  • 在组的内部,{2,3}代表我们可以使用两到三个<length>
  • && 代表我们必需包含所有的值,但是它们可以是任意顺序。
  • 仅仅是为了更加微妙,<color>后面包括一个 ?,这意味着它可以出现零次或一次。

用通俗的语言可以表述为:

不指定或指定一个或多个组,这个组包含 2 – 3 个表示长度的值和一个可选额颜色值。长度值和颜色值可以写成任意顺序。

这意味着我们用不同的方式来写我们的 text-shadow 属性。举例来说,我们可以设置 text-shadow 属性为 none:

CSS

.example { text-shadow: none; }

1
.example { text-shadow: none; }

我们可以只写两个长度值,这意味着我们将设定阴影的水平和垂直偏移,但是没有模糊半径或者颜色值。 因为没有设置模糊半径,初始值是 0;所以,阴影是尖锐的。颜色没有定义,文本的颜色将用于阴影的颜色。

CSS

.example { text-shadow: 10px 10px; }

1
.example { text-shadow: 10px 10px; }

如果我们使用 3 个长度值,我们就为阴影设置了模糊半径,水平和垂直偏移。

CSS

.example { text-shadow: 10px 10px 10px; }

1
.example { text-shadow: 10px 10px 10px; }

我们可以包含一个颜色值,它可以放在两个或者三个长度值的前面或后面。在下面的例子中,红色的颜色值可以被放在一组值的任一端。

.example { text-shadow: 10px 10px 10px red; } .example { text-shadow: red 10px 10px 10px; }

1
2
.example { text-shadow: 10px 10px 10px red; }
.example { text-shadow: red 10px 10px 10px; }

最后,我们可以包含多个text-shadow,写成逗号分隔的组。阴影效果将从前到后被应用:第一个阴影在上面,其它的在后面。阴影不能覆盖文字本身。在下面的例子中,红色的阴影将作用在绿黄色阴影上方。

CSS

.example { text-shadow: 10px 10px red, -20px -20px 5px lime; }

1
2
3
4
5
.example {
    text-shadow:
        10px 10px red,
        -20px -20px 5px lime;
}

数量符号-+

<color-stop>[,<color-stop>]+
出现一次或者多次

  • 合法值
    -#ff,red
    -blue,green50%,gray
  • 不合法值
    -red

1.?

? 表示前置类型,一个词或一个组可以选择出现零次或者出现一次。在下面的例子中,第二个值被放在[]里面和一个’,’在一起。放在这一组后面的 ? 意味着 value1 必须出现,但是我们也可以使用 value1value2 ,用逗号分隔。

CSS

/* Component multiplier: zero or one time */ <'property'> = value1 [, value2 ]? /* Examples */ .example { property: value1; } .example { property: value1, value2; }

1
2
3
4
5
6
/* Component multiplier: zero or one time */
<'property'> = value1 [, value2 ]?
 
/* Examples */
.example { property: value1; }
.example { property: value1, value2; }

概念

cascading style sheet 成叠样式表
主要定义页面中的表现

3.属性数据类型

属性数据类型是一个用来定义属性真实值的一个非终结符号。它用尖括号包住属性的名字(使用引号包住)。在下面的例子中,<'border-width'>字符是一个属性数据类型。

CSS

<'border-­width'> = <line-­width>{1,4}

1
<'border-­width'>  =  <line-­width>{1,4}

属性数据类型可能会直接作为属性出现在我们的 CSS 中。在下面的例子中,border-width属性就被用来为.example类名定义一个 2px 的边框。

CSS

.example { border-width: 2px; }

1
.example { border-width: 2px; }

语法

/*用户列表*/
.m-userlist{margin: 0 0 30px}
.m-userlist.list{position: relative;height: 93px;overflow: hidden;}
.m-userlist.list ul{margin: -13px 0 0 -13px;zoom:1;}

selector{property1:value;property2:value;}
大括号之前为选择器,大括号里面属性声明,每个属性声明用分号隔开,每个属性声明=属性名:属性值
注释/* */

4.非属性数据类型

非属性数据类型是一个和属性名称不相同的非终结符。然而,它定义了某个属性的各方面。举例来说,<line-width>不是一个属性,但是它是一个定义了各种<border>属性的数据类型。

CSS

<line-­width> = <length> | thin | medium | thick <'border-­width'> = <line-­width>{1,4}

1
2
<line-­width>  =  <length> | thin | medium | thick
<'border-­width'>  =  <line-­width>{1,4}

组和符号-&&

<length>&&<color>
两个都要出现,顺序不要求

  • 合法值
    -green 2px
    -1em blue
  • 不合法值
    -blue

4.||

|| 分隔的两个或者多个值意味着它们中的一个或者多个必须出现,以任意的顺序。在下面的例子中,这种语法列出了 3 个值,它们通过 || 分隔。当你写 CSS 规则来匹配这个语法时,有很多可用的选择 – 你可以使用一个,两个,或者三个值,以任意的顺序。

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

1
2
3
4
5
6
7
8
9
10
/* 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

数量符号-?

inset?&&<color>
基本属性可以出现也可以不出现

  • 合法值
    -inset blue
    -red

3.|

| 符号分隔的两个或者多个值意味着它们中的一个必须出现。在下面的例子中,这种语法列出 3 个值,通过 | 分隔。下面的 CSS 规则展示了 3 种可能的选择。

CSS

/* Component arrangement: one of them must occur */ <'property'> = value1 | value2 | value3 /* Examples */ .example { property: value1; } .example { property: value2; } .example { property: value3; }

1
2
3
4
5
6
7
/* Component arrangement: one of them must occur */
<'property'> = value1 | value2 | value3
 
/* Examples */
.example { property: value1; }
.example { property: value2; }
.example { property: value3; }

浏览器私有属性

  • chrome,safari
    -webkit
  • firefox
    -moz
  • IE
    -ms-
  • opera
    -o-
    私有属性为了兼容不同浏览器书写如下
.pic{
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transrorm:rotate(-3deg);
}

把私有的属性写着前面,把标准的写着后面。

CSS 属性值语法

虽然 W3C 的 CSS 属性值语法是基于 BNF 的概念,但它还是有差异的。相似之处在于它开始于非终结符,不同之处在于它使用“组合值”这种表达式来描述符号。 在下面的例子中,<line-width>是一个非终结符,<length>thinmediumthick 就是组合值。

CSS

<line-­width> = <length> | thin | medium | thick

1
<line-­width>  =  <length> | thin | medium | thick

组合符号-||

underline||overline||line-through||blink
至少出现一个顺序没有关系

  • 合法值
    -underline
    -overline underline

7.#

# 表示前置类型,一个词或者一个组出现一次或者多次,用逗号分隔。在下面的例子中,可以使用一个或者多个value,每个由逗号分隔。

CSS

/* Component multiplier: one or more, separated by commas */ <'property'> = <value># /* Examples */ .example { property: <value>; } .example { property: <value>, <value>; } .example { property: <value>, <value>, <value>; } ...etc

1
2
3
4
5
6
7
8
/* Component multiplier: one or more, separated by commas */
<'property'> = <value>#
 
/* Examples */
.example { property: <value>; }
.example { property: <value>, <value>; }
.example { property: <value>, <value>, <value>; }
...etc

引入

  • 外部样式表
<head>
    <link rel="stylesheet" href="base.css">
</head>

用link标签引入外部样式表,href属性里写css文件地址

  • 内部样式表
<head>
    <style>
        body{background-color:red}
        p{margin-left:20px}
    </style>
</head>

通过style标签引入,样式内容少时用内部样式。

  • 内嵌样式
<p style="color:red;margin-left:20px;">
    this is a paragraph
</p>

使得html与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

打赏支持我翻译更多好文章,谢谢!

打赏译者

属性值例子

  • padding-top:<length>|<percentage>
  • 合法值
    -padding-top:1px
  • 不合法值
    -padding-top:1em 5%
  • box-shadow:[inset?&&[<length>{2,4}&&<color>?]]#|none
  • 合法值
    box-shadow:3px 3px rgb(50% 50% 50%),red 0 0 4px inset

组合值选择符

组合值可以通过下面五种方法之一被用到属性值选择符中。

发展史

1996 css1,1998 css2,2007 css2.1,2001 css3

巴科斯范式

我们将从巴科斯范式开始,因为这会帮助我们理解 W3C 的属性值语法。 巴科斯范式( BNF )是一种用来描述计算机语言语法的符号集。它的设计是明确的,所以对于如何表示语言这方面不存在分歧或歧义。 如今广泛使用的是巴科斯范式的扩展和编译版本,包括扩展巴科斯范式( EBNF )和扩充巴科斯范式( ABNF )。 一个 BNF 规范是一组按照下面的方式书写的规则:

CSS

<symbol> ::= __expression__

1
<symbol>  ::=  __expression__

左边的部分总是一个非终结符,随后是一个 ::= 符号,这个符号的意思是“可以被替换为”。右边是一个 __expression__ ,包含一个或更多用来推导左边符号的含义的符号。 BNF 的基本规范说,“左边的任何都可以被右边的替换”。

属性值语法

margin: [<length>|<percentage>|auto]{1,4}
基本元素,组和符号,数量符号

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:理解CSS属性值语法

关键词: