CSS 简介：给网页“化妆”的速览
70
0
0
一句话：CSS（Cascading Style Sheets）就是告诉浏览器“哪长啥样”的化妆说明书；HTML 管结构，CSS 管颜值，JS 管互动。下面 10 分钟带你认全语法、加载方式、核心概念，随抄随用。
1. CSS 到底能干嘛？
| 能力 | 例子 | 一句话 |
|---|---|---|
| 调色 | color: #ff6b6b; | 文字、背景、边框想变就变 |
| 布局 | display: flex; | 横竖排列、居中、自适应 |
| 动效 | transition: all .3s; | 鼠标放上去平滑变色/放大 |
| 响应式 | @media (max-width: 600px) | 手机自动换行、隐藏侧栏 |
| 字体/形状 | border-radius: 50%; | 圆角、阴影、渐变、自定义字体 |
2. 三种“上妆”方式：写哪都行，优先级不同
行内（最高）
<p style="color:red;">红色文字</p>内部（中等）
<head> <style> p { color: blue; } </style> </head>外部（推荐，可缓存）
<link rel="stylesheet" href="style.css">
优先级：行内 > 内部 > 外部；同一层级后出现的覆盖前面的。
3. 基础语法：selector { property: value; }
/* 标签选择器 */
h1 { font-size: 2rem; color: #333; }
/* 类选择器 */
.btn { background: #007bff; color: #fff; }
/* ID 选择器 */
#header { height: 60px; }
/* 复合写法：hover 伪类 */
.btn:hover { background: #0056b3; }大小写不敏感，但推荐全小写 + 连字符。
4. 盒子模型：一切元素都是“盒子”
.box {
width: 200px; /* 内容宽 */
padding: 10px; /* 内边距 */
border: 1px solid #ccc; /* 边框 */
margin: 20px; /* 外边距 */
box-sizing: border-box; /* 总宽=200px，不含 padding/border */
}不写 border-box 总宽会变成 200+20+2=242px，容易爆布局。5. 主流布局速查（30 秒上手）
| 需求 | 关键词 | 示例 |
|---|---|---|
| 横排 + 居中 | display: flex | .nav{display:flex;justify-content:center;gap:1rem;} |
| 自适应栅格 | display: grid | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| 水平居中 | 行内/块差异 | text-align: center（行内）margin: 0 auto（块） |
| 垂直居中 | flex 一招鲜 | align-items: center; |
| 隐藏元素 | display: none / visibility: hidden | 前者不占位，后者占位 |
6. 响应式：让页面“自己会折行”
/* ≥992px 电脑三栏 */
@media (min-width: 992px) {
.col { width: 33.33%; float: left; }
}
/* <992px 手机一栏 */
@media (max-width: 991px) {
.col { width: 100%; }
}移动优先写法：先写手机样式，再用 min-width 逐级放大。7. 动效：两行代码写出“滑入”
.btn {
transition: transform .3s ease;
}
.btn:hover { transform: scale(1.05); }transition负责“平滑”，transform负责“变形”；性能比直接改width/height好。
8. 单位速记：什么时候用 rem、%、vw
| 单位 | 含义 | 场景 |
|---|---|---|
| px | 绝对像素 | 边框、阴影、小图标 |
| % | 相对父元素 | 宽度、高度自适应 |
| rem | 相对根字体 | 文字、间距统一缩放 |
| vw/vh | 相对视口 | 全屏 Banner、100vh 头图 |
9. 优先级 & 继承：同款冲突谁赢？
- 行内 > ID > 类/伪类 > 标签 > 通配符
- 同样权重后写覆盖前写
- 使用
!important可强行插队，但不到万不得已别用
10. 加载性能：让样式飞一会儿
- CSS 放
<head>，避免“白屏闪” - 用
<link>而不用@import，防止串行加载 - 生产环境压缩 + 合并，文件名带 hash 缓存
- 首屏关键样式可内联，剩余异步加载（
media="print"技巧）
11. 一句话口诀（背完走天下）
“选元素，写声明；盒子先 border-box，flex 居中秒搞定；
移动优先媒体查询，过渡动画 transform；
放 head、压缩、加 hash，性能颜值两不误。”
把这句贴在工位，下次写页面先想“结构→语义→CSS”，不额外装库也能做出 80 分效果。祝你编码愉快！
0
快来点个赞吧
发表评论
评论列表