CSS 快速入门教程
概述
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 | 粘性定位 | 滚动时固定导航 |