值
值是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>? ]
这种东西我们称之为值的定义语法。下面就介绍这种东西如何理解。首先我们要知道有哪些部分组成,根据上面的示例我们可以看到,有以下部分组成,、=、[]、|、&&、?、其他关键字。
<bg-position>下面会解释,这里就不赘述。
其余的[]、|、&&、?这些被称为组合器,用于组合多个值或类型。我们也可以在正则表达式中看到他们的意义与正则中的意义类似。
组合器
- 并列:并列组件意味着所有组件都必须按照给定的顺序发生。例如:a b,表示某个属性的值必须是两个且这两个值的顺序是a在前,b在后。
- &&:&& 分隔两个或多个组件,所有组件必须以任何顺序出现。
- ||:|| 分隔两个或多个选项:其中一个或更多选项必须以任何顺序出现。
- |:| 分隔两个或多个备选方案:必须恰好出现其中一个。
- []:[] 用于分组。
优先级:并列 > && > || > |
量词
量词表示个值出现的次数,上面的示例中?就属于量词,除此之外还有其他量词。
-
- :* 表示前面的类型、单词或组出现零次或多次。
-
- :表示前面的类型、单词或组出现一次或多次
- ? :表示前面的类型、单词或组是可选的(出现零次或一次)。
- {A} :{A}中的单个数字表示前面的类型、单词或组出现A次。
- {A,B} :{A,B}中逗号分隔的一对数字表示前面的类型、单词或组至少出现A次,最多出现B次。可以省略B({A,}),以表示必须至少有A个重复,重复次数没有上限。
- # :# 表示前面的类型、单词或组出现一次或多次,由逗号标记分隔(可以选择用空格和/或注释包围)。它可以可选地后跟上面的花括号形式,以精确地指示重复发生的次数,
- ! :! 表示该组是必需的,并且必须至少产生一个值;即使组中项目的语法允许省略整个内容,也不能省略至少一个组件值。
值的类型
- 关键字:init、inherit、unset。所有属性都接受CSS范围的关键字,这些关键字表示所有CSS属性通用的值计算。除了全局关键字意外还包括各个属性定义的关键字。
- 基本数据类型,出现在<和>之间(例如,<length>、<persentage>等)。对于数字数据类型,此类型表示法可以使用下面描述的带括号的范围表示法来注释任何范围限制。
- 与具有相同名称的属性具有相同值范围的类型(例如,<‘border-width’>、<‘background-attachment’>等)。在这种情况下,类型名称是括号之间的属性名称(用引号括起来)。其值是对应属性值的集合。
- 与属性同名的非终端。在这种情况下,非终端名称出现在<和>之间,如<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括号内的范围表示法-[min,max]-在识别关键字之后的尖括号内进行注释,表示最小值和最大值之间的闭合范围。例如,<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”(ZERO,U+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 |