css编码规范,理解CSS属性值语法

理解CSS属性值语法

2016/08/12 · CSS · 属性值

本文由 伯乐在线 - 殊 翻译,艾凌风 校稿。未经许可,禁止转载!
英文出处:Russ Weakley。欢迎加入翻译组。

W3C 使用特定的语法来定义所有可能在 CSS 属性中使用的值。如果你曾经看过 CSS 规范,你可能已经见过这种语法的使用 – 比如 border-image-slice 语法。让我们来看看:

CSS

<'border-­image-­slice'> = [<number> | <percentage>]{1,4} && fill?

1
<'border-­image-­slice'> = [<number> | <percentage>]{1,4} && fill?

这个语法可能很难理解-如果你不知道其中的各个符号和他们是怎样生效的话。但是,这是值得花时间去学习的。如果你理解了 W3C 是怎样定义这些属性值,你就能理解 W3C 的任何 CSS 规范。

图片 1

概念

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

1.1.  语法

1.        用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。

2.        为选择器分组时,将单独的选择器单独放在一行。

3.        为了代码的易读性,在每个声明块的左花括号前添加一个空格。

4.        声明块的右花括号应当单独成行。

5.        每条声明语句的 : 后应该插入一个空格。

6.        为了获得更准确的错误报告,每条声明都应该独占一行。

7.        所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。

8.        对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格(例如,box-shadow)。

9.        不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值(既加逗号也加空格)中区分多个颜色值(只加逗号,不加空格)。

10.     对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代替 -0.5px)。

11.     十六进制值应该全部小写,例如,#fff。在扫描文档时,小写字符易于分辨,因为他们的形式更易于区分。

12.     尽量使用简写形式的十六进制值,例如,用 #fff 代替#ffffff。

13.     为选择器中的属性添加双引号,例如,input[type="text"]。只有在某些情况下是可选的,但是,为了代码的一致性,建议都加上双引号。

14.     避免为 0 值指定单位,例如,用 margin: 0; 代替margin: 0px;。

/* Bad CSS */

.selector,.selector-secondary,.selector[type=text] {

  padding:15px;

  margin:0px0px15px;

  background-color:rgba(0,0,0,0.5);

  box-shadow:0px1px2px#CCC,inset01px0#FFFFFF

}

 

/* Good CSS */

.selector,

.selector-secondary,

.selector[type="text"] {

  padding:15px;

  margin-bottom:15px;

  background-color: rgba(0,0,0,.5);

  box-shadow:01px2px#ccc,inset01px0#fff;

}

selector{                /*选择器*/

  property1:value;  /*属性声明 = 属性名:属性值*/

  property2:value;/*末尾加分号*/

}

巴科斯范式

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

CSS

<symbol> ::= __expression__

1
<symbol>  ::=  __expression__

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

发展史

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

1.2.  声明顺序

相关的属性声明应当归为一组,并按照下面的顺序排列:

Positioning

Box model

Typographic

Visual

由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型排在第二位,因为它决定了组件的尺寸和位置。

其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。

.declaration-order {

  /* Positioning */

  position:absolute;

  top:0;

  right:0;

  bottom:0;

  left:0;

  z-index:100;

 

  /* Box-model */

  display:block;

  float:right;

  width:100px;

  height:100px;

 

  /* Typography */

  font:normal13px"HelveticaNeue",sans-serif;

  line-height:1.5;

  color:#333;

  text-align:center;

 

  /* Visual */

  background-color:#f5f5f5;

  border:1pxsolid#e5e5e5;

  border-radius:3px;

 

  /* Misc */

  opacity:1;

}

注释用/**/

非终结符和终结符

非终结符是可以被替换或再细分的符号。在 BNF 中,非终结符出现在 < > 中。在下面的例子中,<integer><digit>是非终结符。

CSS

<integer> ::= <digit> | <digit><integer>

1
<integer>  ::=  <digit> | <digit><integer>

终结符就代表一个值不可被替换或者再细分。在下面的例子中,所有的数值都是终结符。

CSS

<digit> ::= 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

1
<digit>  ::=  0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

引入

  • 外部样式表
<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杂合在一起不利于维护。不建议引用

1.3.  不要使用 @import

与 <link> 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。替代办法有以下几种:

使用多个 <link> 元素

通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件

通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

<!-- Use link elements-->

<linkrel="stylesheet" >

 

<!-- Avoid @imports -->

<style>

  @importurl("more.css");

</style>

浏览器私有属性前缀

CSS 属性值语法

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

CSS

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

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

语法

/*用户列表*/
.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;}
大括号之前为选择器,大括号里面属性声明,每个属性声明用分号隔开,每个属性声明=属性名:属性值
注释/* */

1.4.  媒体查询(Mediaquery)的位置

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了,将来只会被大家遗忘。下面给出一个典型的实例。

.element { ... }

.element-avatar { ... }

.element-selected { ... }

 

@media(min-width:480px) {

  .element { ...}

  .element-avatar { ... }

  .element-selected { ... }

}

·chrome.safari

    -webkit-

组合值

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

浏览器私有属性

  • 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);
}

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

1.5.  带前缀的属性

当使用特定厂商的带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑。

在 Textmate 中,使用 Text → Edit Each Line in Selection(⌃⌘A)。在 Sublime Text 2 中,使用 Selection →Add Previous Line (⌃⇧↑)和 Selection → Add NextLine (⌃⇧↓)。

/* Prefixed properties */

.selector {

  -webkit-box-shadow:01px2px rgba(0,0,0,.15);

          box-shadow:01px2px rgba(0,0,0,.15);

}

·firefox

    -moz-

1.关键词

关键词出现时不带引号或者尖括号。它们被用作属性值。因为它们不能被替换或者进一步细分,所以它们是终结符。在下面的例子中,thinmediumthick 都是关键词。这意味着它们可以被用作我们 CSS 中的值。

CSS

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

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

属性值语法

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

1.6.  单行规则声明

对于只包含一条声明的样式,为了易读性和便于快速编辑,建议将语句放在同一行。对于带有多条声明的样式,还是应当将声明分为多行。

这样做的关键因素是为了错误检测 -- 例如,CSS 校验器指出在 183 行有语法错误。如果是单行单条声明,你就不会忽略这个错误;如果是单行多条声明的话,你就要仔细分析避免漏掉错误了。

/* Single declarations on oneline */

.span1 {width:60px; }

.span2 {width:140px; }

.span3 {width:220px; }

 

/* Multiple declarations, oneper line */

.sprite {

  display:inline-block;

  width:16px;

  height:15px;

  background-image:url(../img/sprite.png);

}

.icon           { background-position:00; }

.icon-home      { background-position:0-20px; }

.icon-account   { background-position:0-40px; }

·IE

    -ms-

2.基本数据类型

基本数据类型定义核心值,如<length><color>。它们是非终结值因为它们可以被实际的长度值或者颜色值来替换。在下面的例子中,<color>符号是一个基本数据类型。

CSS

<'background-color'> = <color>

1
<'background-color'>  =  <color>

这个<color>在我们的 CSS 中可以被一个真实的颜色值替换,使用一个关键词,一个扩展的关键词,一个 RGB 颜色值,RGBA 值,HSL 或者 HSLA 值,或者 transparent 这个关键词。

CSS

.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; }

1
2
3
4
5
6
7
.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; }

基本元素

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

1.7.  简写形式的属性声明

在需要显示地设置所有值的情况下,应当尽量限制使用简写形式的属性淘宝开店教程声明。常见的滥用简写属性声明的情况如下:

padding

margin

font

background

border

border-radius

大部分情况下,我们不需要为简写形式的属性声明指定所有值。例如,伤感的句子HTML 的 heading 元素只需要设置上、下边距(margin)的值,因此,在必要的时候,只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱,并且会对属性值带来不必要的覆盖从而引起意外的副作用。

/* Bad example */

.element {

  margin:0010px;

  background:red;

  background:url("image.jpg");

  border-radius:3px3px00;

}

 

/* Good example */

.element {

  margin-bottom:10px;

  background-color:red;

  background-image:url("image.jpg");

  border-top-left-radius:3px;

  border-top-right-radius:3px;

}

·opera

    -o-

.pic{

    -webkit-transform:ratate(-3deg);

    -moz-transform:ratate(-3deg);

    -ms-transform:ratate(-3deg);

    -o-transform:ratate(-3deg);

    transform:ratate(-3deg);
}

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; }

组和符号-空格

<'font-size'> <'font-family'>
两个都要出现且顺序一致

  • 合法值
    -12px arial
  • 不合法值
    -2em
    -arial 14px

1.8.  Less 和 Sass 中的嵌套

避免非必要的嵌套。这是因为虽然你可以使用嵌套,但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内(也就是后代选择器),并且存在多个需要嵌套的元素时才使用嵌套。

// Without nesting

.table>thead>tr>th {… }

.table>thead>tr>td {… }

 

// With nesting

.table>thead>tr {

  >th { … }

  >td { … }

}

属性值语法

·margin:[<length>|<percentage>|auto]{1,4}

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

1.9.  注释

代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称。

对于较长的注释,务必书写完整的句子;对于一般性注解,可以书写简洁的短语。

/* Bad example */

/* Modal header */

.modal-header {

  ...

}

 

/* Good example */

/* Wrapping element for.modal-title and .modal-close */

.modal-header {

  ...

}

基本元素

    ·关键字  -auto,solid,bold...

    ·类型 

              -基本类型(<length>,<percentage>,<color>...)

             -其他类型(<'padding-width'>,<color-stop>...)

    ·符号(/,)

    ·inherit,initial

组合值选择符

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

组合符号-||

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

  • 合法值
    -underline
    -overline underline

1.10.    class 命名

class 名称中只能出现小写字符和破折号(dashe)(不是下划线,也不是驼峰命名法)。破折号应当用于相关 class 的命名(类似于命名空间)(例如,.btn 和 .btn-danger)。

避免过度任意的简写。.btn 代表 button,但是 .s 不能表达任何意思。

class 名称应当尽可能短,并且意义明确。

使用有意义的名称。使用有组织的或目的明确的名称,不要使用表现形式(presentational)的名称。

基于最近的父 class 或基本(base) class 作为新 class 的前缀。

使用 .js-* class 来标识行为(与样式相对),并且不要将这些 class 包含到 CSS 文件中。

在为 Sass 和 Less 变量命名是也可以参考上面列出的各项规范。

/* Bad example */

.t {... }

.red {... }

.header {... }

 

/* Good example */

.tweet {... }

.important { ... }

.tweet-header { ... }

组合符号

    ·空格 <'font-size'> <'font-family'> 两个基本类型必须出现,且按顺序出现。

        合法值 - 12px arial

    ·&& <length>&&<color> 两个基本属性必须出现但与顺序无关。

        合法值 - green 2px     - lem blue

    ·||  underline||overline||line-through||blink 至少出现一个,与顺序无关。

        合法值  -underline     -overline underline

    ·|  <color> | transparent 只能出现一个

        合法值 -orange     -transparent

    []   bold [thin||<length>] 组合

        合法值 -bold thin    -bold 2em

1.相邻值

组合值中一个接着一个的写法意味着这些值都必须以给定的顺序出现。在下面的例子中,这种语法列出了3个不同的值:value1value2value3 。在 CSS 规则中,这三个值以正确的顺序出现在属性语法中才是有效的。

JavaScript

/* Component arrangement: all in given order */ <'property'> = value1 value2 value3 /* Example */ .example { property: value1 value2 value3; }

1
2
3
4
5
/* Component arrangement: all in given order */
<'property'> = value1 value2 value3
 
/* Example */
.example { property: value1 value2 value3; }

组和符号-|

<color>|transparent
两个基本元素只能出现一个

  • 合法值
    -orange
    -transparent
  • 不合法值
    -blue transparent

1.11.    选择器

对于通用元素使用 class ,这样利于渲染性能的优化。

对于经常出现的组件,避免使用属性选择器(例如,[class^="..."])。浏览器的性能会受到这些因素的影响。

选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过 3 。

只有在必要的时候才将 class 限制在最近的父元素内(也就是后代选择器)(例如,不使用带前缀的 class 时 -- 前缀类似于命名空间)。

/* Bad example */

span {... }

.page-container#stream.stream-item.tweet.tweet-header.username { ... }

.avatar {... }

 

/* Good example */

.avatar {... }

.tweet-header.username { ... }

.tweet.avatar { ... }

数量符号

    ·无 <length>只有一个基本元素,则说明该基本元素只能出现一次。

        合法值 -1px    -10em

    · <color-stop>,[,<color-stop>] 表示出现一次或者多次

        合法值 -#fff,red

    ·? inset?&&<color> 表示这个基本属性可以出现也可以不出现

        合法值 -inset blue    -red

    ·{} <length>{} 表示这个基本属性可以出现的次数,最少几次,最多几次

        <length>{2,4}

        合法值  -1px 2px    -1px 2px 3px

    ·* <time>[,<time>]* 可以出现0次,1次或者多次

        合法值 -1s    -1s,4ms

    ·# <time># 需要出现一次或者多次,中间用逗号隔开

        合法值 -2s,4s

2.&&

用两个&符号(&&)分隔的两个或者多个值意味着它们必须出现,以任何顺序。在下面的例子中,这种语法列出两个值,通过 && 分隔。CSS 规则表明这两个值必须都要出现但是可能是任何顺序出现。

CSS

/* Component arrangement: all, in any order */ <'property'> = value1 && value2 /* Examples */ .example { property: value1 value2; } .example { property: value2 value1; }

1
2
3
4
5
6
/* Component arrangement: all, in any order */
<'property'> = value1 && value2
 
/* Examples */
.example { property: value1 value2; }
.example { property: value2 value1; }

组和符号-[]

bold[thin||<length>]
分组作用,大括号里可以看作一个整体

  • 合法值
    -bold thin
    -bold 2em

1.12.    代码组织

以组件为单位组织代码段。

制定一致的注释规范。

使用一致的空白符将代码分隔成块,这样利于扫描较大的文档。

如果使用了多个 CSS 文件,将其按照组件而非页面的形式分拆,因为页面会被重组,而组件只会被移动。

/*

 * Component section heading

 */

 

.element { ... }

 

 

/*

 * Component section heading

 *

 * Sometimes you need to include optionalcontext for the entire component. Do that up here if it's important enough.

 */

 

.element { ... }

 

/* Contextual sub-component ormodifer */

.element-heading { ... }

@规则语法

    @ 标识符 xxx;

    @ 标识符 xxx{}

    ·@media 主要用作响应式布局

    ·@keyframes 主要是用作描述CSS动画的一些中间步骤

    ·@font-face 引入外部字体

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; }

数量符号-无

<length>
基本元素只能出现一次

  • 合法值
    -1px
    -10em

1.13.    编辑器配置

将你的编辑器按照下面的配置进行设置,以避免常见的代码不一致和差异:

用两个空格代替制表符(soft-tab 即用空格代表 tab 符)。

保存文件时,删除尾部的空白符。

设置文件编码为 UTF-8。

在文件结尾添加一个空白行。


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

数量符号-+

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

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

5.[]

[] 包围的两个或者多个值意味着组件内部是一个单独的分组。在下面的例子中,这种语法列出了 3 个值,但是其中两个出现在 [] 内,所以它们是一个单独的分组。在 CSS 规则中有两个选择是可用的:value1value3 或者 value2value3

CSS

/* Component arrangement: a single grouping */ <'property'> = [ value1 | value2 ] value3 /* Examples */ .example { property: value1 value3; } .example { property: value2 value3; }

1
2
3
4
5
6
/* Component arrangement: a single grouping */
<'property'> = [ value1 | value2 ] value3
 
/* Examples */
.example { property: value1 value3; }
.example { property: value2 value3; }

数量符号-?

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

  • 合法值
    -inset blue
    -red

组合值叠加

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

数量符号-{}

<length>{2,4}
基本元素可以出现几次,最少出现几次,最多出现几次

  • 合法值
    -1px 2px
    -1px 2px 3px
  • 不合法值
    -1px

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; }

数量符号-*

<time>[,<time>]*

可以出现零次,一次或者多次

  • 合法值
    -1s
    -1s,4ms

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

数量符号-#

<time>#
需要出现一次或者多次,中间需要用逗号隔开

  • 合法值
    -2s,4s
  • 不合法值
    -1ms 2ms

3.

表示前置类型,一个词或一个组可以选择出现一次或者出现多次。在下面的例子中,value后面的 意味着 <value> 可以出现一次或者多次 – 不需要逗号分隔。

CSS

/* Component multiplier: one or more times */ <'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 times */
<'property'> = <value>
 
/* Examples */
.example { property: <value>; }
.example { property: <value> <value>; }
.example { property: <value> <value> <value>; }
...etc

属性值例子

  • 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

4.{ A }

{} 中包含一个单一的数字表示前置类型,一个词或一个组出现 A次。在下面的例子中,value的实例必须出现两次,以便使声明有效。

CSS

/* Component multiplier: occurs A times */ <'property'> = <value>{2} /* Examples */ .example { property: <value> <value>; }

1
2
3
4
5
/* Component multiplier: occurs A times */
<'property'> = <value>{2}
 
/* Examples */
.example { property: <value> <value>; }

@规则语法

@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 {}

5. {A, B}

{}中包含两个以逗号分隔的数字对表示前置类型,一个词或一个组出现至少 A 次,至多 B 次。在下面的例子中,value出现至少一次,至多三次用来定义这个属性,这些值不需要用逗号分隔。

CSS

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

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

@规则

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

6.{A,}

这里的 B 可以省略,代表至少出现一次,对于上限没有限制。在下面的例子中,value至少出现一次,但是也可以增加任意数量value。这些值不需要用逗号分隔。

CSS

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

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

# 表示前置类型,一个词或者一个组出现一次或者多次,用逗号分隔。在下面的例子中,可以使用一个或者多个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

8.!

一个组后面的 ! 表示这个组是必需的并且至少产生一个值。在下面的例子中,这种语法列出了 3 个值,通过 | 分隔。下面的 CSS 规则展示了三种可能的选择:

CSS

/* Component multiplier: required group, at least one value */ <'property'> = value1 [ value2 | value3 ]! /* Examples */ .example { property: value1 value2; } .example { property: value1 value3; }

1
2
3
4
5
6
/* 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'>这个属性作为例子。让我们来看看规范中是如何定义这个属性的:

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;
}

总结

如果你写 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

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

打赏译者

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

任选一种支付方式

图片 2 图片 3

1 赞 5 收藏 评论

关于作者:殊

图片 4

web前端,爱音乐,爱篮球,爱游戏,目标全栈. 个人主页 · 我的文章 · 10 ·    

图片 5

本文由星彩网app下载发布于前端技术,转载请注明出处:css编码规范,理解CSS属性值语法

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。