CSS（Cascading Style Sheets，层叠样式表） 是一种用于描述 HTML 或 XML 文档外观和格式的样式表语言。它用于控制网页的布局、颜色、字体、间距等视觉表现，使内容与表现分离，便于维护和更新。
主要功能：
-
布局控制：定义元素的位置、大小、排列方式等。
-
样式设置：设置字体、颜色、背景、边框等。
-
响应式设计：通过媒体查询实现不同设备的适配。
-
动画与过渡：创建动态效果，提升用户体验。
css语法：css通常由选择器，属性和属性值组成，多个规则可以组合在一起，以便于同时应用多个样式
html
选择器{
属性1： 属性值1；
属性2： 属性值2;
}1.选择器的生明里面可以写无数条属性。
2.声明的每一行属性，都需要以英文分号结尾；
3.声明中所有属性和值都是以键值对这种形式出现的；
例如：
html
/*这是一个p标签选择器*/
p{
color: bule;
font-size: 16px;
}CSS 的导入方式
CSS 可以通过多种方式引入到 HTML 文档中，常见的有以下三种：
1. 内联样式（Inline Styles）
直接在 HTML 元素的 style 属性中编写 CSS。
以下的就会出现一个颜色为蓝色的一句"这是一个段落"。
html
<p style="color: blue; font-size: 14px;">这是一个段落。</p>特点：
-
优先级最高。
-
不利于维护和复用。
2. 内部样式表（Internal Style Sheet）
在 HTML 文件的 <head> 部分使用**<style>**标签定义 CSS。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内部样式表示例</title>
<style>
p {
color: blue;
font-size: 14px;
}
</style>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>特点：
-
适用于单个页面。
-
优先级低于内联样式，但高于外部样式表。
3. 外部样式表（External Style Sheet）
将 CSS 代码保存在独立的**.css 文件**中，通过 <link> 标签引入。
步骤：
- 创建 CSS 文件（如
styles.css）：
html
p {
color: blue;
font-size: 14px;
}2，在 HTML 文件中引入：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外部样式表示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>特点：
-
最适合大型项目，便于维护和复用。
-
优先级低于内联和内部样式表。
4. 使用 @import 导入
在 CSS 文件中通过 @import 引入其他 CSS 文件。
css
html
@import url('styles.css');特点：
-
适用于模块化 CSS。
-
加载顺序可能影响性能。
总结
| 导入方式 | 适用场景 | 优先级 | 维护性 |
|---|---|---|---|
| 内联样式 | 单个元素样式 | 最高 | 差 |
| 内部样式表 | 单个页面样式 | 中 | 一般 |
| 外部样式表 | 多页面或大型项目 | 低 | 好 |
@import |
模块化 CSS | 低 | 一般 |
根据项目需求选择合适的导入方式，通常推荐使用外部样式表以实现样式与结构的分离。