CSS 语法：一条规则、三种选择器、N 种玩法——10 分钟抄完即上手
83
0
0
一句话：CSS 就是“选谁 → 改啥 → 改多大”的三段式，写完扔浏览器，立刻变脸。
1. 一条基本规则长啥样？
selector { property: value; /* 注释只写这儿 */ }例：
h1 { color: red; font-size: 2rem; }- 每条声明用
;结尾（最后一条可省，但别偷懒）。 - 花括号、冒号、分号全是英文符号，中文全角会报错。
- 大小写不敏感，但统一小写 + 连字符是行业习惯。
2. 选谁？——Selector 速查表（够用版）
| 类型 | 写法 | 命中谁 | 示例 |
|---|---|---|---|
| 标签 | h1 | 所有 <h1> | p { margin: 0; } |
| 类 | .btn | 所有 class="btn" | .active { color: #fff; } |
| ID | #header | 唯一 id="header" | #logo { width: 120px; } |
| 组合 | ul.nav li | 类为 nav 的 ul 下所有 li | 后代用空格 |
| 亲子 | .tabs > li | 直属子元素 | 避免误伤深层 |
| 群组 | h1,h2,h3 | 同时命中多个标签 | 批量去 margin |
| 伪类 | a:hover | 鼠标悬停 | 交互必备 |
| 伪元素 | p::before | 在内容前面插入元素 | 图标、引号 |
记忆顺序：标签 → 类/ID → 组合 → 伪
权重：ID(100) > 类(10) > 标签(1)，同样权重后写覆盖前写。
3. 改啥？——常用属性一张图
| 分类 | 高频属性 | 示例值 |
|---|---|---|
| 文字 | font-size color font-weight | 16px #333 bold |
| 对齐 | text-align line-height | center 1.5 |
| 盒子 | width height padding margin | 100% 20px |
| 背景 | background border | #f5f5f5 1px solid #ddd |
| 定位 | position top left z-index | relative 0 10 |
| 布局 | display flex grid | flex / grid |
| 动画 | transition transform | all .3s scale(1.1) |
先记英文单词，再查具体值；border/padding/margin 都能 4 合 1：
margin: 10px 20px; /* 上下=10 左右=20 */4. 值怎么写？——数字、颜色、函数全搞定
| 值类型 | 合法写法 | 备注 |
|---|---|---|
| 长度 | 10px 1rem 50% 5vw | 0 可不加单位 |
| 颜色 | #ff6b6b rgb(255,107,107) hsl(0 100% 70%) | 推荐十六进制 |
| 函数 | calc(100% - 40px) rgba(0,0,0,.5) | 可以混单位 |
| 关键字 | auto inherit initial unset | 继承或重置 |
5. 注释 & 换行：让代码会说话
/* 按钮交互色 */
.btn:hover {
background: #0056b3; /* 比正常色深 10% */
transform: translateY(-2px); /* 轻微浮起 */
}- 注释只能写
/* */，不能//会断解析。 - 每条声明单独一行，括号对齐是行业颜值。
6. 权重与冲突：同样属性谁赢？
权重数字法（简化版）
| 选择器 | 权重值 |
|---|---|
行内 style="" | 1000 |
#id | 100 |
.class :hover | 10 |
element ::before | 1 |
规则
- 相加得总分，大的赢；
- 相同分后写覆盖前写；
!important强行插队，不到拼命别用。
7. 代码风格（团队写不累）
- 缩进 2 空格（或 4，统一即可）
- 类名用连字符
.nav-item - 省略 0 单位
margin: 0; - 字母顺序 or 分组顺序保持一致，用 linter 自动格式化（Stylelint）
8. 快速记忆口诀
“选元素，写声明；
属性名对值，分号别漏行；
ID 百 类十 标签一，后写总比前写赢；
注释只用 / /，团队 lint 自动清。”
背完这句，打开 VS Code 写个 h1 { color: red; } ——你的第一行 CSS 就已经工作了！
0
快来点个赞吧
发表评论
评论列表