HTML内联样式用style属性，值需加引号；标签须置于内；外部CSS用加载，可配合preload优化；新CSS特性需结合@supports和上下文条件使用。
HTML 里怎么写内联样式？style 属性必须加引号
直接在 HTML 标签里用 style 属性写 CSS，是最基础的用法。注意：值必须用双引号或单引号包裹，否则解析会出错。
常见错误是漏掉引号，比如：<div style="color:red"> —— 浏览器可能忽略或报解析异常；正确写法是：<code><div style="color: red; margin-top: 8px;">
<ul>
<li>多个声明之间用英文分号 <code>; 分隔（最后一个分号可省略，但建议保留）
font-size），不能写成 fontSize
margin: 0 可以，但 margin: 10 不合法，得写 10px 或 10em）
<style></style> 标签写在哪儿？位置和作用域有讲究
<style></style> 必须放在 内，且不能嵌套在其他标签中（比如不能放在 里再包一层 <div>）。它的规则默认作用于整个页面，但可以配合 <code>:scope 或属性选择器限制范围。
新版 CSS（如 :has()、:is()、自定义属性级联）在 <style></style> 块里完全可用，只要浏览器支持。例如：
立即学习“前端免费学习笔记（深入）”；
<style>
article:has(> .featured) {
border-left: 3px solid #007bff;
}
</style>
- 如果用了
@layer，顺序会影响层叠优先级，别把@layer reset放在后面覆盖掉 - CSS 自定义属性（
--main-color）可以在<style></style>里定义，也能被 JS 读取修改 - 避免在
<style></style>里写大量重复选择器——它不压缩、不复用，维护成本高
外部 CSS 文件加载失败时，<link> 的 rel 和 as 怎么配？
用 <link rel="stylesheet" href="main.css"> 是标准写法，但新版浏览器对资源预加载更敏感。如果想提前加载并提示浏览器“这是样式表”，要加 as="style" 和 fetchpriority="high"：
<link rel="preload" as="style" href="main.css" fetchpriority="high"> <link rel="stylesheet" href="main.css">
- 只 preload 一次，否则可能触发两次请求
-
rel="stylesheet"的href路径必须准确，404 会导致样式彻底丢失，且无降级提示 - HTTP/2 下多个小 CSS 文件合并收益变小，但
<link>数量太多仍会增加 TLS 握手和队头阻塞风险
CSS 新特性在 HTML 中怎么安全启用？别只看 Can I Use
像 container-type: inline-size、scrollbar-gutter 这类新特性，不是写了就能用。它们依赖容器查询、滚动条控制等底层能力，而这些能力是否生效，取决于父元素是否满足条件。
例如：container-type 必须配合 container-name 和一个设置了 container 的祖先元素，否则整条规则会被忽略——连报错都不会有。
- 用
@supports包裹新语法做渐进增强，而不是全量替换旧规则 - Chrome 和 Safari 对
:has()的实现细节不同（比如伪类嵌套深度限制），要实测 - 不要在关键首屏路径里依赖尚未稳定的新属性（如
anchor-position），它目前仅限实验性 flag 开启
真正麻烦的不是语法写不对，而是新特性生效需要一整套上下文条件同时满足——少一个，就静默失效。
