CSS 基础说明

一、CSS 基础

1. 引入方式

作用：把 CSS 样式应用到 HTML 上。

方式	写法	含义与说明
行内样式	<div style="color: red;">文字</div>	直接写在标签的 style 属性里，只影响当前元素，优先级高但不便于维护。
内部样式表	<style> p { color: red; } </style>	写在 HTML 的 <style> 标签中，影响当前页面。
外部样式表	<link rel="stylesheet" href="style.css">	单独 .css 文件，通过 <link> 引入，最推荐，可复用、可缓存。

示例：

<!-- 外部样式表 -->
<link rel="stylesheet" href="style.css">

<!-- 内部样式表 -->
<style>
  p { color: blue; }   /* 所有 p 标签文字变蓝 */
</style>

<!-- 行内样式 -->
<p style="color: red;">我是红色文字</p>

2. 语法

选择器 {

属性: 值;

}

含义：

• 选择器：告诉浏览器"要选中哪些元素"。

• 属性：要修改的样式，比如 color（颜色）。

• 值：具体设置成什么，比如 red。

• 每条声明以 ; 结尾，整体用 {} 包起来。

示例：

h1 {
  color: red;        /* 文字颜色为红色 */
  font-size: 24px;   /* 字号 24 像素 */
}

选中所有 <h1>，让文字变红、字号 24px。

3. 注释

/* 这是注释，不会被浏览器执行 */

作用：给开发者看，解释代码用途，方便维护。

示例：

/* 设置主标题样式 */
h1 {
  color: red; /* 红色标题 */
}

二、选择器

1. 基础选择器

选择器	示例	作用	含义
元素选择器	p	选中所有 <p>	直接写标签名
类选择器	.box	选中 class="box" 的元素	. 表示 class
ID 选择器	#header	选中 id="header" 的元素	# 表示 id，页面中 id 应唯一
通配选择器	*	选中所有元素	常用于清除默认样式
属性选择器	[type="text"]	选中具有该属性的元素	方括号匹配属性

示例：

p { 
    color: red; 
}              /* 所有 p 变红 */
.box { 
    color: blue; 
}          /* class="box" 变蓝 */
#header { 
    color: green; 
}      /* id="header" 变绿 */
* { 
    margin: 0; padding: 0; 
}   /* 清除所有元素默认边距 */

input[type="text"] { 
    border: 1px solid #ccc; 
} /* 只选文本框 */

2. 组合选择器

选择器	示例	作用	含义
后代	div p	选中 div 内所有 p	空格表示"里面的"
子代	div > p	只选直接子级 p	> 表示"直接儿子"
相邻兄弟	h1 + p	紧跟 h1 后的第一个 p	+ 表示"紧挨着的下一个"
通用兄弟	h1 ~ p	h1 后所有同级 p	~ 表示"后面的所有兄弟"
并集	h1, h2	同时选中 h1 和 h2	, 表示"和"
交集	div.box	选中既是 div 又有 box 类	连写表示"同时满足"

示例：

div p { color: red; }     /* div 里面所有 p 都变红 */
div > p { color: blue; }  /* 只有 div 的直接子 p 变蓝 */
h1 + p { color: green; }  /* h1 后面紧挨着的那个 p 变绿 */
h1 ~ p { color: orange; } /* h1 后面所有同级 p 变橙 */
h1, h2 { font-weight: bold; } /* h1 和 h2 都加粗 */
div.box { background: #eee; } /* 既是 div 又有 box 类的元素加灰底 */

3. 伪类

作用：选中元素在某种"状态"或"位置"下的样式。

伪类	作用	示例
:hover	鼠标悬停时	a:hover { color: red; }
:active	鼠标按下时	button:active { transform: scale(.98); }
:focus	获得焦点时	input:focus { border-color: blue; }
:visited	已访问过的链接	a:visited { color: purple; }
:first-child	父元素第一个子元素	li:first-child { color: red; }
:last-child	最后一个子元素	li:last-child { color: blue; }
:nth-child(n)	第 n 个子元素	li:nth-child(2) { color: green; }
:not()	排除某些元素	p:not(.special) { color: gray; }
:checked	被选中的表单元素	input:checked + label { font-weight: bold; }
:disabled	被禁用的表单元素	input:disabled { background: #eee; }

示例：

a:hover { color: red; }        /* 鼠标悬停链接变红 */
input:focus { outline: 2px solid blue; } /* 输入框聚焦加蓝框 */
li:nth-child(odd) { background: #f5f5f5; } /* 奇数行加浅灰底 */
p:not(.special) { color: gray; } /* 除了 .special 的 p 都变灰 */

4. 伪元素

作用：选中元素的"某一部分"或"生成内容"。

伪元素	作用	示例
::before	在元素内容前插入	p::before { content: "★"; }
::after	在元素内容后插入	p::after { content: "✔"; }
::first-line	第一行文字	p::first-line { font-weight: bold; }
::first-letter	第一个字母	p::first-letter { font-size: 2em; }
::selection	用户选中的文字	::selection { background: yellow; }
::placeholder	输入框占位符	input::placeholder { color: #999; }

示例：

p::before {
  content: "★ ";   /* 在每个 p 前加一个星号 */
  color: gold;
}

p::first-letter {
  font-size: 2em;  /* 首字母放大两倍 */
  color: red;
}

::selection {
  background: yellow; /* 选中文字时背景变黄 */
}

5. 选择器优先级

作用：当多个规则冲突时，决定谁生效。

!important > 行内样式 > ID > 类/属性/伪类 > 元素/伪元素 > 通配

权重计算 ：(a, b, c, d)

• a：行内样式（1000）

• b：ID（100）

• c：类、属性、伪类（10）

• d：元素、伪元素（1）

示例：

p { color: red; }          /* 权重 (0,0,0,1) */
.text { color: blue; }     /* 权重 (0,0,1,0) 生效 */
#main { color: green; }    /* 权重 (0,1,0,0) 生效 */

解释：#main 权重最高，所以如果同一个 p 同时有这三个规则，最终是绿色。

三、盒模型

作用：CSS 把每个元素看作一个矩形盒子，盒模型决定元素的尺寸和间距。

1. 组成

┌─────────────────────────────┐

│ margin │

│ ┌───────────────────────┐ │

│ │ border │ │

│ │ ┌─────────────────┐ │ │

│ │ │ padding │ │ │

│ │ │ ┌───────────┐ │ │ │

│ │ │ │ content │ │ │ │

│ │ │ └───────────┘ │ │ │

│ │ └─────────────────┘ │ │

│ └───────────────────────┘ │

└─────────────────────────────┘

• content：内容区域，放文字、图片。

• padding：内边距，内容与边框之间的距离。

• border：边框。

• margin：外边距，盒子与其他元素之间的距离。

示例：

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

解释：内容宽 200px，加上左右 padding 各 20px、边框各 5px，实际占据宽度 = 200 + 40 + 10 = 250px（默认 content-box 下）。

2. box-sizing

作用 ：决定 width 是否包含 padding 和 border。

box-sizing: content-box; /* 默认：width 只算内容 */

box-sizing: border-box; /* width 包含 padding + border */

示例：

.box1 { width: 200px; padding: 20px; box-sizing: content-box; }
/* 实际宽度 = 200 + 20 + 20 = 240px */

.box2 { width: 200px; padding: 20px; box-sizing: border-box; }
/* 实际宽度 = 200px，内容被压缩 */

3. 外边距合并

作用：相邻元素的 margin 会合并成较大的那个。

示例：

.a { margin-bottom: 30px; }
.b { margin-top: 20px; }

解释：.a 和 .b 之间的间距不是 50px，而是 30px（取较大值）。

4. 溢出

overflow: visible | hidden | scroll | auto;

值	作用
visible	默认，超出部分可见
hidden	超出部分隐藏
scroll	始终显示滚动条
auto	需要时显示滚动条

示例：

.box {
  width: 200px;
  height: 100px;
  overflow: auto; /* 内容超出时出现滚动条 */
}

四、单位与颜色

1. 长度单位

单位	含义	示例
px	像素，绝对单位	font-size: 16px;
em	相对父元素字体大小	父 16px，2em = 32px
rem	相对根元素（html）字体大小	html { font-size: 16px; }，2rem = 32px
%	相对父元素	width: 50%; 父宽的一半
vw	视口宽度的 1%	100vw = 整个视口宽
vh	视口高度的 1%	100vh = 整个视口高
vmin	vw 和 vh 中较小值	常用于正方形
vmax	vw 和 vh 中较大值	---

示例：

html { font-size: 16px; }
.box {
  width: 50vw;      /* 视口宽度的一半 */
  font-size: 2rem;  /* 32px */
  padding: 1em;     /* 相对自身字体 32px */
}

2. 颜色

作用：设置文字、背景、边框等颜色。

写法	示例	含义
关键字	red	预定义颜色名
HEX	#ff0000	十六进制，#RRGGBB，ff=255 红，00=0 绿，00=0 蓝
RGB	rgb(255, 0, 0)	Red=255, Green=0, Blue=0，即纯红
RGBA	rgba(255, 0, 0, 0.5)	多一个 Alpha 透明度，0 全透明，1 不透明
HSL	hsl(0, 100%, 50%)	Hue 色相 0=红，Saturation 饱和度 100%，Lightness 亮度 50%

示例：

.red { color: #ff0000; }            /* 纯红 */
.half-red { color: rgba(255, 0, 0, .5); } /* 半透明红 */
.green { color: rgb(0, 255, 0); }   /* 纯绿 */
.blue { color: hsl(240, 100%, 50%); } /* 纯蓝 */

解释：

• rgb(255, 0, 0)：红色通道最大，绿蓝为 0 → 红。

• hsl(240, 100%, 50%)：色相 240° 是蓝色。

五、文本与字体

作用：控制文字的字体、大小、间距、对齐等。

font-family: "Microsoft YaHei", Arial, sans-serif; /* 字体，从左到右依次尝试 */

font-size: 16px; /* 字号 */

font-weight: bold; /* 字重：normal / bold / 100~900 */

font-style: italic; /* 斜体 */

line-height: 1.5; /* 行高，1.5 倍字号 */

letter-spacing: 1px; /* 字母间距 */

word-spacing: 2px; /* 单词间距 */

text-align: center; /* 对齐：left / center / right / justify */

text-decoration: underline; /* 下划线 */

text-indent: 2em; /* 首行缩进两个字符 */

text-transform: uppercase; /* 转大写 */

text-shadow: 1px 1px 2px #000; /* 文字阴影 */

white-space: nowrap; /* 不换行 */

overflow-wrap: break-word; /* 长单词换行 */

字体的引入：

@font-face {

font-family: "MyFont";

src: url("font.woff2") format("woff2"); /* woff2 体积小，现代浏览器支持好 */

}

body {

font-family: "MyFont", sans-serif;

}

示例：

h1 {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 32px;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0,0,0,.3);
}

解释：标题用微软雅黑，居中，带淡淡阴影。

六、背景与边框

1. 背景

作用：设置元素背景颜色、图片、位置、大小等。

background-color: #f0f0f0; /* 背景色 */

background-image: url("bg.jpg"); /* 背景图 */

background-repeat: no-repeat; /* 不平铺 */

background-position: center; /* 居中 */

background-size: cover; /* 覆盖整个元素，可能裁剪 */

background-attachment: fixed; /* 固定，不随滚动 */

background-clip: text; /* 背景只在文字内显示 */

background: #fff url("bg.jpg") no-repeat center / cover; /* 简写 */

示例：

.hero {
  height: 300px;
  background: url("hero.jpg") no-repeat center / cover;
  color: white;
}

解释：hero 区域用 hero.jpg 做背景，居中、覆盖，文字白色。

2. 渐变

background: linear-gradient(to right, red, blue); /* 从左到右红→蓝 */

background: radial-gradient(circle, yellow, red); /* 中心黄→边缘红 */

background: conic-gradient(red, yellow, green, blue, red); /* 圆锥渐变 */

含义：

• linear-gradient：线性渐变，方向 + 颜色停靠点。

• radial-gradient：径向渐变，从中心向外。

• conic-gradient：圆锥渐变，绕中心旋转。

示例：

.box {
  background: linear-gradient(135deg, #3498db, #9b59b6);
}

解释：135° 方向，从蓝色渐变到紫色。

3. 边框

border: 2px solid red; /* 宽度 样式 颜色 */

border-radius: 8px; /* 圆角 */

border-image: url(border.png) 30 round; /* 图片边框 */

outline: 2px dashed blue; /* 轮廓，不占空间 */

box-shadow: 0 4px 8px rgba(0,0,0,.2); /* 阴影：x y 模糊 颜色 */

示例：

.card {
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

解释：卡片有 1px 浅灰边框、12px 圆角、柔和阴影。

七、布局

1. display

作用：决定元素在页面中以什么形式存在，是否独占一行、能否设置宽高、是否参与 flex/grid 布局。

常见取值及含义：

值	作用	是否独占一行	能否设宽高
block	块级元素	是	能
inline	行内元素	否	不能
inline-block	行内块	否	能
none	隐藏，不占空间	---	---
flex	弹性容器	是	能
grid	网格容器	是	能
inline-flex	行内弹性容器	否	能
inline-grid	行内网格容器	否	能

示例：

span {
  display: block;   /* 原本行内的 span 变成块级，独占一行 */
  width: 200px;     /* 块级才能设宽 */
  height: 50px;
  background: #eee;
}

解释：<span> 默认是行内元素，不能设宽高。改成 block 后，它像 <div> 一样独占一行，可以设宽高。

2. 定位 position

作用：把元素从正常文档流中"拿出来"，精确控制它出现在哪里。

五种取值及含义：

值	含义	参照物	是否脱离文档流
static	默认，正常排列	---	否
relative	相对自身原位置偏移	自己原来的位置	否（原位置仍占位）
absolute	绝对定位	最近的非 static 祖先	是
fixed	固定定位	浏览器视口	是
sticky	粘性定位	最近滚动容器	否（滚动到阈值后固定）

示例 ：relative + absolute 组合

.parent {
  position: relative;  /* 作为定位参照物 */
  width: 200px;
  height: 200px;
  background: #f0f0f0;
}
.badge {
  position: absolute;  /* 相对 parent 定位 */
  top: 0;
  right: 0;            /* 贴到右上角 */
  background: red;
  color: white;
  padding: 4px 8px;
}

解释：parent 设为 relative 后，成为 badge 的定位参照。badge 的 top:0; right:0 就是贴到 parent 的右上角。这是做角标、关闭按钮的常用写法。

3. 浮动 float

作用：让元素靠左或靠右，其他内容环绕它。早期用于多列布局，现在主要用于文字环绕图片。

写法含义：

float: left; /* 靠左浮动 */

float: right; /* 靠右浮动 */

float: none; /* 默认，不浮动 */

clear: both; /* 清除左右两侧浮动影响 */

示例 ：文字环绕图片

.article img {
  float: left;        /* 图片靠左 */
  margin: 0 16px 16px 0; /* 右侧和下侧留白 */
  width: 200px;
}

解释：图片左浮动后，文字会环绕在图片右侧和下方。

八、响应式设计

1. 媒体查询

作用：根据设备特性（宽度、高度、方向、分辨率等）应用不同 CSS。

语法：

@media 媒体类型 and (条件) {

/* 条件满足时生效 */

}

常用媒体类型：

• all：所有设备

• screen：屏幕

• print：打印

常用条件：

(max-width: 768px) /* 宽度 ≤ 768px */

(min-width: 1024px) /* 宽度 ≥ 1024px */

(orientation: landscape) /* 横屏 */

(orientation: portrait) /* 竖屏 */

(prefers-color-scheme: dark) /* 系统深色模式 */

(prefers-reduced-motion: reduce) /* 用户要求减少动画 */

2. 视口 meta

<meta name="viewport" content="width=device-width, initial-scale=1.0">

含义：

• width=device-width：视口宽度 = 设备宽度。

• initial-scale=1.0：初始缩放 1 倍。

• maximum-scale=1.0：最大缩放 1 倍（可禁止放大，但影响无障碍）。

• user-scalable=no：禁止用户缩放。

九、动画与过渡

作用：让页面元素动起来，提升交互体验。

1. transition 过渡

作用：当属性值变化时，平滑地从旧值过渡到新值。

语法：

transition: property duration timing-function delay;

各部分含义：

部分	含义	示例
property	要过渡的属性	color、all
duration	持续时间	0.3s、300ms
timing-function	速度曲线	ease、linear
delay	延迟	0.1s

timing-function 取值：

linear /* 匀速 */

ease /* 默认，慢-快-慢 */

ease-in /* 慢进 */

ease-out /* 慢出 */

ease-in-out /* 慢进慢出 */

cubic-bezier(0.4, 0, 0.2, 1) /* 自定义贝塞尔曲线 */

示例 ：按钮悬停

.button {
  background: #3498db;
  color: white;
  transition: background 0.3s ease, transform 0.2s ease;
}
.button:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

解释：鼠标悬停时，背景 0.3s 过渡，同时上移 2px，0.2s 完成。

2. transform 变换

作用 ：对元素进行位移、旋转、缩放、倾斜，不改变文档流，不影响其他元素。

常用函数：

函数	作用	示例
translate(x, y)	位移	translate(20px, 10px)
translateX(x)	水平位移	translateX(50%)
translateY(y)	垂直位移	translateY(-10px)
rotate(deg)	旋转	rotate(45deg)
scale(n)	缩放	scale(1.5)
scaleX / scaleY	单轴缩放	scaleX(2)
skew(deg)	倾斜	skew(10deg)
matrix(...)	矩阵变换	高级用法

transform-origin：

transform-origin: center; /* 默认，中心 */

transform-origin: top left; /* 左上角 */

transform-origin: 0 0; /* 等价于左上角 */

十、函数

常用函数

函数	作用	示例
calc()	计算	width: calc(100% - 40px);
min()	取小	width: min(50%, 400px);
max()	取大	padding: max(16px, 2vw);
clamp()	限制范围	font-size: clamp(1rem, 2vw, 2rem);
var()	使用变量	color: var(--main);
url()	引入资源	background: url(bg.png);
rgb()/hsl()	颜色	color: rgb(255,0,0);
counter()	计数器	content: counter(item);
attr()	取属性值	content: attr(data-label);

1.calc()

width: calc(100% - 40px); /* 减法 */
height: calc(100vh - 60px);
font-size: calc(16px * 1.5); /* 乘法 */
margin: calc(10px / 2); /* 除法 */

含义：混合单位计算，注意运算符两侧要有空格。

2.min() / max()

width: min(50%, 400px); /* 取较小值 */
padding: max(16px, 2vw); /* 取较大值 */

含义：min 保证不超过某值，max 保证不小于某值。

3.clamp()

font-size: clamp(14px, 2vw, 20px);

含义：clamp(最小值, 理想值, 最大值)，理想值在范围内时用理想值，超出则取边界

4.rgb() / hsl()

color: rgb(255, 0, 0); /* 红 */
color: hsl(240, 100%, 50%); /* 蓝 */

5.counter（）

ol { counter-reset: item; }
li { counter-increment: item; }
li::before {
content: counter(item) ". "; /* 1. 2. 3. */
}

含义：自动计数，用于自定义列表编号。

6.attr()

a::after {
content: " (" attr(href) ")"; /* 取 href 属性值 */
}

含义：读取 HTML 属性值，常用于 tooltip、链接显示。

十一、层叠、继承与优先级

1. 层叠规则

作用：当多个规则作用于同一元素时，决定谁生效。

优先级顺序（从高到低）：

1. !important 声明

2. 行内样式

3. ID 选择器

4. 类、属性、伪类

5. 元素、伪元素

6. 通配符

2. 继承

作用：某些属性会自动从父元素传给子元素。

可继承属性 ：color、font-family、font-size、line-height、text-align 等。

不可继承 ：margin、padding、border、background、width、height 等。

控制继承的关键字：

.inherit { color: inherit; } /* 强制继承父值 */

.initial { color: initial; } /* 恢复默认值 */

.unset { color: unset; } /* 可继承则继承，否则默认 */

.revert { color: revert; } /* 回到浏览器默认 */

示例：

.parent { color: red; }
.child { color: inherit; } /* 子元素继承红色 */
.child2 { color: initial; } /* 子元素恢复黑色（默认） */

十二、现代 CSS 特性

1. :is() 和 :where()

作用：简化选择器，减少重复。

/* 传统写法 */
h1, h2, h3 { color: red; }

/* :is() 写法 */
:is(h1, h2, h3) { color: red; }

区别：

• :is() 权重取括号内最高选择器的权重。

• :where() 权重恒为 0。

2. :has()

作用：父选择器，根据子元素是否存在来选中父元素。

.card:has(img) {

border: 1px solid #ddd; /* 有图片的卡片才加边框 */

}

.form:has(input:invalid) {

border-color: red; /* 表单内有无效输入时变红 */

}