代码干燥计划

# 值和单位

单位可以影响颜色，距离，尺寸等一系列属性。

# 关键字、字符串值和其他文本值

# 关键字

有些值用一个词表示，这个词就叫做关键字。 none 就是一个很常见的关键字。

# 全局关键字

CSS3 定义了几个全局关键字，所有属性都能使用：inherit，initial，unset，

# inherit

将属性值设置为和父元素同一属性的值一样。使用此关键字表示强制继承，即便属性默认是不继承的。

比如，设置 a {color: inherit;} 可以将链接字体颜色设置为父元素的字体颜色。如果想让 span 元素仅继承父元素的边框颜色可以设置为 span { border-color: inherit;}

# initial

把属性的值设为预定义的初始值，相当于 “重设” 值。

比如，font-weight 属性的默认值为 normal 。因此，font-weight: initial 这样声明跟 font-weight: normal 这样声明是一个效果。

# unset

关键字 unset 是 inherit 和 initial 的通用替身。

如果一个属性默认是继承的，unset 的效果跟 inherit 关键词的效果相同。

如果一个属性默认是不继承的，unset 的效果则跟 initial 关键词的效果相同。

以上三个全局关键字可以在任何属性上使用，但有一个特殊的属性: all ，它的值只接受全局关键字。

a {
  all: inherit | initial | unset;
}
1
2
3

all 属性用于指代全部属性，除 direction 、unicode-bidi 以外。因此，如果你在一个元素中这样声明 all: inherit ，意思是除了 direction、unicode-bidi 属性外，全部属性的值均继承自它们的父元素。

# 字符串值 <string>

属性的字符串值放在英文状态的单引号或双引号内。

字符串值中如果要嵌套英文引号，可以使用与外层不同的引号，要使用相同的引号则需要使用反斜线 (\) 转义。其他比如中文引号可直接使用。

如果字符串值有换行，可以使用转义换行符，CSS会去掉换行符，就像从未换行一样。

 "This is the right place \
 for a newline."

 "This is the right place for a newline."
1
2
3
4

以上两个字符串值在 CSS 看来是一样的。

如果真的想插入一个换行符，需要在换行的地方使用 Unicode 字符 \A

"This is a better place \Afor a newline."
1

# URL <url>

比如在导入外部样式表的 @import url() 中使用

引用 URL 的一般格式是：

绝对路径：url(protocol://server/pathname)

相对路径：url(pathname) 相对于当前样式表的路径。

注意，url() 中 url 和括号之间不能有空格，否则无效。

# 图像 <image>

通常来说，<image> 值多数情况指的就是 <url> 值，但是 <image> 值有三种可能性：

  • <url> 指图像地址

  • <image-set> 指一系列图像，根据值中的条件选择。行为接近 <picture> 元素的 srcset 属性。

  • <gradient> 指线性渐变或径向渐变，可以是单个或重复的。

# 标识符 <identifier>

指的是用户自定义的某种标识符，最常见的有生成的列表序号，动画名等，区分大小写，如果一个属性既接收标识符又接受关键字，切记不能将标识符定义成和关键字一样的名字。

# 数字和百分数

他们是很多其他类型值的基础

# 整数 <integer>

前面可以有 + 或 - 号。

div {
  z-index: 3;
}
1
2
3

# 数字 <number>

整数或小数，前面也可以有 + 或 - 号。

p {
  opacity: 0.5;
}
1
2
3

# 百分数 <percentage>

div {
  padding: 10%;
}
1
2
3

# 弹性值

弹性值（fraction value 或 flex value） 是 <number> 后跟 fr，比如 1fr。此概念由栅格布局引入，用于把布局中不受限制的空间分成几部分。

# 距离

长度单位分为绝对长度单位和相对长度单位

# 绝对长度单位

  • in 英寸，几乎不用
  • cm 厘米，几乎不用
  • mm 毫米，几乎不用
  • q 四分之一毫米，几乎不用
  • pt 点（point），几乎不用
  • pc 派卡（Pica），几乎不用
  • px 像素，

# 像素长度

像素指的是屏幕上的一个个像素点。

# 分辨率单位

随着媒体查询和响应式设计的出现，为了描述显示器的分辨率，出现了三个新单位：

  • dpi 点每英寸，在长度为 1 英寸的范围内能显示的点数。
  • dpcm 点每厘米，每厘米能显示的点数
  • dppx 点每像素，每个 px 单位能显示的点数。

# 相对长度单位

相当于其他东西的长度而言。

# em 和 ex 单位

1em 等于元素的 font-size 大小，如果元素没有设置字体大小，则等于父元素字体大小。

ex 指所用的字体中小写字母 x 的高度。

# rem 单位

与 em 相对于当前字体大小不同的是，rem 等于根元素（<html>）字体大小

# ch 单位

CSS 3 新增单位，基本可以理解为 “一个字符”。 等于渲染时所用字体 0 字形的进距。

# 视口相关单位

CSS 3 还新增了3个与视口有关的单位，根据可显示内容的视口尺寸计算：

  • vw 视口宽度单位，视口总宽度为 100vw
  • vh 视口高度单位，视口总高度为 100vh
  • vmin 取视口宽度和高度中较小的百分之一
  • vmax 取视口宽度和高度较大的那个单位的 百分之一

# 计算值

CSS 提供 calc() 方法可用于计算一个值。允许使用 加减乘除的运算。

运算中可使用括号。但不是标准中提到的，似乎是浏览器提供的便利措施。

比如，设置段落宽度为父元素宽度的 90% 少 2em：

p {
  width: calc(90% - 2em)
}
1
2
3

在允许使用以下值的地方都可以使用 calc()：

<length>，<frequency>，<angle>，<time>，<percentage>，<number>，<integer>

其中规则有：

  1. + 和 - 号两侧的值必须使用相同的单位类型。比如 5 + 2.7，但 5em + 2.7 无效，5em + 20px 有效，因为两侧都是长度单位。
  2. * 号计算的两个值中必须有一个是 <number>(包括 <integer>)，2 * 2.5rem 有效，但 2.5rem * 2.5rem 无效，因为得到的结果是 2.5rem 的平方。
  3. / 计算的两个值中，右边必须是 <number>，结果单位以左边单位为准，30em / 2.75 有效，但 30 / 2.75em 无效。
  4. 任何情况下都不能除以 0
  5. + 和 - 运算符两侧必须有空格，* 和 / 没有要求，但建议都加上。
  6. 规范要求浏览器必须至少支持 20 个算子。

# 属性值

在一些 CSS 属性中，可以使用样式对应的元素上的 HTML 属性值，方法时使用 atr() 表达式。

<div id="hello"></div>
1
div::before{
  content: '[id=' attr() ']';
}
1
2
3

此属性浏览器支持情况略差。

# 颜色

# 具名颜色

类似于 red，blue 这样的颜色值

# rgb 和 rgba 颜色

# 函数式 rgb 颜色 rgb()

rgb() 方法接受三个参数分别对应红绿蓝三种颜色，可使用百分比或整数，但不能混用。

div{
  color: rgb(0%, 0%, 0%);
}

p{
  color: rgb(255, 255, 255);
}
1
2
3
4
5
6
7

# rgba 颜色 rgba()

CSS 3 起，支持 rgba()，在红绿蓝参数后加了一个 alpha 值表示透明度，值为 0 到 1 之间

p{
  color: rgb(255, 255, 255, 0); /* 完全透明 */
  color: rgb(255, 255, 255, 0.5); /* 半透明 */
  color: rgb(255, 255, 255, 1); /* 完全不透明 */
}
1
2
3
4
5

# 十六进制 rgb 值

颜色值 0 到 255 用十六进制表示为 00 到 FF，将红绿蓝三种颜色的十六进制表示方法连在一起并在最前面加上 # 号即可。

如果红绿蓝中，他们的两位字符是一样的，可以缩写成一位，浏览器会自动将其复制成两位。

div{
  color: #000000; /* 等效于 rgb(0, 0, 0) */
  color: #000; /* 等效于 rgb(0, 0, 0) */
  color: #fff; /* 等效于 rgb(255, 255, 255) */
  color: #ffffff; /* 等效于 rgb(255, 255, 255) */
}
1
2
3
4
5
6

# 十六进制 rgba 颜色

一个新的十六进制表示法来表示 rgba 颜色值，在原有十六进制表示法后增加一个十六进制来表示 alpha 值。

div{
  color: #000000FF;
  color: #00000033;
  color: #0003; /* 简写 */
}
1
2
3
4
5

# HSL 颜色 和 HSLa 颜色

CSS 3 新增了 HSL 表示法，H (Hue) 表示色相，S (Saturation) 表示饱和度， L (Lightness) 表示明亮度。a 依然是表示 alpha （透明度）的意思。

# 颜色值关键字

有两个特殊的关键字，可以在任何允许使用颜色值的地方使用：transparent 和 currentColor。

transparent 等效于 rgba(0, 0, 0, 0)，表示完全透明，是元素背景色的默认值。

currentColor 是当前元素的 color 属性计算得到的值，即便是继承的也算。

# 角度 <angle>

角度表示方法，就是一个 <number> 后跟上以下单位之一：

  • deg 度数，圆周为 360deg
  • grad 百分度，圆周为 400 百分度
  • rad 弧度，圆周为 2π（约等于 6.28）
  • turn 圈数，一个圆周是一圈，此单位在旋转动画中最有用，比如旋转10圈写为 10turn

相同角度用不同单位的表示方法：

度数 百分度 弧度 圈数
0deg 0grad 0rad 0turn
45deg 50grad 0.785rad 0.125turn
90deg 100grad 1.571rad 0.25turn
180deg 200grad 3.142rad 0.5turn
270deg 300grad 4.712rad 0.75turn
360deg 400grad 6.283rad 1turn

# 时间和频率 <time> / <frequency>

一段时间的表示方法，就是一个 <number> 后跟一个 s (秒) 或 ms (毫秒)。常用于过渡、动画之中，用于定义持续时间或延迟时间。

视听 CSS 也能用到时间值，只不过浏览器支持有限。

视听 CSS 还有一种值是 频率 <frequency>，就是一个 <number> 后跟一个 Hz 或 KHz，表示赫兹或千赫兹。并且 Hz 单位符不区分大小写。

# 位置 <position>

位置值用于指定图像在背景区域的位置，位置值的句法相对比较复杂：

[
  [ left | center | right | top | bottom | <percentage> | <length> ] |
  [ left | center | right | <percentage> | <length> ]
  [ top | center | bottom | <percentage> | <length> ] |
  [ center | [ left | right ] [ <percentage> | <length> ]? ] &&
  [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
]
1
2
3
4
5
6
7
  • 如果只声明一个值，第二个值默认设置为 center
  • 如果声明两个值且第一个值为长度或百分比，则第一个值总是被当做水平值
  • 如果声明四个值，必须有两个值是长度或百分比，而且必须跟在一个关键字之后，right 10px bottom 30px 表示从右边向左偏移 10px 以及从底边向上偏移 30px
  • 如果定义三个值，与四个值一样，最后一个值默认为 0。

# 自定义值（变量）

CSS 新特性，其实相当于是创建一个变量而已，它并不创建实际的 CSS 属性，只是定义变量时写法上看起来是属性和值的写法。

自定义变量定义以双横线(--)开头，跟上变量名，调用时使用 var(变量) 使用。变量名区分大小写。

html {
  --successColor: #00ff00;
  --failedColor: #ff0000;
}

div {
  color: var(--successColor);
}
p {
  color: var(--failedColor);
}
1
2
3
4
5
6
7
8
9
10
11

CSS 变量有作用域，只有在定义变量的元素以及后代身上可以使用。

← 字体 →