前端 · 5 分钟阅读
CSS 快速入门教程
目录
概述
CSS（层叠样式表）用来描述 HTML 文档的表现，控制网页的样式和布局。它不是编程语言，一份样式表可以应用到多个页面。
核心概念
| 概念 | 说明 |
|---|---|
| 语法 | 选择器和声明块的结构 |
| 选择器 | 指定要样式化的元素 |
| 优先级 | 决定样式的应用顺序 |
| 盒模型 | 定义元素的尺寸和空间 |
CSS 语法
结构
基本语法
h1 {
width: 600px; /* 宽度 */
height: 1200px; /* 高度 */
margin: auto; /* 外边距 */
}
样式类型
内联样式
直接写在 HTML 标签的 style 属性里，只对当前元素生效，优先级最高（除了 !important）。
<p style="color:red"> H1</p>
内部样式表
写在 HTML 的 <head> 里，用 <style> 标签包裹，只对当前页面生效。
外部样式表
通过 <link> 引入外部 CSS 文件，多个页面可以共用，方便维护。
CSS选择器
用来选择要应用样式的 HTML 元素：
类型选择器
直接用 HTML 标签名，比如 h1、p、div，会影响所有该类型的元素。
类选择器
以 . 开头，选择特定 class 的元素，可以应用到多个元素。
.my-p{
color: red;
}
ID 选择器
以 # 开头，选择特定 id 的元素。每个 ID 应该是唯一的。
#my-p{
color:red
}
属性选择器
根据元素的属性来选择，支持多种匹配方式。
/* 精确匹配 */
a[title="home"]{
color: red
}
通用选择器
用 * 选择所有元素。慎用，可能影响性能。
*{
font-family: "Pingfang SC"
}
组合使用
多个条件
h1.my-p{
font-family: "Pingfang SC",
color: red
}
多个选择器
h1, h2 {
font-size: 20px
}
后代选择器
div h1 {
font-size: 20px
}
CSS 优先级
优先级规则
- !important 声明
- 内联样式
- ID 选择器
- 类选择器
- 类型选择器
- 继承样式
盒子属性
盒模型组成
| 部分 | 说明 |
|---|---|
| Content | 内容区域 |
| Padding | 内边距 |
| Border | 边框 |
| Margin | 外边距 |
指定样式，如何布局
CSS 里的颜色
CSS 里的字体
布局
相邻元素的外边距会合并，取较大值。
css 定位（position）
| 值 | 说明 | 应用场景 |
|---|---|---|
| static | 默认定位 | 正常文档流 |
| relative | 相对定位 | 微调元素位置 |
| absolute | 绝对定位 | 弹窗、悬浮元素 |
| fixed | 固定定位 | 固定导航栏 |
| sticky | 粘性定位 | 滚动时固定导航 |