码云 HTML/CSS 2019-11-29

CSS值类型文档吐血推荐

今天码云笔记为大家带来一篇有关CSS值类型文档总结。

CSS值类型都是用“<>”括起来表示。本文类似参考文档，辛苦收集整理，内容有点长，建议大家CTRL + D收藏本站到收藏夹或者云笔记之类的。

一、索引

按照首字母排序。

二、详细

<angle>

角度值。支持负值。格式是数值+角度单位。

角度单位包括下面这4个，兼容性都是一样的IE9+支持。

deg 角度。

我们日常所说“原地旋转360度”，这里的“度”就是deg。一个完整的圆是360deg。

grad 百分度。

百分度是角的测量单位，常用于建筑或土木工程的角度测量，非相关专业人士用的不多。一个完整的圆是400grad。

rad 弧度。

弧度是一种用弧长与半径之比度量对应圆心角角度的方式。一个完整的圆的弧度是2π，因此，一个完整的圆的弧度大约是6.2832rad，而1rad则是180/π角度。

turn 圈数。

一个完整的圆是1圈，也就是1turn。同样1/4圆就是0.25turn。

下表是角度值各个单位转换示意（取自MDN）：

<angle-percentage>

表示CSS值的数据类型可以是<angle>类型，也可以是<percentage>类型。

如果是<percentage>类型，实际上会解析为<angle>类型，因此这种类型可以用在calc()表达式中。

目前还没有什么CSS属性的值符合上面的数据类型。

<attr-fallback>

fallback的概念在CSS变量那里就有所体现，例如下面代码中的#cd0000就是fallback兜底备份值：

.var-fallback {
    background-color: var(--color-zhangxinxu, #cd0000);
}

而<attr-fallback>是针对attr()表达式而言的。

大家对attr()表达式的印象应该都在content内容生成时候，那还是老语法：

attr( <attr-name> )

而这里所说<attr-fallback>是attr()表达式经过扩展后的全新的语法。

attr( <attr-name> <type-or-unit>? [ , <attr-fallback> ]? )

多了<type-or-unit>和<attr-fallback>这两个可选类型。

我们直接看一个例子，以便快速了解这两个可选参数是什么意思。

我们要实现这样一个功能，元素的宽度是根据设置的size属性值决定的，例如：

<button size="80">宽度80px</button>
<button size="120">宽度120px</button>
<button size="160">宽度160px</button>

则可以使用下面的CSS语法：

button[size] {
    width: attr(size px, auto);
}

其中，px就是<type-or-unit>，表示size值单位是px，如果没有这个参数，则以字符串显示size的属性值；auto就是<attr-fallback>类型。表示如果元素没有设置size属性值，或者设置的size值无法正确解析，就按照auto渲染。

But！目前尚未有浏览器支持该语法，遗憾。

<attr-name>

例如：

.attr-name::before {
  content: attr(data-mybj);
}

上面的data-mybj就是<attr-name>类型。

<basic-shape>

<basic-shape>类型用在clip-path，shape-outside以及offset-path属性中，表示基础形状。

例如：

clip-path: inset(22% 12% 15px 35px);
clip-path: circle(6rem at 12rem 8rem);
clip-path: ellipse(115px 55px at 50% 40%);
clip-path: polygon(50% 20%, 90% 80%, 10% 80%);
clip-path: path(evenodd, "M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z");

形状方法语法

inset() 定义内嵌矩形。可以指定圆角大小，生成圆角矩形形状。

inset( <shape-arg>{1,4} [round <border-radius>]? )

circle() 定义圆形。可以指定圆的半径大小和圆心位置。

circle( [<shape-radius>]? [at <position>]? )

ellipse() 定义椭圆。可以指定椭圆的半径大小和圆心位置。

ellipse( [<shape-radius>{2}]? [at <position>]? )

polygon() 定义多边形。可以指定填充规则是nonzero（默认值）还是evenodd，以及具体形状参数。

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

path() 定义路径。表示填充规则，就是SVG Path路径了，需要引号。

path( [<fill-rule>,]? <string>)

<blend-mode>

<blend-mode>是混合模式类型，用在background-blend-mode这mix-blend-mode这两个混合模式属性上。

包括下面这些具体的值：

normal 正常呈现，谁在上面显示谁。

multiply 正片叠底。模拟颜料的颜色混合。颜色会变得更暗。

screen 滤色。模拟自然光颜色混合。颜色会变得更亮一些。

overlay 叠加。底下颜色更深则走multiply模式，底下颜色更浅则走screen模式。

darken 深色。哪个颜色深显示哪个。

lighten 浅色。哪个颜色浅显示哪个。

color-dodge 颜色减淡。最终颜色是底色除以顶色的倒数的结果。

color-burn 颜色加深。最终颜色是反转底部颜色、将值除以顶部颜色并反转该值的结果。

hard-light 强光。上面的颜色更深的时候表现为multiply，上面颜色更淡的时候表现为screen。这个值和overlay值类似，只是上下层作用条件对换了。

soft-light 柔光。最终的颜色类似于hard-light强光，但更柔和。此混合模式的行为类似于强光。这种效果类似于将漫射的聚光灯照射在背景上。

difference 差值。最后的颜色是从较浅的颜色中减去两种颜色中较深的颜色的结果。黑色层无效，而白色层反转另一层的颜色。

exclusion 排除。类似difference，但比difference对比度较低。与difference一样，黑色层没有效果，而白色层反转另一层的颜色。

hue 色调。最终颜色具有顶部颜色的色调，而使用底部颜色的饱和度和亮度。

saturation 饱和度。最终颜色具有顶部颜色的饱和度，同时使用底部颜色的色调和亮度。纯灰色的背景，没有饱和度，就没有效果。

color 颜色。最终颜色具有顶部颜色的色调和饱和度，而使用底部颜色的亮度。该效果保留了灰度，并可用于给前景着色。

luminosity 亮度。最终颜色具有顶部颜色的亮度，而使用底部颜色的色调和饱和度。这种混合模式相当于color，但层是交换的。

<calc-product>

calc()方法中一种类型。例如：

.some-mybj-class {
    width: calc( 100px / 3 + 30px * 2);
}

其中：

100px / 3 + 30px * 2指的就是<calc-sum>；
100px / 3和30px * 2就是<calc-product>；
100px，3，30px，2就是<calc-value>。

完整语法如下：

<calc()>  = calc( <calc-sum> )
<min()>   = min( <calc-sum># )
<max()>   = max( <calc-sum># )
<clamp()> = clamp( <calc-sum>#{3} )
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> = <calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

<calc-sum>

calc()方法中一种类型，表示CSS数学计算函数内的整个计算表达式。

具体参见<calc-product>。

<calc-value>

calc()方法中一种类型，表示计算表达式中各个具体的计算项。

具体参见<calc-product>。

<color>

表示色值类型。

这里是概要：

颜色关键字

例如'red','blue'等。目前全部147个颜色关键字及对应颜色值参见这里。

transparent

transparent关键字，例如：color:transparent。

currentColor

颜色变量。

RGB颜色

语法包括：#RRGGBB[AA]，#RGB[A]，rgb[a](R,G,B[,A])以及rgb[a](R G B[/A])（CSS Colors Level 4中新增）。

HSL颜色

语法包括：hsl[a](H,S,L[,A])，以及CSS Colors Level 4中新增的hsl[a](H S L[/A])。

系统颜色

系统颜色关键字，不同操作系统以及不同操作系统主题下的具体表现的颜色是不一样的，因此不推荐在对外的产品中使用。

<color-stop>

<color-stop>属于CSS Images Module Level中的类型值，表示颜色断点。

多出现在CSS渐变中，例如：

.mybj-gradient {
    background-image: linear-gradient(red 20%, blue 80%);
}

其中red 20%以及blue 80%就是<color-stop>类型。

<color-stop-list>

<color-stop-list>表示多个<color-stop>的集合。

借用上面<color-stop>的例子，其中red 20%,blue 80%就属于<color-stop-list>。

<custom-ident>

<custom-ident>数据类型表示用户定义的用作标识符的任意字符串。它是区分大小写的，并且在不同的上下文中禁止某些值以防止歧义。

例如CSS animation动画自定义的动画名称。

.mybj-animation {
    animation: fadeIn .2s;
}

上面的fadeIn就是<custom-ident>数据类型。

类似的还有CSS Counter计数器，例如：

.mybj-counter {
    counter-reset: zhangxinxuCom;
}

禁止的值

为了防止冲突，并不是所有的字符串都属于<custom-ident>，例如CSS中的全局关键字值unset, initial, inherit以及none都是不允许的。还有disc, circle, square, decimal等list-style-type关键字值不允许，span也不允许，因为为何grid布局中grid-row-start，grid-row-end，grid-column-start，grid-column-end等属性冲突。

<dimension>

<dimension>表示尺寸类型。由数字和单位构成，例如666px。

<filter-function>

<filter-function>表示滤镜函数，被用在filter（本身应用滤镜）和backdrop-filter（本身不应用滤镜，后面元素应用）属性中。

该类型包括的值有：

blur() 模糊。
brightness() 亮度变化。
contrast() 对比度变化。
drop-shadow() 投影。
grayscale() 灰度。
hue-rotate() 色调旋转。
invert() 反相
opacity() 透明度变化。
saturate() 饱和度变化。
sepia() 褐色。

<flex>

<flex>数据类型表示grid容器可伸缩的长度。被用在grid-template-columns，grid-template-rows以及其他相关属性中。

该类型值格式固定，数字后面跟着单位fr。fr单位表示网格容器中剩余空间的份数。

例如：

1fr    /* 整数值 */
2.5fr  /* 小数值 */

关于Grid布局，可以参考我之前写的“CSS Grid网格布局实例教程”一文。

<frequency>

<frequency>类型表示频率，跟着下面两种单位：

Hz 赫兹。例如：0Hz,666Hz,23333Hz。

kHz 千赫兹。例如：0kHz,1.314kHz,5555kHz。

目前还没有任何CSS属性支持<frequency>类型。

<frequency-percentage>

<frequency-percentage>类型表示值既可以是<frequency>类型，又可以是<percentage>类型。

多用在calc()计算中。

<gradient>

<gradient>表示渐变类型。

目前有4类渐变类型。分别是：

线性渐变

例如：

.linear-gradient {
    background: linear-gradient(#f69d3c, #3f87a6);
}

径向渐变

例如：

.radial-gradient {
    background: radial-gradient(#f69d3c, #3f87a6);
}

重复渐变

例如：

.repeating-linear-gradient {
    background: repeating-linear-gradient(#f69d3c, #3f87a6 50px);
}

.repeating-radial-gradient {
    background: repeating-radial-gradient(#f69d3c, #3f87a6 50px);
}

锥形渐变

例如：

.linear-gradient {
    background: conic-gradient(#f69d3c, #3f87a6);
}

<ident>

<ident>是文本数据类型中CSS标识符，由一系列符合<ident token>语法的字符组成。CSS属性接受两类标识符：预定义的关键字和作者定义的标识符。

注意：<ident>不适用于属性值定义，应使用<custom ident>。<ident>为定义其他句法结构提供了便利。

目前没有CSS属性符合该类型。

<image>

CSS<image>数据类型表示二维图像。有两种图像：用<url>引用的普通图像和用<gradient>或element()生成的动态图像。附加的CSS图像函数包括image()（目前没有任何浏览器支持）,image-set()（根据屏幕指定不同图像）,以及cross-fade()。

<image>数据类型可以被多种CSS属性使用，例如：background-image，border-image，content，cursor，以及list-style-image。

<integer>

<integer>表示整数数值类型。用在column-count，counter-increment，grid-column，grid-row以及z-index等CSS属性中。

一些旧的浏览器有最大值限制，例如IE最大220-1，不过现在新的规则已经不在限定数值范围了。

下面这些值都是有效的：

12          正数
+123        正数带加号
-456        负数
0           零
+0          零，带加号
-0          零，带负号

下面这些值都是无效的：

12.0        <number>类型，非<integer>类型，尽管表示的数值是相等的。
12.         小数点是不允许的。
+---12      只允许一个 +/- 负号。
ten         字母不允许。
_5          住字符不允许。
\35         Unicode转义字符不允许，虽然代表的就是整数（这里是5）。
\4E94       不允许使用非阿拉伯数字，即使转义形式。（这里是五）。
3e4         不允许使用科学符号。

<length>

<length>类型表示距离值。这种类型被多个CSS属性使用，例如：width，height，margin，padding，border-width，font-size，text-shadow等。

该类型包含非常多种类的单位。

相对长度单位

文字相关长度

cap^实验

表示元素字体的“大写高度”（大写字母的名义高度）。

ch

字符 ‘0’（Unicode值是U+0030）所占据的宽度。

em

表示元素的计算字体大小。如果用于字体大小属性本身，则表示元素的继承字体大小。

ex

表示元素当前的x-height，也就是字母 ‘x’ 的高度。

ic^实验

相当于“水”（CJK语言体系中水，U+6C34）这个字在当前字体中渲染的尺寸。

lh^实验

相当于当前元素 line-height 属性的计算值，会转换为绝对长度单位。

rem

相对于根元素的字体大小。

rlh

相对于根元素的行高大小。

视区相关长度

vh

浏览器窗口视区1%的高度。

vw

浏览器窗口视区1%的宽度。

vi^实验

根元素的内联轴（默认水平）的方向上的1%的初始包含块大小。

vb^实验

根元素的块状轴（默认垂直）的方向上的1%的初始包含块大小。

vmin

等于 vh 和 vw 较小的值。

vmax

等于 vh 和 vw 较大的值。

绝对长度单位

px

对于屏幕显示，1像素通常表示一个设备像素（点）。然而，对于打印机和高分辨率屏幕，一个CSS像素意味着多个设备像素。1px=1英寸的1/96。

cm

厘米。1cm = 96px/2.54

mm

毫米。1mm = 1cm/10

Q^实验

1/4毫米，也就是1/40厘米。

in

英寸。1in = 2.54cm = 96px

pc

派卡。1pc = 12pt = 1in/6
pt

点。1pt = 1in/72

<length-percentage>

<length-percentage>类型表示既能是长度值，也能是百分比值。

例如宽度width属性，技能是长度值，也能是百分比值。

.some-mybj-cl {
    width: 200px;
}
.some-mybj-cl {
    width: 20%;
}

因此，下面的calc()计算也是合法的，可解析的：

.by-mybj {
    width: calc(100% - 200px);
}

<number>

<number>类型表示值可以是整数也可以是小数。

该类型属性职业支持幂计算形式，例如：

10e3        科学记数法
-3.4e-2     复杂科学记数法

<number-percentage>

<number-percentage>类型表示值既可以是<number>类型，又可以是<percentage>类型。

例如缩放：

.scale-mybj {
    transform: scale(1.5);
}
.scale-mybj{
    transform: scale(150%);
}

其中，scale()方法内的值就是<number-percentage>类型，1.5和150%作用一模一样。

<percentage>

<percentage>是百分比值数据类型，通常相对于父辈元素对象进行计算。支持的CSS属性有：width，height，margin，padding以及font-size等。

.percentage-mybj {
    margin-left: 23%;
}

<position>

CSS<position>数据类型表示用于设置相对于元素框的位置的二维坐标。常用于background-position和offset-anchor属性中。

<quote>

<quote>类型出现在CSS Generated Content Module规范文档中。表示引号，往往和语言相关。

语法如下：

<quote> = open-quote | close-quote | no-open-quote | no-close-quote

其中对应的CSS代码：

/* 为不同语言指定引号的表现 */
:lang(en) > q {quotes: '"' '"';}
:lang(no) > q {quotes: "«" "»";}
:lang(ch) > q {quotes: "“" "”";}

/* 在q标签的前后插入引号 */
q:before {content: open-quote;}
q:after  {content: close-quote;}

其中出现的open-quote和close-quote就是<quote>类型。

<ratio>

<ratio>数据类型用来描述媒体查询中的纵横比，表示两个无单位值之间的比例。

例如：

/* 横纵比大于16:9的时候... */
@media screen and (min-aspect-ratio: 16/9) { ... }

<resolution>

<resolution>数据类型用于描述媒体查询中的分辨率，表示输出设备的像素密度，即分辨率。

支持以下这些单位：

dpi

表示每英寸点数。屏幕通常每英寸包含72或96点，但打印文档的dpi通常要大得多。因为1英寸是2.54厘米，1dpi≈0.39 dpcm。IE9+浏览器支持。

dpcm

表示每厘米的点数。因为1英寸是2.54厘米，1dpcm≈2.54 dpi。IE9+浏览器支持。

dppx

表示每像素单位的点数。由于CSS in（英寸）与CSS px（像素）的1:96固定比率，1dppx相当于96dpi，对应于由 image-resolution 定义的CSS中显示的图像的默认分辨率。IE浏览器不支持，Edge12+支持。

x

dppx 的别名。

使用示意：

/* 如果每英寸像素点大于300... */
@media print and (min-resolution: 300dpi) { ... }

<shape-box>

<shape-box>数据类型源自CSS Shapes Module规范文档，与CSS shapes布局密切有关。

CSS shape-outside属性语法是这样的：

shape-outside: none | [ <basic-shape> || <shape-box> ] | <image>

<shape-box>（图形盒子）就是CSS2.1中的基本<box>模型的4种盒子，分别是margin-box，border-box，padding-box和content-box。要来指定文字环绕的时候是依照哪个盒子的边缘来计算的。

<shape-radius>

在CSS Shapes布局中，我们可以把形状指定为<basic-shape>，其中圆形和椭圆中指定半径的参数就是<shape-radius>类型，标记：

circle() = circle( [<shape-radius>]? [at <position>]? )
ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )

<shape-radius>类型本身语法如下：

<shape-radius> = <length> | <percentage> | closest-side | farthest-side

<side-or-corner>

<side-or-corner>表示边角类型，主要用在线性渐变中。

语法为：

<side-or-corner> = [left | right] || [top | bottom]

还可以使用to关键字指定方向，例如：

.mybj-gradient {
    background: linear-gradient(to right, deepskyblue, skyblue);
}

<string>

CSS<string>类型表示一系列的字符，字符数据类型在多个CSS属性中应用，如content，font-family以及quotes等。

示意：

.by-author::before {
   content: '如果发现本文盗用，欢迎反馈给zhangxinxu';
}

.some-font {
   font-family: 'Microsoft Yahei';
}

<time>

<time>是时间数据类型，多用在animation，transition以及相关CSS属性中。

支持两个单位，如下：

s

秒。

ms

毫秒。1秒=1000毫秒。

<time-percentage>

<time-percentage>数据类型，表示值是<time>类型或者<percentage>类型。

<timing-function>

<timing-function>指时间函数类型，目前应用就是在CSS animation动画中的贝斯尔函数曲线，例如：

.timing-function {
    animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

<toggle-value>

<toggle-value>数据类型表示切换数据类型，用在toggle()函数中（目前还没有浏览器支持），语法如下：

toggle( # )

关于toggle()函数

这里多嘴举两个例子介绍下这个未来很可能出现的新函数。

下面的示例通常使元素变为斜体，但如果元素位于斜体内容中，则使它们变为正常样式：

em { font-style: toggle(italic, normal); }

下面的示例循环嵌套列表的标记，以便最外层列表具有圆盘标记，但嵌套列表使用圆形、方形、长方体，然后在标记形状列表中重复此操作，再次使用disc开始（对于第五个列表深度）。

ul { list-style-type: toggle(disc, circle, square, box); }

<transform-function>

<transform-function>表示表示影响元素外观的转换的数据类型，例如旋转，缩放，移动等，用在transform属性中。

transform变换的底层都是矩阵计算，支持的<transform-function>值包括下面这些：

矩阵变换

matrix()

2D矩阵变换。

matrix3d()

3D矩阵变换。

透视

perspective()

设置用户与z=0平面之间的距离。

旋转

rotate()

围绕某一个点进行2d旋转。

rotate3d()

为了某一个点的3d空间旋转。

rotateX()

水平轴旋转。

rotateY()

垂直轴旋转。

rotateZ()

Z轴旋转。

缩放

scale()

2d缩放。

scale3d()

3d缩放。

scaleX()

水平轴缩放。

scaleY()

垂直则缩放。

scaleZ()

Z轴缩放。

倾斜

skew()

在二维平面上倾斜元素。

skewX()

水平方向倾斜。

skewY()

垂直方向倾斜。

位移

translate()

2d位移。

translate3d()

3d位移。

translateX()

水平轴位移。

translateY()

垂直则位移。

translateZ()

Z轴位移。

<type-or-unit>

<type-or-unit>表示类型或者单位，用在CSS attr()函数方法中。

例如：

<stock>
  <wood length="12"/>
  <wood length="5"/>
  <metal length="19"/>
  <wood length="4"/>
</stock>

stock > * {
    display: block;
    width: attr(length em); /* 默认是0 */
    height: 1em;
    border: solid thin;
    margin: 0.5em;
}

其中em就属于<type-or-unit>类型，用的是unit类型。

又例如：

<span class="attr-as-color" data-color="#34538b">color属性赋色</span>

.attr-as-color {
    color: attr(data-color color);
}

此时，attr()方法中的color就是<type-or-unit>类型，用的是type类型。

<type-or-unit>支持的完成类型如下：

string

属性值作为字符串。

color

属性值作为色值类型。

url

属性值作为URL地址，可以用在url()方法中。

interger

属性值作为整数。
.example {
    z-index: attr(data-z-index interger);
}
number

属性值作为数值。

length, angle, time, frequency

作为长度值，角度值，时间或者频率。

%

单位关键字

<length>， <angle>，<time>，和<frequency>单位中任意匹配的一个关键字，例如deg, em, ms等。

<url>

<url>指的是外部资源引用数据类型，常用在background-image，cursor以及list-style等CSS属性以及 font-face等CSS规则中。

例如：

header {
    background: url(mybj-banner.png) no-repeat top;
}

ul {
  list-style: square url(https://www.example com/mybj-ball.png);
}

<url-modifier>

<url-modifier>表示URL修饰符数据类型。

例如：

header {
    background: url(mybj-banner.png xxx) no-repeat top;
}

后面的xxx就是URL修饰符，不过我查了目前所有的模块规范文档，对了这个URL修饰符并没有定义。

This specification does not define any <url-modifier>s, but other specs may do so.

规则各自为政有时候也有不好的地方。

<zero>

<zero>数据类型表示0，就是如字面看到的显示的值是0的数字。仅计算为值为0的<number>的表达式（例如calc(0)）与<zero>不匹配；只有<number-token>才匹配。

结语

还有不少遗漏，欢迎补充。感谢阅读，欢迎分享，欢迎收藏！

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：
本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创，仅限用于学习和研究。
码云笔记 » CSS值类型文档吐血推荐

码云会员

分享到：