什么是 CSS？
一、什么是 CSS？
CSS（Cascading Style Sheets），中文叫：
层叠样式表
它是一种用于描述 HTML 网页样式和布局的语言。
简单来说：
HTML 负责网页的结构，CSS 负责网页的外观。
比如：
一个网页：
我的博客 ------------------------ 今天学习 HTML 和 CSS ------------------------HTML 决定：
这里是标题
这里是一段文字
这里是一张图片
CSS 决定：
标题是什么颜色
字体多大
图片在哪里
页面如何排列
背景是什么颜色
二、为什么需要 CSS？
1. 没有 CSS 的网页
例如：
<h1>我的博客</h1> <p> 这是我的学习笔记 </p> <p> 今天学习 CSS </p>浏览器显示：
我的博客 这是我的学习笔记 今天学习 CSS虽然有内容，但是很普通。
2. 使用 CSS 后
添加：
h1 { color: blue; font-size: 40px; } p { color: gray; font-size: 20px; }效果：
我的博客 （蓝色、大字体） 这是我的学习笔记 （灰色、大字体）网页瞬间变得更加美观。
三、CSS 的作用
CSS 主要负责三个方面：
1. 美化网页
例如改变颜色：
HTML：
<p> Hello CSS </p>CSS：
p { color:red; }效果：
Hello CSS文字变成红色。
2. 控制网页布局
例如：
让两个盒子左右排列：
HTML：
<div class="box1"> 左边 </div> <div class="box2"> 右边 </div>CSS：
.box1, .box2 { width:300px; height:200px; } .box1 { float:left; } .box2 { float:right; }效果：
+----------+ +----------+ | 左边 | | 右边 | +----------+ +----------+3. 增加网页交互效果
例如鼠标经过：
button:hover { background-color:red; }鼠标放到按钮上：
按钮颜色改变四、CSS 的基本语法
CSS 由三部分组成：
选择器 { 属性: 属性值; }例如：
p { color:red; }解释：
| 部分 | 含义 |
|---|---|
| p | 选择谁 |
| color | 修改什么 |
| red | 修改成什么 |
例子：
h1 { color:blue; font-size:50px; }意思：
找到所有 h1 标签：
文字颜色变蓝
字体大小变成50px
五、CSS 如何引入 HTML？
CSS 有三种写法。
方式一：行内样式
直接写在标签里面。
例如：
<p style="color:red;"> Hello </p>效果：
文字红色。
优点：
简单。
缺点：
代码混乱，不方便维护。
实际开发很少使用。
方式二：内部样式表
写在：
<style> </style>里面。
例如：
<head> <style> p { color:red; } </style> </head>适合：
小案例。
方式三：外部样式表（推荐）
创建：
style.css里面：
p { color:red; }HTML：
<link rel="stylesheet" href="style.css">结构：
项目 ├── index.html └── style.css实际项目基本使用这种方式。
六、CSS 选择器
CSS 要先找到 HTML 元素。
这个过程叫：
选择器
1. 标签选择器
选择所有同类型标签。
HTML：
<p> 文字1 </p> <p> 文字2 </p>CSS：
p { color:red; }所有 p 都变红。
2. 类选择器
使用：
.定义。
HTML：
<p class="title"> 博客标题 </p>CSS：
.title { color:blue; }3. id 选择器
使用：
#例如：
HTML：
<div id="box"> 内容 </div>CSS：
#box { width:300px; }七、CSS 常见属性
1. 文字属性
颜色
color:red;字体大小
font-size:20px;字体粗细
font-weight:bold;字体
font-family:"微软雅黑";2. 背景属性
背景颜色：
background-color:black;背景图片：
background-image:url(image.jpg);3. 盒模型属性
CSS 中：
所有元素都是一个盒子。
结构：
+----------------+ | margin | | +----------+ | | | border | | | | +------+ | | | | |内容 | | | | | +------+ | | | +----------+ | +----------------+包含：
内容(content)
内边距(padding)
边框(border)
外边距(margin)
八、CSS 和 HTML 的关系
可以这样理解：
HTML | | 负责结构 | ↓ CSS | | 负责样式 | ↓ 漂亮网页比如：
HTML：
<div class="card"> <h2>C++学习</h2> <p> 学习笔记 </p> </div>CSS：
.card { width:300px; border:1px solid black; padding:20px; }最终：
+----------------+ | C++学习 | | | | 学习笔记 | +----------------+九、CSS 的特点
1. 层叠性（Cascading）
多个 CSS 规则作用于同一个元素：
p { color:red; } p { color:blue; }后面的会覆盖前面的：
结果：
蓝色2. 继承性
父元素的样式可以传给子元素。
HTML：
<div> <p> 文字 </p> </div>CSS：
div { color:red; }p 会继承红色。
3. 优先级
优先级：
!important ↓ 行内样式 ↓ id选择器 ↓ class选择器 ↓ 标签选择器十、现代 CSS 常用技术
学习 CSS 后会接触：
1. Flex 弹性布局
用于：
一行排列
居中
两栏布局
例如：
.container { display:flex; }2. Grid 网格布局
用于：
复杂页面布局。
3. 动画
例如：
.box { transition:all 0.3s; }4. 响应式设计
让网页适应：
手机
平板
电脑
十一、HTML + CSS 实际开发流程
开发网页：
第一步：
写 HTML：
<h1> 我的博客 </h1>确定结构。
第二步：
写 CSS：
h1{ color:blue; }美化页面。
第三步：
调整布局：
display:flex;完成网页。
十二、总结
| 技术 | 作用 |
|---|---|
| HTML | 网页结构 |
| CSS | 网页样式 |
| JavaScript | 网页行为 |
记忆：
HTML = 人的骨架 CSS = 人的衣服 JavaScript = 人的动作学习路线：
HTML标签 ↓ CSS基础 ↓ 盒模型 ↓ Flex布局 ↓ Grid布局 ↓ 动画 ↓ 响应式网页