IT课程 CSS基础 021_值类型、单位、大小、颜色

数值类型

CSS 中，在不同属性中使用了不同的数值，常用的数值类型如下：

字符串：用单引号或双引号括起来的文本，需确保字符串引号的一致性。
数字：整数或浮点数。如 1024、-100、0.255。避免使用无单位的数字，除非是表示纯粹的数值。
单位：单位数值类型，例如 45deg、5s 或 10px。
百分比：百分比数值类型，例如 50%。百分比值通常用于宽度、高度等属性。
颜色值：十六进制、RGB、RGBA、HSL、HSLA等，使用合适的颜色表示方式，考虑颜色对比度和可访问性，避免使用太过亮或过于相似的颜色。
关键字：表示具体含义的词，如auto、initial、inherit等，理解关键字的含义和作用，确保正确使用。

单位

CSS中的单位用于表示长度、角度、时间、频率等属性的值。

长度单位：

在CSS中，长度单位用于表示尺寸和距离，可以应用于各种属性，如宽度、高度、边距、填充等。

相对长度单位：

em： 相对于父元素的字体大小。1.5em表示元素的字体大小为其父元素字体大小的 1.5 倍。
rem： 相对于根元素（html元素）的字体大小。1rem等于根元素的字体大小。
ex： 通常用于垂直尺寸，相对于小写字母”x”的高度。（在大多数字体中，小写的 x 字符通常是最大字符高度的一半）

示例：

1
.example {
2
  font-size: 16px;
3
  padding: 1.5em; /* 1em相当于24px */
4
  margin: 2rem; /* 2rem相当于32px */
5
  height: 2ex; /* 高度为字体大小的一半，即 8px，相当于16px */
6
}

绝对长度单位：

px： 像素是屏幕上最基本的单位，也是 CSS 中使用最广泛的单位。像素的大小取决于显示器的分辨率。
in： 英寸是长度单位，通常用于表示显示器或其他电子设备的尺寸，1英寸等于96像素。
cm： 厘米是长度单位，通常用于表示物理对象的尺寸。
mm： 毫米是长度单位，通常用于表示纸张或其他印刷材料的尺寸。
pt： 点/磅 (point) 的缩写，是传统印刷术中使用的单位。1pt 等于 1/72 英寸，约为 0.352778 毫米。
pc： 派卡 (pica) 的缩写，也是传统印刷术中使用的单位。1pc 等于 12pt，约为 4.21752 毫米，1pc等于16像素。在打印样式表或需要确切打印尺寸的情况下推荐。

示例：

1
.example {
2
  width: 200px;
3
  height: 2in; /* 2英寸，等于192px */
4
  margin: 1cm; /* 1厘米 */
5
  font-size: 12pt; /* 12磅 */
6
}

相对百分比单位：

%： 百分比表示相对于父元素的百分比大小。例如，width: 50% 表示元素的宽度为其父元素宽度的 50%。

示例：

1
.example {
2
  width: 50%; /* 宽度为父元素宽度的50% */
3
  padding: 10%; /* 内边距为元素宽度的10% */
4
}

视窗单位：

vw： 视口宽度的百分比，1vw等于视口宽度的1%。
vh： 视口高度的百分比，1vh等于视口高度的1%。
vmin： vw和vh中较小的那个。
vmax： vw和vh中较大的那个。

示例：

1
.example {
2
  width: 50vw; /* 宽度为视口宽度的50% */
3
  height: 30vh; /* 高度为视口高度的30% */
4
}

角度单位：

在CSS中，角度单位用于表示旋转、变换等属性中的角度值。

deg（度）：

deg 度是角度的最常用单位，一个圆的总角度为 360 度。
用于表示旋转、渐变角度等。

示例：

1
.example {
2
  transform: rotate(45deg); /* 以45度旋转元素 */
3
  background: linear-gradient(45deg, red, yellow); /* 45度渐变背景 */
4
}

rad（弧度）：

rad 弧度是圆周长与半径的比值，一个圆的总弧度为 2π 弧度。
用于某些数学函数、变换等。

示例：

1
.example {
2
  transform: rotate(1rad); /* 以1弧度旋转元素 */
3
}

grad（梯度）：

grad 表示梯度的单位，一个圆的总梯度为 400 梯度。
类似度数，用于表示旋转、渐变角度等。

1
.example {
2
  transform: rotate(50grad); /* 以50梯度旋转元素 */
3
}

turn（转）：

turn 表示完整的圆周数，等于 360 度。
用于表示旋转的圈数。

1
.example {
2
  transform: rotate(0.5turn); /* 旋转半圈，180度 */
3
}

时间单位：

在CSS中，时间单位用于表示动画、过渡、动画延迟等属性中的时间值。

s（秒）

s 表示秒的单位。
用于表示动画持续时间、过渡时间等。

示例：

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9
.example{
10
    transition: background-color 1s ease; /* 定义过渡属性和时间 */
11
}

ms（毫秒）

ms 表示毫秒的单位，1秒等于1000毫秒。
用于更精细的时间控制。

示例：

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9

10
.example{
11
    transition: background-color 2000ms ease; /* 定义过渡属性和时间 */
12
}

频率单位：

在CSS中，频率单位用于表示周期性事件的频率。常见的频率单位是 Hz（赫兹），表示每秒发生的周期数。

Hz（赫兹）

赫兹是频率的最常用单位，表示每秒发生的周期数。
用于表示动画中的震动、旋转等效果的频率。

示例：

1
.example {
2
  animation: shake 1s infinite; /* 震动频率为1赫兹，无限循环 */
3
}

kHz（千赫兹）

千赫是频率的单位，表示每秒发生的千次周期，即1 kHz 等于 1000 Hz。
在一些高频率的场景中使用，例如声音的频率。

示例：

1
.example {
2
  audio {
3
    frequency: 5kHz; /* 声音频率为5千赫兹 */
4
  }
5
}

分辨率单位：

在CSS中，分辨率单位用于表示图像或打印时的像素密度。

dpi（每英寸点数）

dpi 表示每英寸的点数，即图像或打印时每英寸的像素密度。
在打印样式表中常用，用于确定打印时图像的清晰度。

示例：

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 300dpi; /* 图像在打印时的像素密度为300dpi */
5
}

dppx（每像素点数）

dppx 表示每像素的点数，即屏幕上每物理像素的像素密度。
通常在响应式设计中用于适应不同屏幕的像素密度。

示例：

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 2dppx; /* 图像在2倍像素密度的屏幕上显示 */
5
}

dpcm（每厘米点数）

dpcm 是表示每厘米的点数（dots per centimeter）的分辨率单位。
用于在打印样式表或媒体查询中调整样式和图像，以适应不同的分辨率或打印设备。

示例：

1
.example {
2
  background-image: url('image.png');
3
  background-size: 2dpcm 3dpcm; /* 图像在每厘米2个点的水平分辨率和每厘米3个点的垂直分辨率下显示 */
4
}

大小

CSS中的大小可以用来控制元素的尺寸。

width 和 height 属性

分别用于设置元素的宽度和高度，一般使用像素（px）、百分比（%）、em、rem等长度单位。

示例：

1
.example {
2
  width: 300px;
3
  height: 200px;
4
}

max-width 和 max-height 属性

分别用于设置元素的最大宽度和最大高度，一般使用像素（px）、百分比（%）、em、rem等长度单位。

示例：

1
.example {
2
  max-width: 100%;
3
  max-height: 500px;
4
}

min-width 和 min-height 属性：

示例：

1
.example {
2
  min-width: 200px;
3
  min-height: 100px;
4
}

颜色

关键字颜色

使用一些预定义关键字表示的颜色，例如：red：红色、blue：蓝色、green：绿色等。

示例：

1
.example {
2
  color: red; /* 红色 */
3
  background-color: blue; /* 蓝色 */
4
}

十六进制颜色

使用六位或三位的十六进制数表示RGB颜色。六位表示形式为#RRGGBB，其中RR、GG、BB分别表示红、绿、蓝的色值。三位表示形式为#RGB，每个字符表示一个颜色通道。

示例：

1
.example {
2
  color: #ff0000; /* 红色 */
3
  background-color: #00f; /* 蓝色 */
4
}

RGB、RGBA颜色

使用rgb()函数表示颜色，接受三个参数，分别表示红、绿、蓝的色值，取值范围为0-255。 rgba()与rgb()类似，但多了一个表示透明度的参数，取值范围为0-1。

示例：

1
.example1 {
2
  color: rgb(255, 0, 0); /* 红色 */
3
  background-color: rgb(0, 0, 255); /* 蓝色 */
4
}
5

6
.example2 {
7
  color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
8
  background-color: rgba(0, 0, 255, 0.7); /* 半透明蓝色 */
9
}

HSL、HSLA颜色

使用hsl()函数表示颜色，接受三个参数，分别表示色相、饱和度和亮度。色相取值范围为0-360，饱和度和亮度取值范围为0%-100%。 hsla()与hsl()类似，但多了一个表示透明度的参数，取值范围为0-1。

示例：

1
.example1 {
2
  color: hsl(0, 100%, 50%); /* 红色 */
3
  background-color: hsl(240, 100%, 50%); /* 蓝色 */
4
}
5

6
.example2 {
7
  color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */
8
  background-color: hsla(240, 100%, 50%, 0.7); /* 半透明蓝色 */
9
}

RGB颜色对照表 (oschina.net)