CSS 属性的取值

前端
CSS
作者

yangjh

发布日期

October 30, 2021

长度

长度是对距离的测量。长度由数字和紧随其后的单位组成。如果长度为 0，则单位可以忽略。有些属性还允许负值。

长度可分为相对长度和绝对长度。相对长度指的是相对与其他长度属性而言，相对长度又分为文本相对长度和视图窗口相对长度。

相对长度

  1. em 相对于当前对象内文本的字体尺寸
  2. ex 相对于字符“x”的高度。通常为字体高度的一半
  3. ch 数字“0”的宽度
  4. rem 相对于根元素（即 html 元素）font-size 计算值的倍数（小于 12 像素，在 chrome 中按照 12 像素来处理）

em 是常用的相对长度单位，em 的长度会基于元素的字体大小进行计算，最常用的用法是首行缩进两个字符：

text-indent:2em;

上述的例子中，如果元素中的字体大小为 16px，则文本首行缩进的量为 32px。

视图窗口相对长度

  1. vw 相对于视口的宽度。视图窗口被均分为 100 单位的 vw
  2. vh 相对于视口的高度。视图窗口被均分为 100 单位的 vh
  3. vmax 相对于视图窗口的宽度或高度，总是相对于大的那个。视图窗口的宽度或高度被均分为 100 单位的 vmax
  4. vmin 相对于视图窗口的宽度或高度，总是相对于小的那个。视图窗口的宽度或高度被均分为 100 单位的 vmin

绝对长度

绝对长度是最简单的长度单位，绝对长度单位有：

  1. cm 厘米
  2. mm 毫米
  3. q 0.25 毫米
  4. in 英寸，1 英寸 = 2.54 厘米
  5. pt 点，1pt = 1/72in
  6. pc 派卡，1pc = 12pt
  7. px 像素，1px = 1/96in

其中经常使用的绝对单位是像素 px。1 英寸相当于 96 个像素，像素虽然是绝对单位，但是在不同的设备，尤其是高密度显示设备和低密度显示设备上的效果并非完全一致。如图所示：

不同设备的像素

不同设备的像素

px 与 pt 是两个看起来很像、却完全不一样的单位（在某些场合他们是 1：1 的），在很多时候却常常被搞混，或是制作过程根本没有分清楚、导致结果没有很精确。pt 是常见的标示文字尺寸的单位，在绘图以及文书软件等几乎都是使用 pt 作为字体尺寸的单位。px 像素，是屏幕上所显示的最小单位，当制作的内容是供屏幕浏览时，使用 px 可以精确的控制画面上显示效果。但也因为每个屏幕分辨率不同，像素的大小也不固定。在分辨率高的屏幕上，一个像素可能会小到肉眼无法辨识的大小。

pt 与 px 理解起来其实不难，在应用的时候其实也相当单纯，在大部分的情况下适用的一个原则是：当设计的目的是用于供屏幕浏览，则趋向于使用 px 以方便掌握细节；而如果是为了做输出打印的需求，使用 pt 则是较好的选择。因此，在网站前端开发中，人们经常使用的单位是 px，而不是 pt。

角度

CSS 中，角度的单位有 deg, grad, rad, turn。

  1. deg 度，角度单位，值的范围是 0-360 度，可以是负值。
  2. grad 梯度（Gradians）。一个圆共 400 梯度，90 度就是 100 梯度。
  3. rad 弧度（Radians）。一个圆共 2π 弧度。
  4. turn 圈（Turns）。一个圆共 1 圈。

时间

时间单位有s和ms，1s=1000ms。多用于动画设置。

频率

声音频率有hz和khz。

布局

  1. fr fr用于在一系列长度值中分配剩余空间，如果指定了多个部分，则剩下的空间根据各自的数字按比例分配。（案例）
  2. gr gr网格数

颜色

在 CSS 中，可通过 color 属性为元素指定字体颜色。在 CSS2 中，颜色由三种表示方法：颜色名称、十六进制颜色值和 rgb 函数形式的颜色值。其中颜色名称只能在预设的 16 种颜色名称中选择，这 16 种预设的颜色名称分别是：black、silver、gray、white、maroon、red、purple、fuchsia、green、lime、oliver、yellow、navy、blue、teal、aqua。如：

p {
    color: black;
}

上述规则将使段落的颜色为黑色。

color 属性的值还可以采用 16 进制来表示，如：

p {
    color: #333333;
}

#表示其后的数值为 16 进制，通常情况下是 6 位数字，分别表示 RRGGBB，即红色分量的颜色值、绿色分量的颜色值、蓝色分量的颜色值。如果#RRGGBB分别都由重复数字组成，那么还可以简写成为#RGB。

除了使用颜色名称、十六进制之外，颜色值还可以通过 rgb 函数表示，如：

p {
    color: rgb(25%,25%,30%);
}

其中 rbg 函数的三个参数值分别表示的是红色、绿色和蓝色的颜色分量。

在 CSS3 中，还新增了 RGBA, HSL, HSLA 三种颜色表示方法。

RGBA 模式与 RGB 相同，只是在 RGB 模式上新增了 Alpha 透明度。如：

p {
    color: rgba(25%,25%,30%,0.2);
}

最后一个参数值表示颜色的透明程度，0 表示完全透明，1 表示不透明。

HSL 是另外一种常用的颜色表示体系，其中：

  1. H Hue（色调）。0（或 360) 表示红色，120 表示绿色，240 表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
  2. S Saturation（饱和度）。取值为：0.0% - 100.0%
  3. L Lightness（亮度）。取值为：0.0% - 100.0%

例如：

.task {
  background: hsl(0, 100%, 25%);
}

HSLA 颜色体系，增加了透明度，例如：

.task {
  background: hsla(0, 100%, 25%, .25);
}

数字

浮点数，值在一定范围内，超过范围无效。

div {
  line-height: 1.5;
}
div {
  opacity: .5;
}

整数，值在一定范围内，超过范围无效。

div {
  z-index: 10;
}

百分比由数字和紧随其后的“%”符号构成。百分比值始终是相对于另外一个值而言的，比如相对于长度。例如：

p { font-size: 10px }
p { line-height: 120% }

上面例子中的line-height值，最终计算出来应该为12px。

字符串

CSS的取值还可以是字符串。

CSS 函数

CSS 函数用作各种CSS属性的值。

回到顶部