CSS 引入方式与基础语法
行内样式
概述： 在 HTML 标签的 style 属性中直接编写 CSS，只作用于该标签。优先级较高，但不利于维护。
<p style="color: red; font-size: 18px;">这是红色文字</p>
| 位置 | 说明 |
|---|---|
style 属性 | 标签行内编写样式，CSS 声明之间用分号分隔 |
内部样式
概述： 在 HTML 文档的 <head> 中使用 <style> 标签编写 CSS，作用于整个页面。
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
| 位置 | 说明 |
|---|---|
<style> 标签 | 放在 <head> 内，同时支持 media 属性做媒体查询 |
外部样式
概述： 将 CSS 独立成 .css 文件，在 HTML 中通过 <link> 引用。可复用、易维护。
<head>
<link rel="stylesheet" href="css/style.css">
</head>
| 属性 | 说明 | 常用值 |
|---|---|---|
rel | 文件关系 | stylesheet |
href | CSS 文件路径 | 相对路径/绝对路径 |
media | 媒体类型 | all（默认）、screen、print |
CSS 基础语法结构
概述： CSS 样式由选择器 + 声明块组成，声明块包含多条 属性:值 语句。
选择器 {
属性1: 值1;
属性2: 值2;
}
| 语法部分 | 说明 |
|---|---|
| 选择器 | 用于匹配页面上的元素（如 p、.class、#id） |
| 属性 | 要设置的样式属性 |
| 值 | 属性对应的取值 |
CSS 注释
概述： 用于在 CSS 代码中添加说明，不会被浏览器执行。
/* 这是单行或多行注释 */
p {
color: green; /* 这是一行内注释 */
}
| 格式 | 说明 |
|---|---|
/* 注释内容 */ | CSS 注释，不允许嵌套 |
CSS 选择器
元素（标签）选择器
概述： 使用 HTML 标签名作为选择器，选中页面上所有该类型的元素。
p {
color: red;
font-size: 16px;
}
| 格式 | 说明 |
|---|---|
标签名 { 属性:值; } | 选中该标签的所有元素 |
类选择器
概述： 使用 HTML 元素的 class 属性作为选择器，可对多个元素分类和重复使用样式。
<p class="red-text">红色文字</p>
.red-text {
color: red;
}
| 格式 | 说明 |
|---|---|
.类名 | 选中所有 class 属性等于该类名的元素 |
ID 选择器
概述： 使用 HTML 元素的 id 属性作为选择器，每个 id 在页面中唯一。
<p id="content">段落文字</p>
#content {
color: blue;
}
| 格式 | 说明 |
|---|---|
#id名 | 选中 id 属性等于该值的元素（唯一） |
群组选择器
概述： 用逗号分隔多个选择器，对它们统一设置样式。
h1, h2, p {
color: green;
}
| 格式 | 说明 |
|---|---|
选择器1, 选择器2 | 选中所有匹配的元素，应用相同样式 |
后代选择器
概述： 选中某个元素内部所有匹配的后代元素。
div p {
color: orange;
}
| 格式 | 说明 |
|---|---|
选择器A 选择器B | 选中 A 元素内的所有 B 元素（任意嵌套层级） |
子代选择器
概述： 选中某个元素的直接子元素（不包含嵌套更深的层级）。
div > p {
color: purple;
}
| 格式 | 说明 |
|---|---|
父选择器 > 子选择器 | 选中所有指定父元素的直接子元素 |
伪类选择器（常用）
概述： 选中特定状态的元素，如鼠标悬停、已访问链接等。
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }
p:first-child { font-weight: bold; }
p:last-child { text-decoration: underline; }
| 伪类 | 说明 |
|---|---|
:link | 未访问的链接 |
:visited | 已访问的链接 |
:hover | 鼠标悬停状态 |
:active | 点击时状态 |
:first-child | 作为父元素第一个子元素 |
:last-child | 作为父元素最后一个子元素 |
伪元素选择器
概述： 创建一些不在源 HTML 中的元素，比如首字母、插入内容等。
p::first-letter { font-size: 2em; color: red; }
p::first-line { font-weight: bold; }
p::before { content: "★ "; color: gold; }
p::after { content: " ✔"; color: green; }
| 伪元素 | 说明 |
|---|---|
::first-letter | 元素第一个字母 |
::first-line | 元素第一行 |
::before | 元素内容前插入内容 |
::after | 元素内容后插入内容 |
CSS 文本样式属性
color 文本颜色
概述： 设置文字颜色，可以使用颜色名称、HEX、RGB、RGBA 等表示。
p {
color: red;
}
h1 {
color: #ff0000;
}
span {
color: rgb(0, 128, 0);
}
em {
color: rgba(255, 0, 0, 0.5);
}
| 取值类型 | 示例 |
|---|---|
| 颜色关键字 | red, blue |
| 十六进制 | #ff0000, #00ff00 |
| RGB | rgb(255,0,0) |
| RGBA | rgba(255,0,0,0.5) |
font-size 字体大小
概述： 设置文字的大小。
p {
font-size: 16px;
}
h1 {
font-size: 2em; /* 相对于父元素字体大小 */
}
| 单位 | 说明 |
|---|---|
px | 像素（常用） |
em | 相对于父元素字体大小 |
rem | 相对于根元素字体大小 |
% | 相对于父元素字体大小的百分比 |
font-family 字体族
概述： 设置文字的字体，可以指定多个字体以防不支持。
p {
font-family: "微软雅黑", Arial, sans-serif;
}
| 值 | 说明 |
|---|---|
| 字体名 | 中文字体需加引号，英文字体可直接写 |
| 字体族 | serif 衬线, sans-serif 非衬线, monospace 等宽字体 |
font-weight 字重（粗细）
概述： 设置文字的粗细。
p {
font-weight: bold; /* 加粗 */
}
h1 {
font-weight: 700; /* 数字表示，常用 400 正常, 700 加粗 */
}
| 值 | 说明 |
|---|---|
normal | 正常（默认） |
bold | 加粗 |
| 100 ~ 900 | 数值越大越粗 |
font-style 字体样式
概述： 设置字体为正常、斜体等。
em {
font-style: italic;
}
| 值 | 说明 |
|---|---|
normal | 正常（默认） |
italic | 斜体字（常用于强调） |
oblique | 倾斜文字（较少用） |
text-align 文本对齐
概述： 设置文本在其容器中的水平对齐方式。
p { text-align: left; }
h1 { text-align: center; }
div { text-align: right; }
| 值 | 说明 |
|---|---|
left | 左对齐（默认） |
center | 居中对齐 |
right | 右对齐 |
justify | 两端对齐 |
text-decoration 文本修饰
概述： 设置文本的修饰线，如下划线、删除线。
a {
text-decoration: none; /* 取消链接下划线 */
}
p {
text-decoration: underline; /* 下划线 */
}
| 值 | 说明 |
|---|---|
none | 无修饰 |
underline | 下划线 |
line-through | 删除线 |
overline | 上划线 |
line-height 行高
概述： 设置行与行之间的距离。
p {
line-height: 1.5; /* 1.5 倍行高 */
}
| 值类型 | 说明 |
|---|---|
| 数字倍数 | 相对于字体大小的倍数 |
| 长度 | px、em 等 |
text-indent 首行缩进
概述： 设置段落首行缩进。
p {
text-indent: 2em; /* 缩进两个字符 */
}
| 单位 | 说明 |
|---|---|
em | 相对于当前字体宽度 |
px | 像素缩进 |
CSS 盒子模型属性
width / height 宽度与高度
概述： 设置元素的内容区域宽高，不包括 padding、border、margin（除非使用 box-sizing: border-box）。
div {
width: 300px;
height: 200px;
}
| 属性 | 说明 | 常用值 |
|---|---|---|
width | 设置元素内容宽度 | px / % / auto |
height | 设置元素内容高度 | px / % / auto |
padding 内边距
概述： 内容与边框之间的空间，增大会撑大盒子（默认）。
div {
padding: 20px; /* 四边距相等 */
padding: 10px 20px; /* 上下 10px，左右 20px */
padding: 5px 15px 25px; /* 上 5px，左右 15px，下 25px */
padding: 5px 10px 15px 20px; /* 顺时针：上 右 下 左 */
}
| 属性 | 说明 |
|---|---|
padding | 设置上下左右的内边距 |
padding-top/right/bottom/left | 单独设置某一边内边距 |
border 边框
概述： 围绕内容和内边距的边界线，可以控制粗细、样式、颜色。
div {
border: 2px solid red; /* 粗细 样式 颜色 */
border-top: 5px dashed blue;
}
| 属性 | 说明 | 常用值 |
|---|---|---|
border | 简写粗细、样式、颜色 | 1px, solid, dashed, dotted, double |
border-top/right/bottom/left | 单侧边框属性 |
margin 外边距
概述： 元素与外部元素之间的空间，不占据元素的背景区域。
div {
margin: 20px; /* 四边相等 */
margin: 10px auto; /* 上下10px，左右自动居中 */
}
| 属性 | 说明 |
|---|---|
margin | 缩写，设置四边外边距 |
margin-top/right/bottom/left | 单独设置某一边 |
box-sizing 盒子计算方式
概述： 决定元素的 width / height 是否包含内边距和边框。
div {
box-sizing: content-box; /* 默认，width/height只包含内容区域 */
}
div.borderbox {
box-sizing: border-box; /* width/height包括padding和border */
}
| 值 | 说明 |
|---|---|
content-box | 默认: 只计算内容区域宽高 |
border-box | 包含内容、padding、border在指定宽高内 |
CSS 布局属性
display 显示模式
概述： 决定元素的显示类型（块级、内联、弹性等）。
div {
display: block; /* 块级元素 */
}
span {
display: inline; /* 行内元素 */
}
nav ul {
display: flex; /* 弹性布局 */
}
| 值 | 说明 |
|---|---|
block | 块级元素，独占一行，可设置宽高 |
inline | 内联元素，不独占一行，不可设置宽高 |
inline-block | 内联块，同行显示且可设置宽高 |
flex | 启用弹性布局 |
none | 隐藏元素，不占位置 |
position 定位
概述： 控制元素的定位方式，用上下左右定位属性。
.relative {
position: relative;
top: 10px;
left: 20px;
}
.absolute {
position: absolute;
top: 50px;
left: 100px;
}
.fixed {
position: fixed;
top: 0;
right: 0;
}
.sticky {
position: sticky;
top: 10px;
}
| 值 | 说明 |
|---|---|
static | 默认定位，忽略top/left等 |
relative | 相对定位，相对自身原位置偏移 |
absolute | 绝对定位，相对最近已定位祖先 |
fixed | 固定定位，相对于视口 |
sticky | 粘性定位，介于relative和fixed之间 |
float 浮动
概述： 让元素向左或向右浮动，常用于实现文字环绕、旧式布局。
img.left {
float: left;
margin: 10px;
}
img.right {
float: right;
margin: 10px;
}
| 值 | 说明 |
|---|---|
left | 向左浮动 |
right | 向右浮动 |
none | 默认，无浮动 |
clear 清除浮动
概述： 用于清除前面浮动元素对当前元素的影响。
.clearfix {
clear: both;
}
| 值 | 说明 |
|---|---|
left | 清除左浮动 |
right | 清除右浮动 |
both | 清除两侧浮动 |
flex 弹性布局
概述： 弹性盒模型，父容器设置 display:flex 后，其子元素称为弹性项，可灵活排列。
.container {
display: flex;
flex-direction: row; /* 主轴方向 */
justify-content: space-between; /* 主轴对齐方式 */
align-items: center; /* 交叉轴对齐方式 */
}
.item {
flex: 1; /* 占据剩余空间 */
}
| 属性 | 说明 | 常用值 |
|---|---|---|
flex-direction | 主轴方向 | row / row-reverse / column / column-reverse |
justify-content | 主轴对齐 | flex-start, flex-end, center, space-between, space-around |
align-items | 交叉轴对齐 | flex-start, flex-end, center, stretch |
flex-wrap | 是否换行 | nowrap（默认），wrap |
flex | 子项空间占比 | 数字/比例 |
grid 网格布局
概述： CSS 三大布局方式之一，二维布局，父容器设置 display:grid。
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
| 属性 | 说明 |
|---|---|
grid-template-columns | 列定义 |
grid-template-rows | 行定义 |
gap | 行列间距 |
CSS 背景与边框属性
background-color 背景颜色
概述： 设置元素的背景色，支持颜色关键字、十六进制、RGB、RGBA 等。
body {
background-color: #f0f0f0;
}
div {
background-color: rgba(255, 0, 0, 0.3);
}
| 取值类型 | 示例 |
|---|---|
| 颜色关键字 | red、blue |
| 十六进制 | #ff0000 |
| RGB | rgb(0,128,0) |
| RGBA | rgba(255,255,0,0.5) |
background-image 背景图片
概述： 为元素设置背景图片。
div {
background-image: url('bg.jpg');
}
| 取值 | 说明 |
|---|---|
url(path) | 背景图路径 |
none | 无背景图 |
background-repeat 背景平铺
概述： 设置背景图片是否平铺，以及平铺的方向。
div {
background-image: url('bg.png');
background-repeat: no-repeat;
}
| 值 | 说明 |
|---|---|
repeat | 水平和垂直都平铺（默认） |
repeat-x | 仅水平方向平铺 |
repeat-y | 仅垂直方向平铺 |
no-repeat | 不平铺 |
background-position 背景位置
概述： 设置背景图像在元素中的初始位置。
div {
background-image: url('bg.png');
background-repeat: no-repeat;
background-position: center top;
}
| 值 | 说明 |
|---|---|
| 关键字 | left、center、right；top、center、bottom |
| 长度/百分比 | 20px 50% 水平 垂直 |
background-size 背景尺寸
概述： 设置背景图片的缩放方式。
div {
background-image: url('bg.png');
background-size: cover;
}
| 值 | 说明 |
|---|---|
| 长度 | 100px 200px（宽 高） |
| 百分比 | 相对于元素的百分比 |
cover | 铺满元素，保持比例，可能裁切 |
contain | 完整显示图片，保持比例，可能留空白 |
border 边框
概述： 设置元素边框，包含宽度、样式、颜色。
div {
border: 2px solid red;
}
| 属性 | 说明 | 常用值 |
|---|---|---|
border-width | 边框宽度 | px |
border-style | 边框样式 | solid、dashed、dotted、double |
border-color | 边框颜色 | 颜色值 |
border-radius 圆角边框
概述： 设置元素的圆角效果。
div {
border: 2px solid red;
border-radius: 10px;
}
.circle {
border-radius: 50%; /* 制作圆形 */
}
| 值 | 说明 |
|---|---|
| 长度 | 圆角半径大小 |
| 百分比 | 相对于元素本身尺寸计算 |
CSS 过渡与动画
transition 过渡
概述： 为元素的属性变化添加平滑的过渡效果，比如鼠标悬停时的颜色变化。
button {
background-color: skyblue;
transition: background-color 0.5s ease, transform 0.3s;
}
button:hover {
background-color: orange;
transform: scale(1.1);
}
| 属性 | 说明 | 常用值示例 |
|---|---|---|
transition-property | 需要过渡的属性 | all / color / background-color |
transition-duration | 过渡时间 | 0.5s、200ms |
transition-timing-function | 过渡速度曲线 | linear、ease、ease-in、ease-out |
transition-delay | 延迟执行时间 | 秒/毫秒 |
transition | 以上属性的简写 | background-color 0.5s ease 0s |
@keyframes 动画关键帧
概述： 定义 CSS 动画的关键帧，用于描述动画在不同时间点的状态。
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}
| 关键字 | 说明 |
|---|---|
0% ~ 100% | 动画开始到结束的状态 |
from / to | 等同于 0% 和 100% |
animation 动画属性
概述： 调用关键帧实现动画，可以控制时长、次数、速度等。
div {
animation-name: move;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* 简写 */
div {
animation: move 2s ease-in-out 0s infinite alternate;
}
| 属性 | 说明 | 常用值 |
|---|---|---|
animation-name | 关键帧名称 | 与 @keyframes 同名 |
animation-duration | 动画时长 | 2s、500ms |
animation-timing-function | 动画速度曲线 | linear、ease 等 |
animation-delay | 延迟开始时间 | 秒/毫秒 |
animation-iteration-count | 重复次数 | 数字 / infinite |
animation-direction | 播放方向 | normal、reverse、alternate |
animation | 简写 | 如 move 2s linear infinite |
transform 2D/3D 变换
概述： 对元素进行旋转、缩放、位移、倾斜等变换，可配合 transition 或 animation 使用。
div:hover {
transform: scale(1.2) rotate(10deg) translateX(50px);
}
| 函数 | 说明 |
|---|---|
translate(x,y) | 平移 |
scale(x,y) | 缩放 |
rotate(deg) | 旋转 |
skew(x,y) | 倾斜 |
CSS 响应式设计与媒体查询
响应式设计概述
概述： 响应式设计通过媒体查询、弹性布局、百分比宽度等技术，让网页在不同尺寸的设备上自适应显示。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
| 技术 | 说明 |
|---|---|
| 媒体查询 | 根据设备条件加载不同样式 |
| 流式布局 | 使用百分比宽度，适配不同屏幕宽度 |
| 弹性布局 | 使用 flex 或 grid 实现自适应排列 |
媒体查询基础
概述： 根据设备的特性（宽度、高度、方向、分辨率等）应用不同的 CSS 样式。
/* 视口宽度 ≤ 600px 时应用的样式 */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
/* 视口宽度 ≥ 1024px 时应用的样式 */
@media (min-width: 1024px) {
body {
background-color: lightgreen;
}
}
| 条件 | 说明 |
|---|---|
max-width | 最大宽度条件 |
min-width | 最小宽度条件 |
max-height | 最大高度条件 |
min-height | 最小高度条件 |
复合条件媒体查询
概述： 媒体查询可以使用逻辑关键字组合条件。
/* 宽度 ≥ 768 像素 并且 宽度 ≤ 1024 像素 */
@media (min-width: 768px) and (max-width: 1024px) {
body {
font-size: 18px;
}
}
/* 宽度 ≤ 600像素 或者 方向为纵向（手机竖屏） */
@media (max-width: 600px), (orientation: portrait) {
body {
background-color: pink;
}
}
| 关键字 | 说明 |
|---|---|
and | 同时满足多个条件 |
,（逗号） | 满足任意一个条件即可 |
not | 排除特定条件 |
常用媒体特性
概述： 媒体查询中可检测的设备或环境特性。
@media (orientation: landscape) {
/* 横屏样式 */
}
@media (orientation: portrait) {
/* 竖屏样式 */
}
@media (min-resolution: 2dppx) {
/* 高分辨率屏幕样式，如 Retina */
}
| 媒体特性 | 说明 | 常用值 |
|---|---|---|
width / height | 视口宽高 | px |
orientation | 屏幕方向 | portrait（竖屏）、landscape（横屏） |
resolution | 分辨率 | 96dpi、2dppx |
响应式布局示例
概述： 常见的响应式设计中，不同屏幕宽度下使用不同的布局样式。
/* 桌面端布局 */
@media (min-width: 1024px) {
.container {
display: flex;
flex-direction: row;
}
}
/* 平板布局 */
@media (min-width: 768px) and (max-width: 1023px) {
.container {
display: flex;
flex-direction: column;
}
}
/* 手机布局 */
@media (max-width: 767px) {
.container {
display: block;
}
}
| 断点区间 | 说明 |
|---|---|
≥1024px | 桌面端布局 |
768px ~ 1023px | 平板布局 |
≤767px | 移动端布局 |