值

值是CSS属性的有效值集以及CSS的许多其他部分的有效语法中的一个或多个。

值的定义语法

值的定义语法指的是规范定义某个属性具有的值所使用的语法。

我们在学习CSS的时候通常会看到类似这样的写法
<bg-image> = <image> | none

<bg-position> =  [ left | center | right | top | bottom | <length-percentage> ]
|
  [ left | center | right | <length-percentage> ]
  [ top | center | bottom | <length-percentage> ]
|
  [ center | [ left | right ] <length-percentage>? ] &&
  [ center | [ top | bottom ] <length-percentage>? ]

这种东西我们称之为值的定义语法。下面就介绍这种东西如何理解。首先我们要知道有哪些部分组成根据上面的示例我们可以看到有以下部分组成、=、[]、|、&&、?、其他关键字。
下面会解释这里就不赘述。
其余的[]、|、&&、?这些被称为组合器用于组合多个值或类型。我们也可以在正则表达式中看到他们的意义与正则中的意义类似。

组合器

1. 并列并列组件意味着所有组件都必须按照给定的顺序发生。例如a b表示某个属性的值必须是两个且这两个值的顺序是a在前b在后。
2. &&&& 分隔两个或多个组件所有组件必须以任何顺序出现。
3. |||| 分隔两个或多个选项其中一个或更多选项必须以任何顺序出现。
4. || 分隔两个或多个备选方案必须恰好出现其中一个。
5. [][] 用于分组。

优先级并列 > && > || > |

量词

量词表示个值出现的次数上面的示例中?就属于量词除此之外还有其他量词。

• • * 表示前面的类型、单词或组出现零次或多次。
• • 表示前面的类型、单词或组出现一次或多次
• ? 表示前面的类型、单词或组是可选的出现零次或一次。
• {A} ｛A｝中的单个数字表示前面的类型、单词或组出现A次。
• {A,B} ｛AB｝中逗号分隔的一对数字表示前面的类型、单词或组至少出现A次最多出现B次。可以省略B｛A｝以表示必须至少有A个重复重复次数没有上限。
• # # 表示前面的类型、单词或组出现一次或多次由逗号标记分隔可以选择用空格和/或注释包围。它可以可选地后跟上面的花括号形式以精确地指示重复发生的次数
• ! ! 表示该组是必需的并且必须至少产生一个值即使组中项目的语法允许省略整个内容也不能省略至少一个组件值。

值的类型

1. 关键字init、inherit、unset。所有属性都接受CSS范围的关键字这些关键字表示所有CSS属性通用的值计算。除了全局关键字意外还包括各个属性定义的关键字。
2. 基本数据类型出现在<和>之间例如<length>、<persentage>等。对于数字数据类型此类型表示法可以使用下面描述的带括号的范围表示法来注释任何范围限制。
3. 与具有相同名称的属性具有相同值范围的类型例如<‘border-width’>、<‘background-attachment’>等。在这种情况下类型名称是括号之间的属性名称用引号括起来。其值是对应属性值的集合。
4. 与属性同名的非终端。在这种情况下非终端名称出现在<和>之间如<spacinglimit>中所示。注意＜border-width＞和＜’border-width’＞之间的区别后者定义为border-widt属性的值前者需要在其他地方进行显式扩展。非终端的定义通常位于规范中第一次出现的附近。

基本数据类型

文本类型

文本数据类型包括各种关键字和标识符以及字符串＜string＞和URL<url>

<string>字符串由＜string＞表示由双引号或单引号分隔的一系列字符组成
<url>url()函数表示法表示url它是指向资源的指针
<image>＜image＞值类型表示2D图像。它可以是url引用或颜色渐变。其语法为<image> = <url> || <gradient>
<gradient> = <linear-gradient()>|<repeating-linear-gradient()>|<radial-gradient()>|<repeating-radial-gradient()>。通过定义渐变线的起点和终点根据渐变类型渐变线在几何上可以是直线、射线或螺旋线然后指定沿此线的点的颜色可以指定渐变。颜色被平滑地混合以填充线的其余部分然后每种类型的渐变定义如何使用渐变线的颜色来生成实际的渐变。

<linear-gradient()>linear-gradient([angel | to <side-or-corner>]?,<color-stop-list>)通过指定一条直线渐变线然后沿该直线放置若干颜色即可创建线性渐变。图像是通过创建一个无限画布并用垂直于渐变线的线绘制而成的绘制的线的颜色是两条线相交处的渐变线的颜色。这会在指定方向上从每种颜色到下一种颜色产生平滑的渐变。

radial-gradient([<ending-shape> || <size>]? [at position]?,<color-stop-list>)通过指示渐变的中心0%椭圆所在的位置和结束形状100%椭圆的大小和形状来指定径向渐变。颜色停止以列表形式给出就像linear-gradient一样。从渐变中心开始朝着可能超过结束形状前进将绘制均匀缩放的同心椭圆并根据指定的颜色停止点进行着色。

数字类型

属性可以将数值限制在一定范围内。如果值超出允许的范围则除非另有指定否则声明无效必须忽略。

范围限制可以在数字类型表示法中使用CSS括号内的范围表示法-[minmax]-在识别关键字之后的尖括号内进行注释表示最小值和最大值之间的闭合范围。例如<integer[0,10]>表示0和10之间的整数包括0和10而<angle[0,180deg]>表示0deg和180deg之间的角度以任何单位表示。

<integer>整数值用<Integer>表示。
<number>数值用<Number>表示表示实数可能带有分数成分。
<dimension>通用术语“尺寸”是指一个带有单位的数字。
<percentage>百分比值用<percent>表示表示另一个参考值的某个分数。百分比值总是相对于另一个数量例如长度。每个允许百分比的属性还定义百分比所指的数量。该数量可以是同一元素的另一个属性的值、祖先元素的属性值、格式化上下文的度量值例如包含块的宽度或其他值。
<length>长度是指距离测量值在属性定义中用<length>表示。长度是尺寸。
<angle>表示角度单位
<time>表示时间单位
<color>表示颜色其值为十六进制、颜色名、rgb、rgba、HSL、HSLA
<image>表示图像
<position><position>值指定定位区域例如背景定位区域内对象区域例如背景图像的位置。其值参考background-image的值。

单位

css中每一个属性都有其值而有些值需要单位来进行度量例如width:300px;这个px就是单位单位可以让浏览器使用对应的衡量标准进行渲染。

长度单位

在css中长度单位是使用最频繁的单位用来设置元素某一维度上的长度。长度单位又分为绝对长度单位和相对长度单位。

绝对长度单位

绝对长度单位彼此之间是固定的并固定在一些物理测量值上。

标识	描述
cm	厘米1cm = 96px/2.54
mm	毫米1mm = 1cm / 10
Q	四分之一毫米1Q = 1cm / 40
in	英寸1in = 2.54cm = 96px
pc	1pc = 1in / 16
pt	点数1pt = 11in / 72
px	像素1px = 1in / 96

所有的绝对长度单位都是兼容的px是它们的规范单位。

相对长度单位

相对长度单位指定相对于另一长度的长度。使用相对单位的样式表可以更容易地从一个输出环境缩放到另一个输出。

标识	描述
em	相对于元素的字体大小
ex	相对于元素字体的x高度
ch	相对于元素字体中“0”ZEROU+0030字形的字符前进
rem	相对于根元素的字体大小
vw	相对于视口宽度的1%
vh	相对于视口高度的1%
vmin	相对于视口较小尺寸的1%
vmax	相对于视口较大尺寸的1%

子元素不继承为其父元素指定的相对值它们继承计算的值。

角度单位

角度单位用来表示物体旋转的大小。

标识	描述
deg	度。整圈有360度
grad	Gradians也称为“gons”或“grades”。在一个完整的圆圈里有400grad。
rad	弧度。整圈有2π弧度。
turn	转1转是一圈

所有角度单位都是兼容的deg是它们的标准单位。

时间单位

时间单位常用的有s和ms。
所有时间单位都是兼容的s是它们的规范单位。

标识	描述
s	秒
ms	毫秒1s = 1000ms