外观
CSS 笔记
约 2481 字大约 8 分钟
2025-08-16
一、CSS 基础
1.1 什么是 CSS？
CSS 是 Cascading Style Sheet（层叠样式表）的缩写，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS 不需要编译，可以直接由浏览器执行。
1.2 CSS 引入方式
行内样式 在 HTML 标签内使用 style 属性：
<h1 style="color: red; font-size: 16px;">标题</h1>内嵌样式 在 HTML 头部 <head> 标签内使用 <style> 标签：
<style>
h1 {
color: red;
font-size: 16px;
}
</style>外链样式 使用 HTML 的 <link> 标签链接外部 CSS 文件：
<link rel="stylesheet" href="style.css">优先级规则：行内样式 > 内部样式 > 外部样式（就近原则）
1.3 CSS 语法
CSS 语法格式为键值对结构：
选择器 {
属性名: 属性值;
属性名: 属性值;
}常用单位：
px：像素（最常用）%：百分比em：相对于父元素字体大小rem：相对于根元素（html）字体大小
注释： CSS 使用 /* 注释内容 */ 语法，没有 // 注释。
二、CSS 选择器
2.1 基本选择器
标签选择器
/* 选择所有 p 标签 */
p {
color: #333;
}类选择器
/* 选择所有 class="text" 的元素 */
.text {
font-size: 16px;
}ID 选择器
/* 选择 id="header" 的元素 */
#header {
background-color: #f5f5f5;
}建议： class 属性交给 CSS 使用，id 属性交给 JavaScript 使用。
2.2 层次选择器
后代选择器
/* 选择 div 内的所有 p 元素 */
div p {
line-height: 1.5;
}子选择器
/* 选择 div 的直接子元素 p */
div > p {
margin-top: 0;
}相邻兄弟选择器
/* 选择紧挨在 h2 后面的 p 元素 */
h2 + p {
margin-top: 0;
}通用兄弟选择器
/* 选择 h2 后面的所有 p 元素 */
h2 ~ p {
color: #666;
}2.3 伪类选择器
常用动态伪类：
/* 鼠标悬停时 */
a:hover {
color: #0066cc;
}
/* 获得焦点时 */
input:focus {
border-color: #0066cc;
outline: none;
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.3);
}常用结构伪类：
/* 第一个子元素 */
li:first-child {
margin-left: 0;
}
/* 最后一个子元素 */
li:last-child {
margin-right: 0;
}
/* 奇数行 */
tr:nth-child(odd) {
background-color: #f9f9f9;
}
/* 偶数行 */
tr:nth-child(even) {
background-color: #ffffff;
}2.4 伪元素
常用伪元素：
/* 在元素内容前插入内容 */
.element::before {
content: "★";
color: gold;
}
/* 在元素内容后插入内容 */
.element::after {
content: " (注)";
color: #999;
}
/* 首字母样式 */
p::first-letter {
font-size: 2em;
float: left;
margin-right: 5px;
}
/* 首行样式 */
p::first-line {
font-weight: bold;
}三、CSS 常用属性
3.1 文本与字体
字体属性：
p {
font-family: "Microsoft YaHei", Arial, sans-serif;
font-size: 16px;
font-weight: normal; /* normal, bold, bolder, lighter, 100-900 */
font-style: normal; /* normal, italic, oblique */
line-height: 1.5; /* 行高，常用1.5倍 */
color: #333;
}文本属性：
p {
text-align: left; /* left, center, right, justify */
text-indent: 2em; /* 首行缩进 */
text-decoration: none; /* none, underline, line-through */
letter-spacing: 0.5px; /* 字符间距 */
word-spacing: 1px; /* 单词间距 */
white-space: normal; /* normal, nowrap, pre, pre-wrap, pre-line */
}3.2 颜色
常用颜色表示方式：
/* 关键词 */
.color1 {
color: red;
}
/* 十六进制 */
.color2 {
color: #ff0000; /* 可简写为 #f00 */
}
/* RGB */
.color3 {
color: rgb(255, 0, 0);
}
/* RGBA (带透明度) */
.color4 {
color: rgba(255, 0, 0, 0.5);
}3.3 背景
背景属性：
.container {
background-color: #f5f5f5;
background-image: url("bg.jpg");
background-repeat: no-repeat; /* repeat, repeat-x, repeat-y, no-repeat */
background-position: center; /* left, center, right, top, bottom, 或具体数值 */
background-size: cover; /* cover, contain, 或具体数值 */
background-attachment: scroll; /* scroll, fixed */
}背景简写：
.container {
background: #f5f5f5 url("bg.jpg") no-repeat center/cover;
}渐变背景：
/* 线性渐变 */
.gradient-linear {
background: linear-gradient(to right, #ff9966, #ff5e62);
}
/* 径向渐变 */
.gradient-radial {
background: radial-gradient(circle, #ff9966, #ff5e62);
}3.4 列表
列表属性：
ul {
list-style-type: disc; /* disc, circle, square, none */
list-style-position: outside; /* outside, inside */
list-style-image: none; /* url("bullet.png") */
padding-left: 20px;
}
/* 简写属性 */
ul {
list-style: disc outside;
}四、CSS 盒模型
4.1 盒模型基础
CSS 盒模型包含四个部分：
- 内容区域 (content)：实际内容
- 内边距 (padding)：内容与边框之间的空间
- 边框 (border)：围绕内边距和内容的边框
- 外边距 (margin)：边框外的空间，与其他元素的间隔
元素总宽度 = width + 左右padding + 左右border + 左右margin
4.2 边框
边框属性：
.box {
border: 1px solid #ccc; /* 简写：宽度 样式 颜色 */
/* 单独设置各边 */
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
/* 圆角 */
border-radius: 4px; /* 可设置具体值如 4px 6px 8px 10px */
}4.3 内外边距
内边距 (padding)：
.container {
padding: 20px; /* 上下左右都是20px */
/* 或 */
padding: 10px 20px; /* 上下10px，左右20px */
/* 或 */
padding: 10px 20px 15px 25px; /* 上 右 下 左 */
}外边距 (margin)：
.container {
margin: 20px; /* 上下左右都是20px */
/* 或 */
margin: 10px 20px; /* 上下10px，左右20px */
/* 或 */
margin: 10px 20px 15px 25px; /* 上 右 下 左 */
/* 水平居中（块级元素且有固定宽度）*/
margin: 0 auto;
}4.4 盒模型类型
标准盒模型 (content-box)：
.box {
box-sizing: content-box;
/* width = 内容宽度 */
/* 总宽度 = width + padding + border */
}怪异盒模型 (border-box)：
.box {
box-sizing: border-box;
/* width = 内容宽度 + padding + border */
/* 总宽度 = width */
}推荐： 通常在全局样式中设置：
*,
*::before,
*::after {
box-sizing: border-box;
}五、CSS 布局
5.1 标准文档流
- 行内元素： 与其他行内元素并排；不能设置宽高；默认宽度为文字宽度
- 块级元素： 独占一行；能设置宽高；默认宽度为父元素100%
5.2 浮动布局
浮动：
.float-left {
float: left; /* left, right, none */
}
.float-right {
float: right;
}清除浮动：
/* 清除左右两侧浮动 */
.clearfix::after {
content: "";
display: block;
clear: both;
}浮动四大性质：
- 浮动的元素脱离标准文档流
- 浮动的元素互相贴靠
- 浮动的元素有"字围"效果
- 浮动的元素收缩为内容宽度
5.3 定位布局
相对定位：
.relative {
position: relative;
top: 10px;
left: 20px;
}- 相对于自己原来的位置进行偏移
- 仍在标准文档流中，原来的位置会被保留
绝对定位：
.absolute {
position: absolute;
top: 10px;
left: 20px;
}- 相对于最近的定位祖先元素定位
- 脱离标准文档流，原来的位置不会被保留
固定定位：
.fixed {
position: fixed;
top: 0;
right: 0;
}- 相对于浏览器窗口定位
- 滚动页面时位置不变
z-index：
.element {
position: relative; /* 必须有定位 */
z-index: 10; /* 数值越大层级越高 */
}5.4 Flex 基础
Flex 容器：
.container {
display: flex;
flex-direction: row; /* row, row-reverse, column, column-reverse */
justify-content: flex-start; /* flex-start, flex-end, center, space-between, space-around */
align-items: stretch; /* stretch, flex-start, flex-end, center, baseline */
flex-wrap: nowrap; /* nowrap, wrap, wrap-reverse */
}Flex 项目：
.item {
flex-grow: 0; /* 项目扩展比例 */
flex-shrink: 1; /* 项目收缩比例 */
flex-basis: auto; /* 项目初始大小 */
align-self: auto; /* auto, flex-start, flex-end, center, baseline, stretch */
}六、CSS3 常用特性
6.1 圆角与阴影
圆角：
.box {
border-radius: 4px; /* 四个角相同 */
/* 或 */
border-radius: 4px 8px 12px 16px; /* 顺时针：左上 右上 右下 左下 */
}阴影：
.box {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* x偏移 y偏移 模糊半径 颜色 */
/* 内阴影 */
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.text {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* x偏移 y偏移 模糊半径 颜色 */
}6.2 渐变
线性渐变：
.gradient {
background: linear-gradient(to right, #ff9966, #ff5e62);
/* 或 */
background: linear-gradient(45deg, #ff9966, #ff5e62);
}径向渐变：
.gradient {
background: radial-gradient(circle, #ff9966, #ff5e62);
/* 或 */
background: radial-gradient(ellipse at center, #ff9966, #ff5e62);
}6.3 过渡与动画基础
过渡 (Transition)：
.transition {
transition: all 0.3s ease; /* 属性 过渡时间 过渡效果 延迟时间 */
/* 或单独设置 */
transition-property: background-color, transform;
transition-duration: 0.3s;
transition-timing-function: ease; /* ease, linear, ease-in, ease-out, ease-in-out */
transition-delay: 0s;
}
.transition:hover {
background-color: #ff5e62;
transform: scale(1.05);
}6.4 CSS 函数
CSS 自定义属性（也称为 CSS 变量）让我们能够定义可重用的值，极大地提高了样式表的可维护性。
关键点：
- 自定义属性必须以双横线
--开头 - 通常在
:root选择器中定义全局变量（作用域为整个文档） - 变量名应具有描述性，使用连字符分隔单词（如
--primary-color）
:root {
--primary-color: #0066cc;
--secondary-color: #ff5e62;
--font-size: 16px;
--spacing: 1rem;
}
.button {
background-color: var(--primary-color);
color: white;
font-size: var(--font-size);
padding: var(--spacing);
}
/* 使用默认值 */
.text {
color: var(--text-color, #333);
}
/* 嵌套使用 */
.card {
border: 1px solid var(--border-color, var(--primary-color, #ddd));
}calc()函数
calc() 允许我们在 CSS 中执行数学计算，混合使用不同的单位。
/* 创建响应式栅格系统 */
.column {
width: calc((100% - 3 * var(--gutter)) / 4);
}
/* 动态调整字体大小 */
.title {
font-size: calc(1rem + 0.5vw);
}min()和max()函数
/* 确保元素宽度在合理范围内 */
.responsive-box {
width: min(1200px, 100%);
}
/* 确保字体大小不会太小或太大 */
.text {
font-size: max(16px, 1.2vw);
}clamp()函数
clamp(MIN, VAL, MAX) 返回三个值中的中间值，如果 VAL 在 MIN 和 MAX 之间，结果为 VAL，如果 VAL 小于 MIN，结果为 MIN，如果 VAL 大于 MAX，结果为 MAX
/* 定义响应式字体大小 */
h1 {
font-size: clamp(1.5rem, 2.5vw, 2.5rem);
}
/* 创建响应式容器 */
.container {
width: clamp(320px, 80%, 1200px);
}七、实用技巧与最佳实践
7.1 代码规范
- 使用小写字母编写 CSS
- 为所有属性值添加引号
- 保持适当的缩进和换行
- 为图片始终添加有意义的
alt文本 - 使用语义化的类名（如
.header而不是.div1） - 避免使用
!important（除非必要）
7.2 响应式设计基础
媒体查询：
/* 小屏幕（手机） */
@media (max-width: 767px) {
.container {
padding: 10px;
}
}
/* 平板 */
@media (min-width: 768px) and (max-width: 991px) {
.container {
width: 90%;
}
}
/* 桌面 */
@media (min-width: 992px) {
.container {
width: 960px;
margin: 0 auto;
}
}