大家好，我是Java1234_小锋老师，最近更新 《一天学会 CSS3 视频教程(无废话版) 》专辑，感谢大家支持。
本课程主要介绍和讲解 CSS3简介，CSS3 入门，CSS3 选择器与优先级，CSS3 单位、颜色、字体与文本，CSS3 盒模型 与基础样式，CSS3 布局基础，CSS3 布局进阶，CSS3 视觉 增强，CSS3 变换与动画，CSS3 函数与变量，CSS3 响应式与移动端适配，CSS3 工程化与最佳实践。
视频教程+课件+源码 打包下载 ：
链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234
提取码：1234
CSS3（在第二阶段目录里）
CSS3 单位、颜色、字体与文本
一、长度单位
1. 绝对单位：px
px 是 CSS 像素，最常用，表示固定大小。
.box {
width: 200px;
font-size: 16px;
}特点：不随父元素字体大小变化，适合边框、固定尺寸等。
其他绝对单位还有 cm、mm、in、pt、pc，但网页中较少用。
2. 相对单位
| 单位 | 相对对象 | 说明 |
|---|---|---|
em |
当前元素字体大小 | 用于 font-size 时相对父元素；用于其他属性时相对自身 font-size |
rem |
根元素 html 的字体大小 |
适合做全局缩放，避免嵌套累积 |
% |
参照物不同而不同 | 宽度相对包含块宽度，font-size 相对父元素字体大小，line-height 相对当前字体大小 |
vw |
视口宽度 | 1vw = 视口宽度的 1% |
vh |
视口高度 | 1vh = 视口高度的 1% |
vmin |
视口宽高较小值 | 1vmin = min(vw, vh) 的 1% |
vmax |
视口宽高较大值 | 1vmax = max(vw, vh) 的 1% |
示例：
html {
font-size: 16px;
}
.box {
width: 50vw;
height: 50vh;
font-size: 1.2rem;
padding: 1em;
}注意：
em会受嵌套影响，容易越套越大或越小。rem只认根元素，适合移动端适配。vw/vh在移动端可能受地址栏影响，现代可用dvh、svh、lvh补充。
二、颜色表示
1. 关键字
如 red、blue、transparent、currentColor。
color: red;
background: transparent;2. 十六进制
color: #f00; /* #ff0000 */
color: #ff0000;
color: #ff000080; /* 带透明度，后两位是 alpha */
color: #f00a; /* 简写带透明度 */3. rgb / rgba
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
color: rgb(255 0 0 / 50%); /* 现代写法 */rgba 的 a 表示透明度，0 全透明，1 不透明。
4. hsl / hsla
-
H：色相，0~360 -
S：饱和度，百分比 -
L：亮度，百分比color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);
color: hsl(0 100% 50% / 50%); /* 现代写法 */
适合调色，比如同色系只改亮度。
5. currentColor
表示当前元素的 color 值。
a {
color: #06c;
border: 1px solid currentColor;
}这样边框颜色会自动跟随文字颜色，常用于图标、按钮、链接。
三、字体属性
1. font-family
字体栈，按顺序查找可用字体。
body {
font-family: "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;
}建议最后写通用字体族：serif、sans-serif、monospace、cursive、fantasy。
2. font-size
font-size: 16px;
font-size: 1.2rem;
font-size: 120%;
font-size: larger;常用 rem 做全局字体缩放。
3. font-weight
font-weight: normal; /* 400 */
font-weight: bold; /* 700 */
font-weight: 100; /* 细体 */
font-weight: 900; /* 极粗 */注意字体文件本身要支持对应字重，否则浏览器可能模拟加粗。
4. font-style
font-style: normal;
font-style: italic;
font-style: oblique 10deg;italic 是斜体，oblique 是倾斜。
5. 字体简写
font: italic 700 16px/1.5 "Arial", sans-serif;顺序大致为：font-style font-weight font-size/line-height font-family。
其中 font-size 和 font-family 必须写。
四、文本属性
1. text-align
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: start;
text-align: end;2. line-height
行高，推荐用无单位数字。
line-height: 1.5;
line-height: 24px;
line-height: 150%;无单位数字会按当前 font-size 计算，并被子元素继承倍数，更灵活。
3. text-decoration
text-decoration: none;
text-decoration: underline;
text-decoration: line-through;
text-decoration: underline wavy red;还可拆开：
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
text-decoration-thickness: 2px;4. text-indent
首行缩进。
p {
text-indent: 2em;
}5. text-shadow
文字阴影。
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
text-shadow: 0 0 5px #fff, 0 0 10px #0ff;语法：x偏移 y偏移 模糊半径 颜色，可多层。
其他常用文本属性：
letter-spacing：字间距word-spacing：词间距text-transform：大小写转换white-space：空白处理
五、自定义字体 @font-face
@font-face {
font-family: "MyFont";
src: url("myfont.woff2") format("woff2"),
url("myfont.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
body {
font-family: "MyFont", sans-serif;
}说明：
woff2压缩好，优先使用。font-display: swap让文字先用系统字体显示，避免长时间空白。- 跨域字体需要服务器开启 CORS。
- 可为不同字重、不同样式分别定义
@font-face。 - 可变字体可写
font-weight: 100 900;。
六、图标字体
原理：把图标做成字体文件，通过 @font-face 引入，再用伪元素设置 Unicode。
@font-face {
font-family: "iconfont";
src: url("iconfont.woff2") format("woff2");
}
.icon-home::before {
font-family: "iconfont";
content: "\e600";
}使用：
<span class="icon-home" aria-hidden="true"></span>优点：
- 矢量，缩放不模糊。
- 可用
color、font-size控制颜色和大小。 - 兼容性较好。
缺点：
- 通常只能单色。
- 依赖字体加载。
- 可访问性要额外处理。
- 现代项目更推荐 SVG 图标。