第二章 CSS样式表 第一节
概述
本节内容主要介绍CSS（层叠样式表，Cascading Style Sheets）的基本概念、语法规则以及如何通过CSS为网页元素设置样式。学习本节内容后，考生将能够理解CSS的作用和工作原理，掌握基本的CSS语法，能够编写简单的样式规则来美化网页，进而为后续复杂的Web设计打下坚实基础。
学习目标：
- 理解CSS的定义和作用
- 掌握CSS的基本语法结构
- 熟悉CSS的引用方式和优先级规则
- 理解常见的CSS属性及其使用方法
- 通过实例掌握CSS样式的编写与调试
核心概念
1. CSS（层叠样式表）
CSS是一种用来控制网页文档样式和布局的语言，它与HTML分离，专注于页面的表现形式。通过CSS，可以定义字体、颜色、间距、边框、背景等样式，使网页更加美观和易于维护。
2. 选择器（Selector）
选择器用于指定HTML文档中需要应用样式的元素。常见选择器包括元素选择器、类选择器、ID选择器、属性选择器等。
3. 属性（Property）与属性值（Value）
属性是CSS样式的具体表现项目，如color、font-size、margin等。属性值则是属性的具体设置，比如color的属性值为red、#FF0000等。
4. 声明块（Declaration Block）
由一组属性和属性值组成，包裹在花括号{}中，定义了选择器所选择元素的样式。
5. 规则集（Rule Set）
由选择器和声明块组成的完整样式规则。
6. 级联（Cascade）
当多个样式规则作用于同一元素时，浏览器按照一定的优先级规则决定最终应用哪条样式，这个过程称为级联。
7. 样式表类型
- 内联样式（Inline CSS）
- 内部样式表（Embedded CSS）
- 外部样式表（External CSS）
原理分析
CSS的工作原理
浏览器在加载网页时，会首先解析HTML结构，然后根据CSS样式表的规则对网页元素进行样式渲染。
- 选择器匹配：浏览器根据选择器规则找到文档中对应的元素。
- 样式应用：将声明块中的属性和属性值应用到匹配元素上。
- 级联与继承：当元素同时被多个规则选中时，浏览器根据优先级规则决定最终样式；同时，某些样式会从父元素继承给子元素。
- 渲染显示：经过样式计算后，浏览器将元素按照样式渲染到页面上。
级联优先级规则
CSS优先级从高到低如下：
- !important声明（最高优先级）
- 内联样式
- ID选择器
- 类选择器、属性选择器、伪类选择器
- 元素选择器、伪元素选择器
- 通配符选择器(*)（最低优先级）
当优先级相同时，后出现的规则覆盖先出现的。
样式继承
某些CSS属性（如color、font-family）会自动被子元素继承，便于统一设置文本样式；而其他属性（如margin、padding）不会继承，需要单独设置。
详细内容
1. CSS语法结构详解
CSS规则由选择器和声明块组成，格式如下：
选择器 {
属性: 属性值;
属性: 属性值;
}
- 每条属性声明以分号结尾
- 花括号定义声明块范围
- 选择器指定样式作用的元素范围
示例：
p {
color: blue;
font-size: 16px;
}
表示页面中所有
元素的文字颜色为蓝色，字体大小为16像素。
2. CSS选择器类型详解
- 元素选择器：直接使用HTML标签名选择元素
- 例：
div {}选择所有div元素
- 例：
- 类选择器：使用
.加类名，选择具有该类的元素- 例：
.menu {}选择class="menu"的元素
- 例：
- ID选择器：使用
#加ID名，选择唯一ID元素- 例：
#header {}选择id="header"的元素
- 例：
- 属性选择器：根据元素属性选择
- 例：
input[type="text"] {}选择所有文本输入框
- 例：
- 伪类选择器：选择元素的特殊状态
- 例：
a:hover {}选择鼠标悬停的链接
- 例：
3. CSS常用属性介绍
- 字体与文本
color：文字颜色font-size：字体大小font-family：字体系列font-weight：字体粗细text-align：文本对齐方式
- 盒模型属性
margin：外边距padding：内边距border：边框样式、宽度和颜色
- 背景属性
background-color：背景色background-image：背景图像background-repeat：背景是否重复
- 布局属性
width、height：宽高设置display：元素显示类型（如block、inline）
4. CSS样式的引用方式
- 内联样式：直接在HTML元素中使用style属性
<p style="color: red;">红色文字</p>
- 内部样式表：在HTML文档的标签中使用