CSS引入有三种方式：外链（首选，利于缓存复用）、内部style标签（适合单页原型）、内联style（仅限JS动态控制单元素）。选择器按唯一性区分：id用于唯一容器，class用于可复用样式，优先使用语义化HTML标签。
怎么把CSS加进HTML里？三种方式的实操选择
直接在HTML里写CSS，不是“能不能”，而是“该不该”。关键看项目规模和维护预期。
-
<link rel="stylesheet" href="style.css">是绝大多数场景的首选：样式集中、可缓存、多页复用。路径写错是新手最常卡住的地方，比如href="css/style.css"却把文件放在根目录下 -
<style>标签适合单页应用或原型验证，比如快速测一个 Flex 布局效果。但别把它当成长期方案——样式一多，<head>就变成样式垃圾场 - 内联
style="..."只应在动态控制单个元素时用（比如 JS 切换背景色），绝不能用来定义通用规则。它权重太高，后期用类名覆盖都得加!important，埋雷
class 和 id 选哪个？别再靠猜了
用错选择器类型，等于给后续样式调试加锁。核心就一条：是否唯一。
- 用
id：只用于页面中**必然唯一**的容器，比如<header id="main-header">或<nav id="primary-nav">。CSS 里写#main-header，改一次就影响全局，改错没法回滚 - 用
class：所有可复用、可组合的样式，比如<button class="btn btn--primary">或<p class="text-sm text-muted">。BEM 命名法（如card__title）不是炫技，是防止.title在不同模块里互相打架 - 别用
div+class模拟语义标签。写<div class="nav">不如直接用<nav>—— 屏幕阅读器、SEO、甚至你自己半年后读代码，都会感谢这个决定
背景图拉伸、模糊失效、加载慢？别只调 background-size
背景图出问题，90% 不是 CSS 写错了，而是没处理好资源层逻辑。
-
background-size: cover确保填满，但得配background-position: center，否则人物脸可能被切掉；移动端还要加background-attachment: scroll防止视差滚动卡顿 -
backdrop-filter: blur(10px)在 Safari 上默认不生效，必须加-webkit-backdrop-filter前缀，且父容器要设background-color: rgba(255,255,255,0.8)才能看见效果 - 大图背景优先用
<picture>+srcset响应式加载，或者至少压缩成 WebP 格式。直接丢一张 5MB 的 JPG 进background-image，首屏加载时间就决定了用户走不走
Flex/Grid 布局写完没效果？先查 display 和父容器
Flex 或 Grid 失效，往往不是属性写错，而是布局上下文没建立起来。
立即学习“前端免费学习笔记（深入）”；
- 子元素想用
justify-content，前提是父容器已设display: flex—— 很多人只记得给子元素加align-self，忘了父级这一步 - Grid 的
grid-template-columns: repeat(3, 1fr)在小屏上会挤成一列，必须配合@media (max-width: 768px)改成repeat(1, 1fr)，不然用户滑半天才看到第三列 - 用
gap替代margin控制子项间距更安全，它不会触发外边距合并（margin collapse），也不会意外撑开父容器
background-image，得顺手检查图片路径、格式、尺寸、媒体查询、前缀支持——美化不是贴膏药，是系统性收口。 
