在 CSS 中,每个属性都可以接受一个或多个值。CSS 提供了多种值和单位,以便我们能够精确地控制页面的布局和样式。
一、什么是 CSS 的值?
CSS 的值是用来定义样式属性的具体数据。不同的样式属性接受不同类型的值,这些值可以是数字、长度、百分比、颜色、图片、位置、字符串、标识符或者函数。理解这些值的使用方式以及它们如何影响页面的呈现,将帮助你创建更具表现力和功能性的网页设计。
二、数字、长度和百分比
1、数字
数字是最基本的 CSS 值,通常用来设置样式属性的数值。例如,设置字体大小、边距、边框宽度等:
在上述代码中,16
和 20
都是数字值,分别用于定义字体大小和外边距。
2、长度
长度值用于定义元素的尺寸和位置,通常以像素(px
)、点(pt
)、厘米(cm
)等单位表示。长度单位分为绝对单位和相对单位。
1)绝对长度单位
绝对长度单位用于定义固定的尺寸,不依赖于其他因素。常见的绝对单位包括:
- 像素 (
px
):最常用的单位,适用于大多数场景。 - 点 (
pt
):常用于打印样式表,一个点等于 1/72 英寸。 - 厘米 (
cm
) 和 毫米 (mm
):用于较为精确的尺寸控制。
2)相对长度单位
相对长度单位根据父元素的尺寸或视口的大小进行调整。常见的相对单位包括:
- 百分比 (
%
):相对于包含块的尺寸。例如,width: 50%
会将元素的宽度设置为其父元素宽度的一半。 - em:相对于当前元素的字体大小。例如,
font-size: 2em
会将字体大小设置为当前字体大小的两倍。 - rem:相对于根元素的字体大小。与
em
类似,但总是相对于根元素的字体大小。
三、颜色
CSS 提供了多种方式来定义颜色,包括颜色关键词、十六进制值、RGB 和 RGBA 值、HSL 和 HSLA 值。
1、颜色关键词
CSS 颜色关键词是预定义的颜色名称。例如:
常见的颜色关键词包括 black
、white
、blue
、green
等。
2、十六进制 RGB 值
十六进制颜色值是另一种定义颜色的方法,通常以 #RRGGBB
的格式表示,其中 RR
、GG
和 BB
是红色、绿色和蓝色的十六进制值。十六进制值可以缩写为 #RGB
格式:
3、RGB 和 RGBA 值
RGB 值表示红色、绿色和蓝色的强度,取值范围从 0 到 255。RGBA 值在 RGB 值的基础上增加了透明度(alpha
),取值范围从 0 到 1:
4、HSL 和 HSLA 值
HSL 值表示色相(hue
)、饱和度(saturation
)和亮度(lightness
)。HSLA 值在 HSL 的基础上增加了透明度(alpha
):
四、图片
图片可以通过 url()
函数引入,也可以通过渐变函数定义背景图像:
五、位置
位置值用于定位元素。常见的定位值包括 top
、right
、bottom
和 left
,可以用长度单位、百分比或关键字表示:
六、字符串和标识符
在 CSS 中,字符串用于定义字体、内容等,标识符用于选择器和属性值。例如:
七、函数
CSS 函数用于计算和生成动态值。常见的 CSS 函数包括 calc()
、var()
、clamp()
、min()
和 max()
: