一、CSS概念
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述 HTML 或 XML（如 SVG、XHTML）文档 样式 的样式表语言。它控制网页的 外观和布局，包括字体、颜色、间距、背景、动画等视觉效果。
二、CSS 的作用
-
样式与结构分离
-
HTML 负责网页的 内容结构（如标题、段落、图片）。
-
CSS 负责 视觉表现（如字体大小、颜色、布局）。
-
两者分离使代码更易维护和修改。
-
-
控制网页外观
-
精确调整元素的 颜色、字体、间距、边框、背景 等。
-
实现 响应式设计（适配手机、平板、电脑等不同设备）。
-
-
布局与动画
-
通过 Flexbox、Grid 等实现复杂布局。
-
使用 过渡（Transition）和动画（Animation） 增强交互体验。
-
三、CSS 的基本工作原理
-
选择器（Selector）
指定要样式化的 HTML 元素（如p、.class、#id）。 -
属性与值（Property & Value）
定义具体的样式规则（如color: red;）。 -
层叠（Cascading）
-
当多个样式规则冲突时，按 优先级 决定最终效果。
-
优先级规则：
!important> 内联样式 > ID > 类 > 元素选择器。
-
四、CSS 基本语法
选择器 {属性: 值; /* 声明块 */
}h1 {color: red; /* 文字颜色 */font-size: 24px; /* 字号 */
}五、CSS 的三种引入方式
| 方式 | 示例 | 适用场景 |
|---|---|---|
| 内联样式 | <p style="color: red;"> | 快速测试，但不推荐大规模使用 |
| 内部样式表 | <style> p { color: red; } </style> | 小型项目或单页 |
| 外部样式表 | <link href="style.css" rel="stylesheet"> | 主流方式，便于维护 |
六、CSS 基础选择器
| 选择器类型 | 示例 | 作用 |
|---|---|---|
| 元素选择器 | p | 选择所有 <p> 标签 |
| 类选择器 | .active | 选择 class="active" 的元素 |
| ID 选择器 | #main | 选择 id="main" 的元素 |
| 通配选择器 | * | 选择所有元素 |
| 属性选择器 | [type="text"] | 选择指定属性的元素 |
| 分组选择器 | h1, h2 | 同时选择多个元素 |
补充说明
优先级：ID 选择器 > 类选择器 > 元素选择器 > 通配选择器。
组合使用：基础选择器可组合成更复杂的选择器（如后代选择器
.box p）。
实际应用：
1. 元素选择器（标签选择器）
场景：统一设置所有段落文本的样式。
<p>这是一个普通段落。</p><p>这是另一个段落。</p>/* 选中所有 <p> 元素 */p {font-size: 36px;line-height: 1.5;color: #bd2222;border: 3px solid #ccc;}
2. 类选择器（Class Selector）
场景：标记需要高亮的按钮和警告文本。
<button class="btn-primary">提交</button><div class="alert">警告信息！</div> /* 选中所有 class="btn-primary" 的元素 */.btn-primary {background: blue;color: white;}/* 选中所有 class="alert" 的元素 */.alert {color: rgb(178, 192, 95);font-weight: bold;background: rgb(48, 35, 35);border: 1px solid rgb(178, 192, 95);width:100px;height:20px;}
3. ID 选择器
场景：设置页面顶部导航栏的样式（ID 唯一）。
<nav id="main-nav"><a href="#">首页</a><a href="#">登录</a><a href="#">注册</a></nav> /* 选中 id="main-nav" 的元素 */#main-nav {background: black;padding: 10px;}/* 选中导航栏内的 <a> 标签 */#main-nav a {color: white;text-decoration: none;padding: 5px 10px;}
4. 通配选择器（Universal Selector）
场景：重置默认边距和盒模型。
/* 全局重置 */
* {margin: 0;padding: 0;box-sizing: border-box;
}所有元素的外边距和内边距被清零，盒模型更易控制。
5. 属性选择器（Attribute Selector）
场景：为所有外部链接添加图标。
<a href="https://www.baidu.com" target="_blank">外部链接</a><a href="./my.html" name="inner">内部链接</a> /* 选中带有 target="_blank" 的 <a> 标签 */a[target="_blank"]::after {content: "↗";margin-left: 5px;}a[name="inner"]::after {content: "↗";margin-left: 5px;}
6. 分组选择器（Grouping Selector）
场景：统一标题字体。
<h1>标题1</h1><h2>标题2</h2><h3>标题3</h3>/* 同时选中 h1, h2, h3 */h1,h2,h3 {font-family: "Microsoft YaHei", sans-serif;margin-bottom: 10px;color: blueviolet;}
综合案例：一个简单的卡片组件
<div class="card" id="featured-card"><h2 class="card-title">特别推荐</h2><p class="card-content">请单击查看详情</p><button type="button" class="btn">了解更多</button></div> /* 元素选择器 */p {margin: 5px 0;}/* 类选择器 */.card {width: 150px;height: 180px;/* 为卡片添加边框 */border: 5px solid #ddd;padding: 5px;}.card-title {font-size: 25px;text-align: center;}.card-content {font-size: 20px;text-align: center;color: cadetblue;} .btn {background: orange;color: white;margin-left: 60px;margin-top: 30px;}/* ID 选择器 */#featured-card {border-color: gold;/* 高亮特色卡片 */}
)
设计模式)
