两个基本属性必须出现但与顺序无关,4.     

作者: 前端  发布:2019-11-05

精晓CSS属性值语法

2016/08/12 · CSS · 属性值

本文由 伯乐在线 - 殊 翻译,艾凌风 校稿。未经许可,禁绝转发!
立陶宛共和国(Republic of Lithuania卡塔 尔(阿拉伯语:قطر‎语出处: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 规范。

9159.com 1

概念

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

1.1.  语法

1.        用五个空格来替代制表符(tab卡塔 尔(阿拉伯语:قطر‎ -- 那是独步天下能确认保证在装有条件下得到同等表现的点子。

2.        为采用器分组时,将独自的选拔器单独放在大器晚成行。

3.        为了代码的易读性,在各类表明块的左花括号前增加四个空格。

4.        注脚块的右花括号应当单独成行。

5.        每条注脚语句的 : 后应当插入三个空格。

6.        为了博取更可信赖的错误报告,每条证明都应该吞并生机勃勃行。

7.        全数宣称语句都应有以分行结尾。最后一条申明语句前边的分集团是可选的,但是,倘诺轻便那几个分号,你的代码恐怕更易出错。

8.        对于以逗号分隔的属性值,各种逗号前面都应当插入二个空格(比如,box-shadow卡塔 尔(英语:State of Qatar)。

9.        不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部9159.com ,的逗号后边插入空格。那样方便从八个属性值(既加逗号也加空格卡塔尔国中差距八个颜色值(只加逗号,不加空格卡塔尔国。

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 卡塔尔是生机勃勃种用来汇报Computer语言语法的号子集。它的规划是分明的,所以对于如何表示语言那上边不设有冲突或歧义。 最近大范围使用的是巴科斯范式的恢弘和编写翻译版本,富含扩大巴科斯范式( 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 中得以被三个真正的颜色值替换,使用一个重视词,三个恢弘的显要词,二个 奥德赛GB 颜色值,奥迪Q5GBA 值,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.  简写情势的质量评释

在急需出示地设置全部值的意况下,应当尽量节制使用简写情势的质量Taobao开店教程注脚。布衣蔬食的滥用简写属性表明的事态如下:

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>...卡塔 尔(英语:State of Qatar)

             -别的品种(<'padding-width'>,<color-stop>...卡塔 尔(阿拉伯语:قطر‎

    ·符号(/,)

    ·inherit,initial

组合值选择符

组合值能够透过上面各类方式之风流倜傥被用到属性值选取符中。

组合符号-||

underline||overline||line-through||blink
足足出现一个逐项未有提到

  • 合法值
    -underline
    -overline underline

1.10.    class 命名

class 名称中只可以出现小写字符和破折号(dashe卡塔 尔(英语:State of Qatar)(不是下划线,亦非驼峰命名法卡塔尔。破折号应当用于相关 class 的命名(相近于命名空间卡塔 尔(阿拉伯语:قطر‎(比方,.btn 和 .btn-danger卡塔 尔(英语:State of Qatar)。

制止过度放肆的简写。.btn 代表 button,然而 .s 无法发挥任何意思。

class 名称应当尽量短,而且意义综上说述。

运用有意义的名称。使用有团体的或指标显而易见的名目,不要接收表现格局(presentational卡塔尔的名号。

依附近些日子的父 class 或基本(base卡塔 尔(英语:State of Qatar) class 作为新 class 的前缀。

使用 .js-* class 来标记作为(与体制相对卡塔 尔(英语:State of Qatar),并且毫不将这一个 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 约束在新近的父成分内(相当于儿孙接受器卡塔 尔(英语:State of Qatar)(比如,不采纳带前缀的 class 时 -- 前缀相符于命名空间卡塔 尔(英语:State of Qatar)。

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

* 表示前置类型,三个词或二个组现身零次要么一再。在下边的例证中,第3个值被放在[]里头和三个’,’在同盟。放在这里大器晚成组前面包车型地铁 * 意味着 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

打赏补助自个儿翻译越来越多好作品,谢谢!

打赏译者

打赏扶持小编翻译更加的多好文章,谢谢!

任选生机勃勃种支付办法

9159.com 2 9159.com 3

1 赞 5 收藏 评论

至于作者:殊

9159.com 4

web前端,爱音乐,爱篮球,爱游戏,目的全栈. 个人主页 · 笔者的稿子 · 10 ·    

9159.com 5

本文由9159.com发布于前端,转载请注明出处:两个基本属性必须出现但与顺序无关,4.     

关键词:

上一篇:没有了
下一篇:没有了