📅 最后修改于: 2023-12-03 15:14:21.068000 🧑 作者: Mango
在 CSS 中，我们常常需要设置各种各样的值，比如颜色、长度、字体等。这些值可以用不同的单位和格式来表示，我们需要了解每种格式以及如何使用它们。
像素是最常用的长度单位，它表示屏幕上的一个点。在 CSS 中，我们用数字表示像素的数量。
font-size: 16px;
padding: 10px;
百分比是相对于父元素的长度单位。它用数字和百分号表示，可以用于设置宽度、高度、边距等。
width: 50%;
padding: 5%;
em 是一个相对的长度单位，它表示当前元素的字体大小。如果字体大小是 16px，1em 就等于 16px。可以用于设置宽度、高度、边距等。
font-size: 1.2em;
padding: 1em;
rem 与 em 类似，但是它相对于根元素（即 元素）的字体大小。如果根元素的字体大小是 16px，1rem 就等于 16px。同样可以用于设置宽度、高度、边距等。
font-size: 1.2rem;
padding: 1rem;
vw 和 vh 是相对于视口宽度和高度的长度单位。1vw 表示视口宽度的 1%，1vh 表示视口高度的 1%。可以用于设置宽度、高度等。
width: 50vw;
height: 100vh;
vmax 和 vmin 是相对于视口宽度和高度中较大或较小的一个的长度单位。1vmax 表示视口宽度和高度中较大的一个的 1%，1vmin 表示视口宽度和高度中较小的一个的 1%。同样可以用于设置宽度、高度等。
width: 50vmax;
height: 50vmin;
16 进制值用 # 开头，后面跟着 6 位十六进制数，每两个代表红、绿、蓝三种颜色的强度。
color: #ff0000; /* 红色 */
color: #00ff00; /* 绿色 */
color: #0000ff; /* 蓝色 */
RGB 值由红、绿、蓝三个值组成，每个值的取值范围为 0-255。可以使用 rgb() 函数来表示。
color: rgb(255, 0, 0); /* 红色 */
color: rgb(0, 255, 0); /* 绿色 */
color: rgb(0, 0, 255); /* 蓝色 */
RGBA 值由红、绿、蓝三个值和一个透明度值组成，透明度值的范围为 0-1。可以使用 rgba() 函数来表示。
color: rgba(255, 0, 0, 0.5); /* 半透明的红色 */
color: rgba(0, 255, 0, 0.5); /* 半透明的绿色 */
color: rgba(0, 0, 255, 0.5); /* 半透明的蓝色 */
CSS 定义了一些颜色名称，比如 red、green、blue 等。
color: red;
color: green;
color: blue;
字体名称可以使用字体的英文名称或者本地字体的名称。
font-family: Arial, 宋体, sans-serif;
字体大小可以使用像素、em、rem 等单位。
font-size: 16px;
font-size: 1.2em;
font-size: 1.2rem;
字体风格包括 normal（正常）、italic（斜体）、oblique（倾斜）和 inherit（继承）。
font-style: normal;
font-style: italic;
font-style: oblique;
字体粗细包括 normal（正常）、bold（粗体）、bolder（更粗）、lighter（更细）和数值型的 100-900。
font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;
font-weight: 700;
在 CSS 中，我们常常需要设置各种各样的值。本文介绍了长度单位、颜色和字体的相关知识点，希望对程序员们有所帮助。