---
title: "IT课程 CSS基础 021_值类型、单位、大小、颜色"
date: 2024-01-27T22:00:00.000Z
tags: ["IT课程", "HTML课程", "CSS课程", "JavaScript课程", "Java课程", "计算机系统与网络", "hello css", "css基础", "css单位", "css值类型", "css大小", "css颜色", "css颜色值"]
categories: ["学习", "CSS基础"]
canonical: https://www.zhaojian.net/it-course-css-021/
author: 赵健
---

### 数值类型

 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 字符通常是最大字符高度的一半）

示例：

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

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

示例：

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

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

示例：

```css
.example {
	width: 50%; /* 宽度为父元素宽度的50% */
	padding: 10%; /* 内边距为元素宽度的10% */
}
```

###### 视窗单位：
- **`vw`：** 视口宽度的百分比，1vw等于视口宽度的1%。
- **`vh`：** 视口高度的百分比，1vh等于视口高度的1%。
- **`vmin`：** vw和vh中较小的那个。
- **`vmax`：** vw和vh中较大的那个。

示例：

```css
.example {
	width: 50vw; /* 宽度为视口宽度的50% */
	height: 30vh; /* 高度为视口高度的30% */
}
```

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

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

示例：

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

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

示例：

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

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

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

###### turn（转）： 
- `turn` 表示完整的圆周数，等于 360 度。
- 用于表示旋转的圈数。

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

##### 时间单位：

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

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

示例：

```css
.base{
    width: 200px;
    height: 200px;
    background-color: #3498db;
}
.base:hover{
    background-color: #e74c3c;
}
.example{
    transition: background-color 1s ease; /* 定义过渡属性和时间 */
}
```
###### ms（毫秒）
- `ms` 表示毫秒的单位，1秒等于1000毫秒。
- 用于更精细的时间控制。

示例：

```css
.base{
    width: 200px;
    height: 200px;
    background-color: #3498db;
}
.base:hover{
    background-color: #e74c3c;
}

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

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

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

示例：

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

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

示例：

```css
.example {
	audio {
		frequency: 5kHz; /* 声音频率为5千赫兹 */
	}
}
```

##### 分辨率单位：

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

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

示例：

```css
.example {
	background-image: url('image.png');
	background-size: 300px 200px;
	background-resolution: 300dpi; /* 图像在打印时的像素密度为300dpi */
}
```
###### dppx（每像素点数）
- `dppx` 表示每像素的点数，即屏幕上每物理像素的像素密度。
- 通常在响应式设计中用于适应不同屏幕的像素密度。

示例：

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

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

示例：

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


***

### 大小

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

##### width 和 height 属性

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

示例：

```css
.example {
	width: 300px;
	height: 200px;
}
```

##### max-width 和 max-height 属性

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

示例：

```css
.example {
	max-width: 100%;
	max-height: 500px;
}
```

##### min-width 和 min-height 属性：

示例：

```css
.example {
	min-width: 200px;
	min-height: 100px;
}
```


***

### 颜色

##### 关键字颜色

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

示例：

```css
.example {
	color: red; /* 红色 */
	background-color: blue; /* 蓝色 */
}
```

##### 十六进制颜色

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

示例：

```css
.example {
	color: #ff0000; /* 红色 */
	background-color: #00f; /* 蓝色 */
}
```

##### RGB、RGBA颜色

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

示例：

```css
.example1 {
	color: rgb(255, 0, 0); /* 红色 */
	background-color: rgb(0, 0, 255); /* 蓝色 */
}

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

##### HSL、HSLA颜色

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

示例：

```css
.example1 {
	color: hsl(0, 100%, 50%); /* 红色 */
	background-color: hsl(240, 100%, 50%); /* 蓝色 */
}

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

[RGB颜色对照表 (oschina.net)](https://tool.oschina.net/commons?type=3)