CSS 全面教学文档<\/h1>

一、CSS 基础概念<\/h2>

1.1 什么是 CSS<\/h3>

CSS (Cascading Style Sheets，层叠样式表) 是一种用于描述网页信息格式化和显示方式的语言，主要功能是控制网页的视觉表现，包括：<\/p>

字体、颜色、布局等样式结构<\/li>
文档内容与表现形式的分离<\/li>

提高网页可维护性和样式灵活性<\/li> <\/ul>

CSS 可以控制几乎所有可见元素的样式：<\/p>

文本样式（字体、大小、颜色）<\/li>
元素位置和大小<\/li>
背景色<\/li>

交互效果<\/li> <\/ul>

1.2 CSS 语法规范<\/h3>

基本语法结构：<\/p>

选择器<\/span> {
<\/span><\/span>  属性1:<\/span> 值1<\/span>;
<\/span><\/span>  属性2:<\/span> 值2<\/span>;
<\/span><\/span>}
<\/span><\/span><\/code><\/pre>示例：<\/p>
<head<\/span>>
<\/span><\/span>  <style<\/span>>
<\/span><\/span>    h4<\/span> {
<\/span><\/span>      color<\/span>: blue<\/span>;
<\/span><\/span>      font-size<\/span>: 100<\/span>px<\/span>;
<\/span><\/span>    }
<\/span><\/span>  <\/style<\/span>>
<\/span><\/span><\/head<\/span>>
<\/span><\/span><\/code><\/pre>1.3 CSS 的三大特性<\/h3>
层叠性<\/h4>

相同选择器设置相同样式时，一个样式会覆盖另一个冲突样式<\/li>
解决样式冲突的原则：就近原则（哪个样式离结构近就执行哪个）<\/li>
样式不冲突时不会层叠<\/li>
<\/ul>
继承性<\/h4>

子标签会继承父标签的某些样式（如文本颜色和字号）<\/li>
可继承属性：以 text-<\/code>、font-<\/code>、line-<\/code> 开头的属性，以及 color<\/code> 属性<\/li>
行高继承示例：
body<\/span> {
<\/span><\/span>  font<\/span>:12<\/span>px<\/span>\/<\/span>1.5<\/span> Microsoft YaHei;
<\/span><\/span>}
<\/span><\/span><\/code><\/pre>
子元素行高 = 子元素文字大小 × 1.5<\/li>
<\/ul>
<\/li>
<\/ul>
优先级<\/h4>

选择器相同时执行层叠性<\/li>
选择器不同时根据选择器权重执行<\/li>
权重组成（4组数字，不进位）：

继承\/通配符：0<\/li>
标签选择器：1<\/li>
类\/伪类选择器：10<\/li>
ID选择器：100<\/li>
行内样式：1000<\/li>
!important：∞<\/li>
<\/ul>
<\/li>
权重比较：从左到右逐位比较<\/li>
继承的权重为0（未直接选中的元素）<\/li>
复合选择器有权重叠加<\/li>
<\/ul>
二、CSS 注释<\/h2>
CSS 注释格式：<\/p>
\/* 这是一个单行注释 *\/<\/span>
<\/span><\/span>
<\/span><\/span>\/*
<\/span><\/span><\/span>这是一个
<\/span><\/span><\/span>多行注释
<\/span><\/span><\/span>*\/<\/span>
<\/span><\/span>
<\/span><\/span>body<\/span> {
<\/span><\/span>  background-color<\/span>: #f0f0f0<\/span>; \/* 背景颜色设置为浅灰色 *\/<\/span>
<\/span><\/span>}
<\/span><\/span><\/code><\/pre>三、CSS 选择器<\/h2>
3.1 基础选择器<\/h3>
标签选择器<\/h4>
标签名<\/span> {
<\/span><\/span>  属性1:<\/span> 值1<\/span>;
<\/span><\/span>  属性2:<\/span> 值2<\/span>;
<\/span><\/span>}
<\/span><\/span><\/code><\/pre>
优点：快速统一同类标签样式<\/li>
缺点：无法差异化设置<\/li>
<\/ul>
类选择器<\/h4>
.<\/span>类名<\/span> {
<\/span><\/span>  属性1:<\/span> 值1<\/span>;
<\/span><\/span>}
<\/span><\/span><\/code><\/pre>
HTML 中使用 class<\/code> 属性<\/li>
一个元素可以有多个类名（用空格分隔）<\/li>
<\/ul>
ID 选择器<\/h4>
#id名<\/span> {
<\/span><\/span>  属性1:<\/span> 值1<\/span>;
<\/span><\/span>}
<\/span><\/span><\/code><\/pre>
每个 HTML 文档中 ID 应唯一<\/li>
<\/ul>
通配符选择器<\/h4>
*<\/span> {
<\/span><\/span>  属性1:<\/span> 值1<\/span>;
<\/span><\/span>}
<\/span><\/span><\/code><\/pre>
选择页面所有元素<\/li>
<\/ul>
3.2 复合选择器<\/h3>
后代选择器<\/h4>
元素<\/span>1<\/span> 元素<\/span>2<\/span> {
<\/span><\/span>  样式声明<\/span>;
<\/span><\/span>}
<\/span><\/span><\/code><\/pre>
选择元素1内的所有元素2（不限层级）<\/li>
<\/ul>
子选择器<\/h4>
元素<\/span>1<\/span> ><\/span> 元素<\/span>2<\/span> {
<\/span><\/span>  样式声明<\/span>;
<\/span><\/span>}
<\/span><\/span><\/code><\/pre>
只选择元素1的直接子元素2<\/li>
<\/ul>
并集选择器<\/h4>
元素<\/span>1<\/span>,<\/span> 元素<\/span>2<\/span> {
<\/span><\/span>  样式声明<\/span>;
<\/span><\/span>}
<\/span><\/span><\/code><\/pre>
同时选择多个元素<\/li>
<\/ul>
伪类选择器<\/h4>
选择器<\/span>:<\/span>伪类<\/span> {
<\/span><\/span>  样式声明<\/span>;
<\/span><\/span>}
<\/span><\/span><\/code><\/pre>链接伪类选择器<\/h5>

:link<\/code>：未访问链接<\/li>
:visited<\/code>：已访问链接<\/li>
:hover<\/code>：鼠标悬停<\/li>
:active<\/code>：激活链接<\/li>
使用顺序：LVHA（:link → :visited → :hover → :active）<\/li>
<\/ul>
示例：<\/p>
a<\/span> {
<\/span><\/span>  color<\/span>: gray<\/span>;
<\/span><\/span>}
<\/span><\/span>a<\/span>:hover<\/span> {
<\/span><\/span>  color<\/span>: red<\/span>;
<\/span><\/span>}
<\/span><\/span><\/code><\/pre>:focus 伪类选择器<\/h5>
input<\/span>:focus<\/span> {
<\/span><\/span>  background-color<\/span>: yellow<\/span>;
<\/span><\/span>}
<\/span><\/span><\/code><\/pre>
用于获取焦点的表单元素<\/li>
<\/ul>
四、CSS 应用方式<\/h2>

内联样式（直接写在 HTML 元素中）<\/li>
内部样式表（写在 <style><\/code> 标签内）<\/li>
外部样式表（单独的 .css 文件）<\/li>
<\/ol>
五、CSS 最佳实践<\/h2>

合理使用注释记录代码意图<\/li>
遵循选择器优先级规则<\/li>
利用继承性简化代码<\/li>
外部样式表提高可维护性<\/li>
使用复合选择器精确控制元素样式<\/li>
<\/ol>
六、总结<\/h2>
CSS 是网页设计的核心技术之一，掌握其基础概念、注释方法、选择器类型及优先级规则是构建美观、可维护网页的关键。通过灵活运用各种选择器和理解样式层叠原理，开发者可以精确控制网页的每个视觉细节。<\/p>