深入理解 CSS：基础概念、注释、选择器及优先级
字数 1201 2025-08-18 17:33:23
CSS 全面教学文档
一、CSS 基础概念
1.1 什么是 CSS
CSS (Cascading Style Sheets，层叠样式表) 是一种用于描述网页信息格式化和显示方式的语言，主要功能是控制网页的视觉表现，包括：
- 字体、颜色、布局等样式结构
- 文档内容与表现形式的分离
- 提高网页可维护性和样式灵活性
CSS 可以控制几乎所有可见元素的样式：
- 文本样式（字体、大小、颜色）
- 元素位置和大小
- 背景色
- 交互效果
1.2 CSS 语法规范
基本语法结构：
选择器 {
属性1: 值1;
属性2: 值2;
}
示例：
<head>
<style>
h4 {
color: blue;
font-size: 100px;
}
</style>
</head>
1.3 CSS 的三大特性
层叠性
- 相同选择器设置相同样式时，一个样式会覆盖另一个冲突样式
- 解决样式冲突的原则：就近原则（哪个样式离结构近就执行哪个）
- 样式不冲突时不会层叠
继承性
- 子标签会继承父标签的某些样式（如文本颜色和字号）
- 可继承属性：以
text-、font-、line-开头的属性，以及color属性 - 行高继承示例：
body { font:12px/1.5 Microsoft YaHei; }- 子元素行高 = 子元素文字大小 × 1.5
优先级
- 选择器相同时执行层叠性
- 选择器不同时根据选择器权重执行
- 权重组成（4组数字，不进位）：
- 继承/通配符：0
- 标签选择器：1
- 类/伪类选择器：10
- ID选择器：100
- 行内样式：1000
- !important：∞
- 权重比较：从左到右逐位比较
- 继承的权重为0（未直接选中的元素）
- 复合选择器有权重叠加
二、CSS 注释
CSS 注释格式：
/* 这是一个单行注释 */
/*
这是一个
多行注释
*/
body {
background-color: #f0f0f0; /* 背景颜色设置为浅灰色 */
}
三、CSS 选择器
3.1 基础选择器
标签选择器
标签名 {
属性1: 值1;
属性2: 值2;
}
- 优点：快速统一同类标签样式
- 缺点：无法差异化设置
类选择器
.类名 {
属性1: 值1;
}
- HTML 中使用
class属性 - 一个元素可以有多个类名（用空格分隔）
ID 选择器
#id名 {
属性1: 值1;
}
- 每个 HTML 文档中 ID 应唯一
通配符选择器
* {
属性1: 值1;
}
- 选择页面所有元素
3.2 复合选择器
后代选择器
元素1 元素2 {
样式声明;
}
- 选择元素1内的所有元素2（不限层级）
子选择器
元素1 > 元素2 {
样式声明;
}
- 只选择元素1的直接子元素2
并集选择器
元素1, 元素2 {
样式声明;
}
- 同时选择多个元素
伪类选择器
选择器:伪类 {
样式声明;
}
链接伪类选择器
:link：未访问链接:visited：已访问链接:hover：鼠标悬停:active：激活链接- 使用顺序：LVHA（:link → :visited → :hover → :active）
示例：
a {
color: gray;
}
a:hover {
color: red;
}
:focus 伪类选择器
input:focus {
background-color: yellow;
}
- 用于获取焦点的表单元素
四、CSS 应用方式
- 内联样式（直接写在 HTML 元素中）
- 内部样式表（写在
<style>标签内） - 外部样式表（单独的 .css 文件）
五、CSS 最佳实践
- 合理使用注释记录代码意图
- 遵循选择器优先级规则
- 利用继承性简化代码
- 外部样式表提高可维护性
- 使用复合选择器精确控制元素样式
六、总结
CSS 是网页设计的核心技术之一，掌握其基础概念、注释方法、选择器类型及优先级规则是构建美观、可维护网页的关键。通过灵活运用各种选择器和理解样式层叠原理，开发者可以精确控制网页的每个视觉细节。