非常教程

CSS参考手册

值和单位 | Values & Units

值定义语法 | Value definition syntax

CSS值定义语法(一种形式语法)用于为CSS属性或函数定义一组有效值。除了这个语法之外,有效值的集合还可以被语义约束进一步限制(例如,严格限制一个数字为正数)。

定义语法描述允许哪些值以及它们之间的交互。一个组件可以是一个关键字,作为字面值的一些字符,或一个给定的CSS数据类型或另一个CSS属性的值。

组件值类型

关键字

通用关键字

具有预定义的关键字按字面显示,不带引号。例如:autosmallerease-in

inheritinitialunset的具体案例

所有的CSS属性都接受关键字inheritinitialunset,而且这些关键字是在CSS中定义的。它们不在值定义中显示,并且被隐式定义。

字面值

在CSS中,几个字符可以单独出现,如斜杠(' /')或逗号(' ,'),并在属性定义中用于分隔其部分。逗号经常用于枚举枚举中的值或类似数学函数中的参数; 斜线通常将语义上不同的值的部分分开,但是具有相同的语法。通常,斜杠用于简写属性;分离属于同一类型但属于不同属性的组件。

两个符号都以字面意义出现在数值定义中。

数据类型

基本数据类型

某些类型的数据在整个CSS中使用,并为规范中的所有值定义一次。它们就是所谓的基本数据类型,它们的命名用'<'和'>'包围,如: <angle><string>,...

非终端数据类型

不常见的数据类型称为非终端数据类型,也被' <'和' >' 包围。

非终端数据类型有两种:

  • 数据类型共享相同的属性名称,放在引号之间。在这种情况下,数据类型与属性共享相同的一组值。它们通常用于简写(shorthand)属性的定义。
  • 数据类型不共享同一个属性名称。这些数据类型非常接近基本的数据类型。它们只与定义的物理位置的基本数据类型不同。在这种情况下,定义通常在物理上非常接近于使用它们的属性的定义。

组件值组合因子

括号

括号中包括几个实体,组合因子(combinators)和乘数(multipliers),然后将它们转换为单个组件。它们用于将组件绕过优先规则

bold [ thin && <length> ]

此示例匹配以下值:

  • bold thin 2vh
  • bold 0 thin
  • bold thin 3.5em

但不是:

  • thin bold 3embold与括号中定义的组件并列,它必须出现在它之前。并置将几个关键字,文字或数据类型放在一起,仅由一个或多个空格分隔,称为并列(juxtaposition)。所有并置的组件都是必需的,并且应该按照精确的顺序出现 .bold <length>,thinThis示例匹配以下值:
  • bold 1em, thin
  • bold 0, thin
  • bold 2.5cm, thin
  • bold 3vh, thin

但不是:

  • thin 1em, bold,因为实体必须按照明确的顺序排列。
  • bold 1em thin,因为实体是强制性的;逗号(文字)必须存在。
  • bold 0.5ms, thin,作为ms值不是<length>

双“&”符号

双&&&分隔两个或更多的组件,它意味着所有这些实体是强制性的,但可以以任何顺序出现

bold && <length>

此示例匹配以下值:

  • bold 1em
  • bold 0
  • 2.5cm bold
  • 3vh bold

但不是:

  • bold,因为两个组件都必须出现在值中。
  • bold 1em bold,因为这两个组件只能出现一次。

注:并列优先于双&号,也就是说bold thin && <length>是相当于[ bold thin ] && <length>的。它描述bold thin <length><length> bold thin但不是bold <length> thin

双杠

双杆||分离两种或多种组件,它意味着所有实体都是可选的:它们中的至少一个必须存在,并且它们可以以任何顺序出现。通常用于定义简写属性的不同值。

<'border-width'> || <'border-style'> || <'border-color'>

此示例匹配以下值:

  • 1em solid blue
  • blue 1em
  • solid 1px yellow

但不是:

  • blue yellow,作为组件,最多只能出现一次。
  • bold,因为它不是允许任何实体的值的关键字。

注意:&&号优先于||,也就是说:bold || thin && <length>是相当于bold || [ thin && <length> ]的。该规则描述boldthin <length>bold thin <length>,或thin <length> bold为粗体而不是<length> bold thin为粗体,如果没有被省略,则它必须早于或在整个thin && <length>组件后放置。

单杆

单杆|分隔两个以上单位,它意味着所有的实体是排斥的选项:即这些选项之一必须存在。这通常用于分隔可能的关键字列表。

<percentage> | <length> | left | center | right | top | bottom

此示例匹配以下值:

  • 3%
  • 0
  • 3.5em
  • left
  • center
  • right
  • top
  • bottom

但不是:

  • center 3%因为必须有且只有一个组件。
  • 3em 4.5em作为一个组件至多只能出现一次。

注意:||优先于|,也就是说bold | thin || <length>是相当于bold | [ thin || <length> ]的。它描述boldthin<length><length> thin,或thin <length>但不是bold <length>因为只能从|组合因子中选择一个实体。

组件值乘法器

乘数(multiplier)是表示前一个实体可以重复多少次的符号。没有乘数,一个实体必须恰好出现一次。

请注意,乘数不能被添加,并且优先于组合因子。

星号(*

星号乘数(*)表示该实体可能会出现零次,一次或数次

bold smaller*

此示例匹配以下值:

  • bold
  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller等等。

但不是:

  • smaller,因为bold是并列的,所以必须出现在任何关键字smaller之前。Plus (+加乘数表示实体可能出现一次或多次。bold smaller+ 此示例匹配下列值:
  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller等等。

但不是:

  • bold,因为smaller必须至少出现一次。
  • smaller,因为bold是并列的,必须出现在任何smaller关键词之前。

问号(?

问号乘数(question mark multiplier)表明该实体是可选的,必须出现零次或一次

bold smaller?

此示例匹配以下值:

  • bold
  • bold smaller

但不是:

  • bold smaller smaller,因为smaller最多只能出现一次。
  • smaller,因为bold是并列的,必须出现在任何smaller关键词之前。

花括号({ }

花括号乘数(curly multiplier),包括由逗号分隔开的两个整数A和B,表示该实体必须出现至少A次且至多B次

bold smaller{1,3}

此示例匹配以下值:

  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller

但不是:

  • bold,因为smaller必须至少出现一次。
  • bold smaller smaller smaller smaller,因为smaller最多只能出现三次。
  • smaller,因为bold是并列的,必须出现在任何smaller关键词之前

哈希标记(#

哈希标记乘数(hash mark multiplier)表示该实体可以被重复一次或更多次(例如,+乘数),但是每次出现时由逗号(',')隔开。

bold smaller#

此示例匹配以下值:

  • bold smaller
  • bold smaller, smaller
  • bold smaller, smaller, smaller等等。

但不是:

  • bold,因为smaller必须至少出现一次。
  • bold smaller smaller smaller因为smaller之间必须用逗号分隔。
  • smaller,因为bold是并列的,必须出现在任何smaller关键词之前。

感叹号(!

一组符号之后的感叹号乘数(exclamation multiplier)表示该组是必需的,并且必须产生至少一个值; 即使组内项目的语法可以允许省略整个内容,也至少需要有一个组件值。

[ bold? smaller? ]!

此示例匹配以下值:

  • bold
  • smaller
  • bold smaller

但不是:

  • 既不是bold也不是smaller,因为其中一个必须出现。
  • smaller bold,因为bold被并列,必须出现在smaller关键词之前。
  • bold smaller bold,如boldsmaller可能只出现一次。

Sign

Name

Description

Example

| Combinators |

|| ——| Juxtaposition| ,组件是强制性的,应按照顺序出现,如 |solid <length> |

| && |—— |Double ampersand|, 组件是强制性的,但可能以任何顺序出现,如| <length> && <string> |

| || | ——|Double bar|, 至少有一个组件必须出现,并且它们可以以任何顺序出现,如| <'border-image-outset'> || <'border-image-slice'> |

| | |—— |Single bar| ,其中一个组件必须存在,如| smaller | small | normal | big | bigger |

| |——| Brackets| ——将组件绕过优先规则,如| bold thin && <length> |

| Multipliers|

| ​ |——| No multiplier | ,有且仅有一次 ,如| solid |

| * |—— |Asterisk| ,0或更多次,如| bold smaller* |

| + |—— |Plus sign|,出现1次或更多次,如| bold smaller+ |

| ?|—— | Question mark| ,出现0或1次(可选),如| bold smaller?|

| {A,B} |——| Curly braces|,出现 至少A次,最多B次,如| bold smaller{1,3} |

| #|——| Hash mark| ,出现1次或更多次,但相同字符之间用逗号(',')分隔,如| bold smaller# |

| !| ——|Exclamation point| ,组中必须产生至少1个值,如| bold? smaller? ! |

规范

Specification

Status

Comment

CSS Values and Units Module Level 3The definition of 'Value definition syntax' in that specification.

Candidate Recommendation

Adds the hash mark multiplier.

CSS Level 2 (Revision 1)The definition of 'Value definition syntax' in that specification.

Recommendation

Adds the double ampersand combinator.

CSS Level 1The definition of 'Value definition syntax' in that specification.

Recommendation

Initial definition

CSS

层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS目录

1.动画和转换 | Animations & Transitions
2.背景和边框 | Backgrounds & Borders
3.基本框模型 | Basic Box Model
4.基本用户界面 | Basic User Interface
5.框对齐 | Box Alignment
6. 级联和继承 | Cascading & Inheritance
7.颜色 | Color
8. 合成与混合 | Compositing & Blending
9.条件和规则 | Conditional Rules
10.计数器样式 | Counter Styles
11.设备适配 | Device Adaptation
12.扩展 | Extensions
13.滤镜效果 | Filter Effects
14.灵活的框布局 | Flexible Box Layout
15.字体 | Fonts
16.片段模块 | Fragmentation
17.全屏 API | Fullscreen API
18. 生成内容 | Generated Content
19.网格布局 | Grid Layout
20.图像值 | Image Values
21.初始线格局 | Inline Layout
22.列表和计数器 | Lists & Counters
23.逻辑属性 | Logical Properties
24.面具 | Masking
25.媒体查询 | Media Queries
26.杂项 | Miscellaneous
27.Miscellaneous Level 1
28.Miscellaneous Level 2
29.运动路径 | Motion Path
30. 多列布局 | Multi-column Layout
31.命名空间 | Namespaces
32.项目模型 | Object Model View
33.网页媒体 | Paged Media
34.定位布局 | Positioned Layout
35.伪元素 | Pseudo-
36.节奏大小 | Rhythmic Sizing
37. Ruby布局 | Ruby Layout
38.可缩放矢量图形 | Scalable Vector Graphics
39.滚动快照 | Scroll Snap
40.选择 | Selectors
41.形状 | Shapes
42.文本 | Text
43.文字装饰 | Text Decoration
44.变换 | Transforms
45.值和单位 | Values & Units
46.变量 | Variables
47.写入模型 | Writing Modes
48.CSS 教程
49.CSS 创建
50.CSS Id 和 Class选择器
51.CSS 简介
52.CSS 盒子模型
53.CSS Table(表格)
54.CSS 列表样式(ul)
55.CSS 链接(link)
56.CSS Fonts(字体)
57.CSS Text(文本)
58.CSS Backgrounds(背景)
59.CSS Display(显示) 与 Visibility(可见性)
60.CSS 尺寸 (Dimension)
61.CSS 分组和嵌套
62.CSS 轮廓(outline)属性
63.CSS Border(边框)
64.CSS 图像透明/不透明
65.CSS 导航栏
66.CSS 伪元素
67.CSS 伪类
68.CSS Float(浮动)
69.CSS Position(定位)
70.CSS 总结
71.CSS 属性选择器
72.CSS 媒体类型
73.CSS 图像拼合技术
74.CSS 实例
75.CSS 组合选择符
76.响应式 Web 设计 – 框架
77.响应式 Web 设计 – 视频(Video)
78.CSS 提示工具(Tooltip)
79.CSS 布局 Overflow
80.CSS 计数器
81.CSS 表单