当前位置：首页 > news >正文

CSS基础

news 来源：原创 2025/7/2 22:53:43

1. CSS入门

1.1. CSS是什么

CSS是Cascading Style Sheets的缩写，翻译为层叠样式表。CSS是一种样式表语言，用来描述HTML文档的表现方式，如字体、色彩、背景色等等。我们先从一段简单的CSS代码开始。

代码1 CSS示例

p {color: red;
}

这段代码的效果是将HTML文档中全部 <p> 元素里的文本设置成红色。

大括号里面的是CSS规则，格式为

属性: 属性值;

每条规则占一行，以半角分号结尾。属性和值之间以半角冒号分割，属性和值的前后可以添加空格。 color 表示文字色彩属性， red 表示将这个属性设置为红色。单独的一条规则叫做声明。大括号前面的 p 表示将这条规则应用到所有 <p> 元素，叫做选择器。

由选择器、大括号、声明共同构成的整个结构叫做规则集，简称规则。CSS就是由许多个类似的规则集构成的。学习CSS就是要弄清楚下列3个问题：

属性：HTML标签有哪些样式属性？
属性值：这些属性可以设置为什么值，对应的样式是什么？
选择器：如何将规则应用到HTML标签上？

1.2. CSS和HTML

前面我们说过，CSS是描述HTML文档样式的语言。如何将CSS和HTML结合起来呢？方法是在HTML中添加 <link> 标签。

代码2 在HTML中引入CSS

<html><head><link href="style.css" rel="stylesheet" /></head><body><!-- 其他内容 --></body>
</html>

<link> 标签将CSS和HTML结合起来。浏览器在展示HTML时，根据CSS规则集描述的样式，决定渲染的效果。

2. 属性值和单位

CSS规则由属性和属性值构成。很多属性值带有单位。本章介绍属性值和单位，作为后续属性部分的基础。

每个CSS属性都可以有一个或多个值。下面是一个示例：

p {font-size: 1.2em;height: 100px;letter-spacing: 0;width: 80%;background-color: #00ff00;color: red;
}

在例子中， font-size 是字体尺寸， height 和 width 是元素高度和宽度， background-color 是元素背景色彩， color 是文字色彩， letter-spacing 是字间距。这里主要介绍属性值和单位，后面会详细介绍这些属性。

从例子中可以看到，属性值可以是带单位的值（ 1.2em 、 100px ）、不带单位的数值（ 0 ）、百分比（ 80% ）、十六进制色彩值（ #00ff00 ）、预定义名字（ red ）等。我们逐一介绍这些属性值和单位。

em 是上级元素中文字的尺寸。 1.2em 表示在元素中的文字大小是上级元素的1.2倍。因为用于描述大小， em 叫做距离单位。因为是相对于上级元素的， em 属于相对距离单位。下表列出了常用的相对距离单位。附录包含一份更完整的表格。

表1 相对距离单位
em	上级元素字符高度
rem	根元素字符高度
ex	小写字母高度
cap	大写字母高度
ch	字符“0”的宽度
ic	字符“水”的宽度

px 表示CSS像素（也叫参考像素）。像素是屏幕能显示的最小单位。不同屏幕中像素的大小不一样，为了统一规范，CSS使用“CSS像素”的概念，在上下文没有歧义时简称像素。CSS像素定义为 196 英寸。1英寸是2.54厘米，因此1像素是0.26毫米。请注意，不同设备上，1个CSS像素实际占据的空间可能不同，未必一定是0.26毫米。这里只是一个简单的介绍。要了解更多内容，请查阅本节末尾的参考资料部分。

px 是绝对距离单位。下面列出了常用的绝对距离单位。附录包含更完整的表格。

表2 绝对距离单位
cm	厘米
mm	毫米
in	英寸 1in = 2.54cm = 96px
pt	点 1pt = 172 in
px	像素 1px = 196 in

如果某个距离的值是0，比如 0px 或 0cm ，此时单位已经不重要了，可以省略，简写为0，如 letter-spacing: 0; 。

80% 属于百分比数据类型。很多关于尺寸的属性可以使用百分比。比如例子中的 width: 80%; 表示元素宽度占上级元素宽度的80%。

#00ff00 和 red 是色彩值，色彩也是CSS数据类型。色彩值可以是色彩名（ red ）、十六进制色彩记号（ #00ff00 ）、 rgb 函数（ rgb(31 120 50) ）等。

十六进制色彩记号有4种语法：

代码3 十六进制色彩记号语法

#RGB        /* 三值语法，#RRGGBB的缩写 */
#RGBA       /* 四值语法，#RRGGBBAA的缩写 */
#RRGGBB     /* 六值语法 */
#RRGGBBAA   /* 八值语法 */

R、G、B、A分别是红色、绿色、蓝色和透明度分量，值从00到ff。对于透明度分量，00表示完全透明，ff表示完全不透明。为了方便引用色彩值，CSS定义了色彩名，下面是部分常用色彩名。附录包含更完整的列表。

代码4 常见色彩名

aqua    #00ffff
black   #000000
blue    #0000ff
fuchsia #ff00ff
gray    #808080
green   #008000
lime    #00ff00
maroon  #800000
navy    #000080
olive   #808000
purple  #800080
red     #ff0000
silver  #c0c0c0
teal    #008080
white   #ffffff
yellow  #ffff00

3. 基础样式

现在我们来学习CSS中的基础样式。所有HTML元素几乎都支持这些样式。

3.1. 文字

字体和文本样式分为两类，一类描述字符样式，如大小、色彩、笔画粗细等。另一类描述字符布局，如对齐方式、字间距、行间距等。

3.1.1. 字符样式

控制字符样式最主要属性的是 font-family ，决定了元素中的文字的字体族。

span {font-family: "Times New Roman", "新宋体", serif;
}

如上例所述， font-family 支持设置多个字体族，以半角逗号分隔。CSS中使用的标点都是半角符号。允许设置多个字体族是出于兼容性的考虑，为没有安装对应字体族电脑提供一些备选项。浏览器按照顺序依次选择可用字体族。如果一个都不可用，使用系统默认字体。如果字体族名字包含空格，必须使用双引号包围起来，如 "Times New Roman" 。除了字体族名字，CSS还定义了几个通用字体族，也可以作为 font-family 属性值。

表3 通用字体族
通用字体族	说明
serif	衬线字体，笔画存在装饰，粗细不同
sans serif	无衬线字体，笔画没有装饰，粗细均匀
cursive	手写体
fantasy	艺术体
monospace	等宽字体
fangsong	仿宋体
kai	楷体

另一个影响字体样式的重要属性是 font-size 字号，它决定了字符尺寸。 font-size 值可以是带有距离单位、百分比、或者尺寸名字。

font-size: 32px;
font-size: 1em;
font-size: 80%;
font-size: small;

这里面的 small 是绝对尺寸，是一个比 medium （大部分浏览器 font-size 的默认值）小的值。至于具体是多少，或者比 medium 小多少，CSS没有定义，由浏览器自行决定。类似的值还有：

表4 绝对尺寸在大部分浏览器中的值
绝对尺寸	在大部分浏览器中的值
xx-small	9-10px
x-small	10-12px
small	13-14px
medium	16px
large	18px
x-large	24px
xx-large	32px
xxx-large	48px

下面我们介绍另外三个影响字符样式的属性： font-weight 、 font-stretch 和 font-style ，它们控制笔画粗细、字符宽度和倾斜风格。要理解它们，首先要明白字体和字体族的区别，弄清楚字形、字体、字体族3个概念。

表5 字形、字体和字体族
字形	字符的表现形式。
字体	有相同外观和排版尺寸的字形的集合。
字体族	有相同风格的，笔画粗细、字宽或倾斜风格s不同的字体的集合。

字体族中的字体看起来差不多，区别就在于笔画粗细（ font-weight ）、字符宽度（ font-stretch ）和倾斜风格（ font-style ）不同。

font-weight 叫做字重，取值从1到1000，越大笔画越粗。字重的默认值是 bold ，定义为400。另一个常用值是 bold ，定义为700。

font-stretch 叫做字宽，用于在水平方向上拉伸或压缩字符，值是百分比。小于100%表示压缩，大于100%是拉伸，默认值是100%。

表6 font-stretch值
名字	值
ultra-condensed	50%
extra-condensed	62.5%
condensed	75%
semi-condensed	87.5%
normal	100%
semi-expanded	112.5%
expanded	125%
extra-expanded	150%
ultra-expanded	200%

font-style 表示字符的倾斜风格，取值可以是 normal （不倾斜）或 italic （倾斜）。

还有几个和字体样式有关的属性： color 是字体色彩。 text-decoration 是文字上下的修饰符，例如 text-decoration: underline dotted red; 在文字下方绘制一个红色虚线下划线。 text-shadow 是文字阴影, text-shadow: #fc0 2px 4px 8px; 表示绘制颜色 #fc0 的文字阴影，阴影相对文字在x轴偏移2像素，y轴偏移4像素，阴影渐变半径8px。

表7 重要字符样式属性
属性	说明	示例
font-family	字体族	"Times New Roman"
font-size	字体大小	1.2rem
font-weight	字重，笔画粗细	bold
font-stretch	字宽	100%
font-style	倾斜风格	italic
color	字体色彩	red
text-decoration	文字装饰	underline dotted red
text-shadow	文字阴影	#fc0 2px 4px 8px

3.1.2. 字符布局

除了字符自身的样式属性外，还有一些属性决定了字符的排列方式。 text-align 是文字排列方向，可以是 left 左对齐、 right 右对齐、 center 剧中、 justify 两端对齐。 line-height 是一行文字占用的高度，包括字符和字符上下的空白空间。 letter-spacing 是字间距， word-spacing 是词间距。

表8 字符布局属性
属性	说明	示例
text-align	文本对齐方式	left
line-height	行高	4px
letter-spacing	字间距	1px
word-spacing	词间距	6px

3.2. 背景

background-color 决定了元素背景色彩，值可以是色彩名、十六进制色彩值、色彩函数等。

background-color: red;
background-color: #bbff00;
background-color: rgb(255 255 128);
background-color: rgb(117 190 218 / 50%);
background-color: transparent;

这里的 rgb(117 190 218 / 50%) 等效于 #75beda80 ，斜杠 / 后面的百分比是透明通量， 0% 是完全透明，100% 是完全不透明。透明通量也可以使用数值表示，0表示完全透明，1.0表示完全不透明。如果希望将背景设置为透明，可以使用 background-color: transparent; 。

CSS不仅支持设置背景色的透明通量，也支持设置元素的透明通量。

opacity: 1;   /* 完全不透明 */
opacity: 0.6; /* 半透明 */
opacity: 0;   /* 完全透明 */

如果希望使用图片作为背景，可以使用 background-image 属性。

background-image: url("background.png");

背景图片的位置和大小由 background-position 和 background-size 控制。

background-position: top;        /* 顶部水平居中 */
background-position: bottom;     /* 底部水平居中 */
background-position: left;       /* 左对齐垂直居中 */
background-position: right;      /* 右对齐垂直居中 */
background-position: center;     /* 水平和垂直居中 */background-position: top right;  /* 顶部右对齐 */
background-position: 25% 75%;    /* 距离左边25%，顶边75%处 */
background-position: 1cm 2cm;    /* 距离左边1cm，顶边2cm处 */background-size: cover;          /* 缩放图片覆盖元素，可能裁剪图片。 */
background-size: contain;        /* 缩放图片到能够让元素完整包含的最大尺寸，以空白填充剩余空间。 */background-size: 50%;            /* 设置图片宽度。 */
background-size: 12px;           /* 设置图片宽度。 */background-size: 3em 25%;        /* 设置图片宽度和高度。 */
background-size: auto 6px;       /* 设置图片宽度和高度。 */

如果图片尺寸较小，希望用图片铺满元素，可以使用 background-repeat 属性。

background-repeat: repeat space;

background-repeat 属性有两个值，分别表示在水平、垂直方向上如何重复排列图片。可取的值有

表9 background-repeat值
值	说明
repeat	重复排列图片，铺满整个元素。最后一个图片可能被裁剪。
space	重复排列图片，首个最左，末尾右边，均匀排列，间以空白。
round	类似space，适当放大图片，覆盖间隔。
no-repeat	不重复排列图片。

为了简化编码，CSS提供了单值简写。

表10 background-repeat单值语法
单值	等价于双值
repeat-x	repeat no-repeat
repeat-y	no-repeat repeat
repeat	repeat repeat
space	space space
round	round round
no-repeat	no-repeat no-repeat

3.3. 边框

边框样式由3个主要属性控制： border-width 是边框宽度， border-style 是边框样式，比如虚线、短横线、实线等， border-color 是边框色彩。

代码5 边框属性

border-width: 4px;
border-width: 2px 1.5em;              /* 顶底 | 左右 */
border-width: 1px 2em 1.5cm;          /* 顶 | 左右 | 底 */
border-width: 1px 2em 0 4rem;         /* 顶 | 右 | 底 | 左 */border-color: red;
border-color: red #f015ca;           /* 顶底 | 左右 */
border-color: red yellow green;      /* 顶 | 左右 | 底 */
border-color: red yellow green blue; /* 顶 | 右 | 底 | 左 */border-style: none;    /* 不显示 */
border-style: dotted;  /* 圆点 */
border-style: dashed;  /* 短虚线 */
border-style: solid;   /* 实线 */
border-style: double;  /* 双实线 */
border-style: groove;  /* 浮雕 */
border-style: ridge;   /* 浮雕 */border-style: dotted solid;               /* 顶底 | 左右  */
border-style: hidden double dashed;       /* 顶 | 左右 | 底 */
border-style: none solid dotted dashed;   /* 顶 | 右 | 底 | 左 */

此外还有两个重要的属性， border-radius 是边框圆角半径， border-image 是边框图片。

border-radius: 30px;
border-radius: 25% 10%;                   /* 顶底 | 左右 */
border-radius: 10% 30% 50% 70%;           /* 顶 | 右 | 底 | 左 */
border-image: url("/images/border.png");

轮廓是在边框外侧，紧贴边框绘制的线条，和边框有些类似。我们常见的输入框，周围的细线就是边框。轮廓的样式和边框几乎一样。

代码6 轮廓属性

outline-width
outline-color
outlint-style

4. 选择器

对属性和属性值有了一定了解之后，我们开始介绍选择器。选择器决定了属性值应用到哪个元素上。首先介绍最基础的选择器，然后介绍如何将选择器组合起来，实现更丰富的效果。最后介绍按照元素状态或位置进行的选择的伪选择器。

4.1. 基本选择器

我们重温第一个例子：

p {color: red;
}

这段规则会应用到全部 <p> 元素上。因为按照元素进行选择，这个选择器叫做元素选择器。此外还有按照元素的class属性值进行选择的类选择器，按照id属性值选择的标识选择器，以及更通用的，按照一般属性值进行选择的属性选择器。最后一个是选择全部元素的通用选择器。

代码7 基本选择器语法

元素 { 样式声明 }                     /* 元素选择器，按元素选择。 */.类名 { 样式声明 }                    /* 类选择器，按class属性选择。 */
元素.类名 { 样式声明 }                /* 类选择器可以指定适用元素。 */#标识 { 样式声明 }                    /* 标识选择器，按id属性选择。 */[属性] { 样式声明 }                   /* 属性选择器 */
[属性=值] { 样式声明 }              
[属性~=值] { 样式声明 }             
[属性|=值] { 样式声明 }             
[属性^=值] { 样式声明 }             
[属性$=值] { 样式声明 }             
[属性*=值] { 样式声明 }             
元素[属性=值] { 样式声明 }            /* 属性选择器可以指定适用元素。 */
[属性1=值1][属性2=值2] { 样式声明 }   /* 属性选择器并集。 */*{ 样式声明 }                         /* 通用选择器，选择全部元素。 */

这里规则相对复杂的是属性选择器，我们逐一介绍。

[attr]{ 样式声明 } 选择拥有属性 attr 的元素。
[attr=value] { 样式声明 } 选择拥有属性 attr ，并且值是 value 的元素。
[attr~=value] { 样式声明 } 如果元素的 attr 属性值是以空格分隔的列表，且列表包含 value ，选择元素。
[attr|=value] { 样式声明 } 如果元素的 attr 属性值以 value 或 value- 为前缀，选择元素。
[attr^=value] { 样式声明 } 如果元素的 attr 属性值以 value 为前缀，选择元素。
[attr$=value] { 样式声明 } 如果元素的 attr 属性值以 value 为后缀，选择元素。
[attr*=value] { 样式声明 } 如果元素的 attr 属性值以 value 为子串，选择元素。

4.2. 组合起来

选择器列表和组合器是将多个选择器结合起来，实现更强大功能的方法。选择器列表允许多个选择器使用相同的样式规则。组合器将多个选择器结合，构造更精细的选择方式。

4.2.1. 选择器列表

如果多个选择器需要使用同一组样式，可以使用选择器列表。列表选择器是用逗号分隔的选择器列表，逗号前后可以有空格、换行符或者其他空白符。

代码8 选择器列表

h1, h2, h3,
h4, h5, h6 {font-family: helvetica;
}

这个例子表示 <h1> - <h6> 标题元素都使用 helvetica 字体族。效果和分别使用6个元素选择器是一样的。

使用选择器列表可以简化编码，但有一点需要注意：如果列表中的某个选择器无效，整个规则都会被忽略。例如

代码9 无效的选择器列表

h1,
h2:invalid-pseudo,
h3 {font-family: sans-serif;
}

由于 h2:invalid-pseudo 无效， h1 和 h3 也不会采用样式块。

4.2.2. 组合器

组合器将多个选择器结合，构造更精细的选择方式。

代码10 组合器

选择器1 选择器2 { 样式声明 }     /* 下级组合器 */
选择器1 > 选择器2 { 样式声明 }   /* 直接下级组合器 */
选择器1 ~ 选择器2 { 样式声明 }   /* 后续同级组合器 */
选择器1 + 选择器2 { 样式声明 }   /* 邻接后续同级组合器 */

表11 组合器
下级组合器	`选择器1 选择器2 { 样式声明 }`
	选择器1匹配的元素中，若其下级元素匹配选择器2，选择下级元素。
直接下级组合器	`选择器1 > 选择器2 { 样式声明 }`
	选择器1匹配的元素中，若其直接下级元素匹配选择器2，选择下级元素。
后续同级组合器	`选择器1 ~ 选择器2 { 样式声明 }`
	选择器1匹配的元素中，若后续同级元素匹配选择器2，选择同级元素。
邻接后续同级组合器	`选择器1 + 选择器2 { 样式声明 }`
	选择器1匹配的元素中，若紧邻的后续同级元素匹配选择器2，选择同级元素。

4.3. 伪类和伪元素

伪类和伪元素是选择器的扩展，放置在选择器后面，提供了更精细的选择机制。伪类以冒号开头，如 button:hover 。伪元素以双冒号开头，如 p::first-letter 。

表12 常用伪类
伪类	说明
:hover	鼠标悬停时
:active	元素被点击瞬间
:focus	元素获得焦点时
:visited	已访问链接
:checked	选中的表单元素
:disabled	禁用状态
:nth-child(n)	元素的第n个下级元素
:not(选择器列表)	排除指定选择器
:is(选择器列表)	匹配任意一个选择器
:has(选择器列表)

表13 常用伪元素
伪元素	说明
::before	元素内容前
::after	元素内容后
::first-letter	元素内容的首字母
::first-line	元素内容的首行
::selection	用户选中的文本
::placeholder	输入框占位符

伪类和伪元素作为选择器的扩展，必须跟在选择器后面，不能独立使用。可以同时使用多个伪类，依次排列。伪类和伪元素也可以同时使用，伪类在前，伪元素在后。

代码11 伪类在前，伪元素在后。

span:hover:active { ... }
div[data-tooltip]:hover::after { ... }

5. 优先级和层叠

学习了选择器之后，我们会遇到一个问题：如果两个选择器命中了同一个元素，要选哪个呢？选优先级高的。优先级相同时，选层叠顺序靠后的。

每个选择器都有优先级，简单来说，越具体的选择器优先级越高。标识选择器比类选择器具体，因此优先级高于类选择器。类选择器可以看做是属性选择器的特例，二者优先级相同，又都高于元素选择器。

表14 选择器优先级
优先级	选择器
高	标识选择器
	类选择器属性选择器
低	元素选择器

如果两个选择器优先级相同，将会按照层叠顺序，即样式块的编写顺序，选择靠后的一个。

代码12 优先级相同时，选层叠顺序靠后者

p {color: red;
}/* 层叠顺序靠后者生效 */
p {color: blue;
}

6. 盒模型

CSS把元素放到一个“盒子”里面，通过排列盒子实现布局。每个盒子分为4层，由内而外依次是内容、内边距、边框、外边距。内容的宽度和高度由 width 和 height 确定。内边距是内容到边框之间的距离，由 padding 确定。边框是在内容周围的修饰性线条，线条宽度由 border-width 确定。外边距是边框到其他元素（边框）的距离，由 margin 确定。元素实际占据的空间包括内容、内边距和边框，不包括外边距。外边距是控制元素（边框）之间距离的。

图1 盒模型

内容的宽度和高度可以通过 width 和 height 设置。值可以是带距离单位的值、百分比（相对于上级元素）或 auto 。 auto 是默认值，表示让浏览器自行元素宽度。使用 min-width 和 max-width 可以设置元素的最小和最大宽度，这两个属性的优先级高于 width 。类似的，高度属性有 height 、 min-height 和 max-height 。

从内容到边框（内层）的距离叫内边距，使用 padding 设置，也可以在每个方向上单独设置内边距。内边距可以设置为负数。

代码13 内边距

padding: 12px;                 /* 内边距 */
padding: 8px 16px;             /* 顶底 | 左右 */
padding: 8px 16px 12px;        /* 顶 | 左右 | 底 */
padding: 8px 16px 12px -24px;  /* 顶 | 右 | 底 | 左 */
padding-top: 12px;             /* 顶部内边距 */
padding-right: 12px;           /* 右侧内边距 */
padding-bottom: 12px;          /* 底部内边距 */
padding-left: 12px;            /* 左侧内边距 */

边框是在内容周围的修饰性线条，线条有粗细，边框也会占用空间。同样的，可以为四个方向的边框单独设置样式。

代码14 边框样式

border-top-width
border-top-style
border-top-color
border-right-width
border-right-style
border-right-color
border-bottom-width
border-bottom-style
border-bottom-color
border-left-width
border-left-style
border-left-color

轮廓是在边框外侧紧贴边框的线条。轮廓不占用空间，意思是不会因为绘制轮廓而将其他元素“推开”，因此盒模型不包含轮廓。轮廓在边框外侧，这里通常是属于外边距的空间。如果外边距是0而轮廓宽度大于0，轮廓将“侵入”到其他元素的边框、内边距或内容所占用的空间。

外边距是边框（外侧）到其他元素边框（外侧）的距离。和内边距一样，外边距也可以设置成负值。

代码15 外边距

margin: 12px;                 /* 外边距 */
margin: 8px 16px;             /* 顶底 | 左右 */
margin: 8px 16px 12px;        /* 顶 | 左右 | 底 */
margin: 8px 16px 12px -24px;  /* 顶 | 右 | 底 | 左 */
margin-top: 12px;             /* 顶部外边距 */
margin-right: 12px;           /* 右侧外边距 */
margin-bottom: 12px;          /* 底部外边距 */
margin-left: 12px;            /* 左侧外边距 */

由于外边距和两个元素有关，必然产生一个问题：如果两个相邻元素都设置了 margin ，那么它们边框外侧之间的距离是多少呢？这个计算规则叫做外边距折叠，方法如下：

两个正外边距取最大值。
两个负外边距取最小值（绝对值最大）。
一正一负外边距取和。