# CSS
**Repository Path**: lihongyao/CSS
## Basic Information
- **Project Name**: CSS
- **Description**: css 基础知识总结
- **Primary Language**: CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 3
- **Forks**: 1
- **Created**: 2021-03-15
- **Last Updated**: 2025-10-25
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 简介
[CSS](https://developer.mozilla.org/zh-CN/docs/Glossary/CSS)（层叠样式表，全称 **Cascading Style Sheets**）是一种声明式语言，用于控制网页内容在浏览器中的呈现方式。它通过设置样式规则，定义页面元素的布局、颜色、字体、动画等外观效果，是 Web 开发中不可或缺的核心技术之一，与 HTML 和 JavaScript 并列为 Web 三大支柱技术（前端三剑客，又称三大马车）。
CSS 的主要功能是为 HTML 元素添加样式，也支持其他标记语言（如 SVG 和 XML）。它通过一组规则为选定的元素指定样式，规则由 **选择器** 和 **样式属性** 组成，其中样式属性由 **属性名** 和 **属性值** 配对定义。
以下是一个简单的 CSS 示例，将页面中的所有 HTML 段落元素样式设为黑色背景和黄色文字：
```css
p {
background-color: black;
color: yellow;
}
```
CSS 具备以下特点：
1. **层叠性**：多重样式规则可以叠加，浏览器根据优先级和特定性决定最终应用的样式。
2. **模块化**：CSS 可通过外部文件、嵌入式样式表或行内样式分离内容与样式，提升开发效率与代码维护性。
3. **响应式设计**：借助媒体查询等功能，CSS 能适应不同设备和屏幕尺寸。
CSS 的强大功能使其成为现代网页设计中不可或缺的工具，能够帮助开发者轻松实现视觉上的吸引力和用户体验上的优化。
# 引入方式
CSS 的引入方式主要有三种：**行内样式**、**内嵌样式**、**外链样式**。
## 行内样式（Inline Style）
直接在 HTML 元素的 style 属性中定义样式。
适合小范围、临时的样式调整，但不利于代码复用和维护。
```html
这是行内样式的示例
```
## 内部样式表（Internal Style Sheet）
在 HTML 文件的 \
```
## 外部样式表（External Style Sheet）
通过 \ 标签引入外部的 CSS 文件，常用于大型项目，利于代码复用和集中管理。
这是推荐的方式，能够保持结构与样式分离。
```html
```
**外部 CSS 示例文件** (index.css)：
```css
@charset "utf-8";
p {
color: green;
font-size: 18px;
}
```
> 注意：css文件第一行代码需指定字符编码格式，防止出现乱码：`@charset "utf-8";`
这三种方式可以根据具体需求灵活选择，甚至可以混合使用，但一般推荐优先使用外部样式表以保持代码整洁和维护性。
# 通过< link >标签引用CSS文件
在实际的项目开发过程中，我们一般都是将CSS单独存放在一个文件夹中，然后在HTML页面中通过如下形式进行引用。
```html
```
通过 \ 标签引用外部 CSS 文件有以下主要好处：
1. **实现样式与内容分离**
将 CSS 样式单独存储在外部文件中，HTML 文件只专注于页面结构，便于维护和更新。
遵循 Web 开发的**关注点分离（Separation of Concerns）**原则，使代码更清晰。
2. **提高代码复用性**
外部 CSS 文件可以被多个 HTML 文件引用，无需为每个页面重复编写相同的样式。
当需要修改全局样式时，只需更新一个 CSS 文件即可，无需逐一修改每个 HTML 文件。
3. **提升页面加载效率**
外部 CSS 文件可以被浏览器缓存，当用户访问同一网站的多个页面时，样式文件无需重复下载，从而加快页面加载速度。
4. **方便团队协作**
团队成员可以分别负责 HTML 和 CSS 的编写与优化，提高开发效率。
外部 CSS 文件作为独立模块，可以在版本控制系统中单独跟踪和管理。
5. **支持媒体查询和条件加载**
使用 \ 标签时，可以根据设备类型或屏幕尺寸加载不同的 CSS 文件，便于实现**响应式设计**。
```html
```
# 引用优先级
在 CSS 中，不同的引用方式之间存在优先级，决定了样式规则的应用顺序。以下是 CSS 三种引用方式的优先级从低到高的总结：
**优先级从低到高**
1. 外部样式表：
定义在外部的 .css 文件中，通过 \ 引入。
优先级最低，适合全局通用的样式设置
2. 内部样式表：
写在 HTML 文档的 \