CSS 内联
CSS 内联到底是解决什么问题
邮件客户端不是完整浏览器。Gmail、Outlook、QQ 邮箱、企业邮等环境对外链样式表支持很差，`<head>` 里的 `<style>` 也是「有的保留、有的整段丢掉」。相对稳定的做法，是把字号、颜色、间距等写进各标签的 `style` 属性里——也就是常说的「内联样式」。 CSS 内联工具（CSS Inliner）做的事，是让你在网页开发里习惯的「HTML 管结构、CSS 管样式」不必先手工揉进一个文件：保留分栏编辑或分文件维护，点一次内联，把选择器匹配到的声明写到对应元素上。交给 Mailchimp、腾讯企微营销、自建发信系统的那份 HTML，仍是普通标记，但不再赌外链 CSS 能加载成功。 本页面向发信前的最后一道工序：左侧 HTML / CSS 分栏（或一次导入两个文件），右侧只读输出；满意后复制、下载，或用「预览 HTML」把结果送到首页 Playground 点一点版式，再发测试信。
外联 CSS 与页内样式都支持，不只认 HTML 里那一坨
市面上不少在线内联器默认你的 CSS 已经在 HTML 里——常见是设计工具导出的 `<style>`。一旦项目按正常方式拆分：`template.html` + `email.css`，来自构建脚本、Figma 交付或静态站点生成器，就得自己合并文件，或装一个一年只用两次的 CLI。 本站把两种来源放在同一优先级：HTML 标签页放结构，CSS 标签页放规则；也可一次导入 `.html` 与 `.css`。CSS 栏里的规则会与 HTML 中已有的 `<style>` 一并参与匹配，输出为带 `style` 属性的 HTML，并去掉已内联过的 `<style>` 标签——这正是多数 ESP 粘贴区期待的形态。 对营销邮件、事务邮件都一样：按钮和字体常维护在公共 CSS 里，HTML 片段来自不同同事；产品模块从后台拷一段、样式表从设计规范里来。若内联器读不了外联 CSS，只处理「已经嵌进 HTML 的样式」，这些日常分工都会卡住。
处理在浏览器本地完成，无需注册、不上传服务器。`:hover`、`::before` 等无法写成内联属性的规则会跳过，并在输出区上方的「说明」里列出；简单 `@media` 会尽量展开，但收件箱里的响应式表现仍与网页不同，务必向目标客户端发真实测试。 需要对照源码检查间距时，用「预览 HTML」把内联结果打开首页 Playground，与站内其他工具共用同一套 HTML/CSS/JS 预览，便于在粘贴进 ESP 前发现漏掉的 class 或撑破版式的表格。
打开 CSS 内联工具HTML / CSS 分栏
结构与样式分开改，和仓库里两个文件一样；确认无误后再点「内联 CSS」生成可发信版本。
一次导入两个文件
同时载入 .html 与 .css，避免两段大文本手工拼接时截断或贴错顺序。
首页预览
内联完成后可新标签打开首页 Playground，视觉过一遍再粘进发信平台。
面向邮件的 CSS 内联：外联样式表也能一次处理
很多工具只会把 HTML 里已有的 <style> 转成内联；这里额外支持独立 .css 文件与 CSS 编辑栏，并与页内嵌入样式合并处理，再复制、下载或预览。
外联 .css 不必先手工塞进 HTML
若你本地是 `template.html` 配 `email.css`，直接导入或分别粘贴到两个标签页即可。工具按选择器把声明写到元素的 `style` 上——收件箱最认这种格式。不必为了迁就内联器，先把样式表复制进 `<head>` 再跑一遍。HTML 里若还留着 `<style>` 模块，会在同一次内联里一并处理，适合「公共 head 样式 + 分块 body」的模板结构。 右侧输出只读，避免误改定稿；输出栏右上角可复制，工具栏可下载 `inlined.html`，也可用「预览 HTML」跳转首页 Playground。转换全程在本地浏览器完成。
- CSS 独立标签页，贴合真实项目拆分
- 外联 CSS + 页内 style 一次内联
- 跳过规则在说明区列出
- 本地运行，不上传
邮件 HTML 模板如何内联 CSS
放入 HTML 与 CSS
模板粘到 HTML 栏；按钮、标题、版式等公共规则放在 CSS 栏，或同时导入 .html 与 .css。若草稿 head 里还有 <style>，可保留，会一并内联。
点击「内联 CSS」
匹配到的样式写入各元素 style 属性；留意「说明」里的跳过项。右侧看结果，左侧仍可改选择器后重新内联。
预览后发信
复制或下载，或用「预览 HTML」在首页检查版式。粘进 ESP 后向 Gmail、Outlook 等发测试信，并保存一份通过测试的 .html 备查。
CSS 内联常见问题
下一封邮件要发了？先把 CSS 内联好
粘贴 HTML，补上外联或嵌入的 CSS，内联后与测试收件箱核对，再下载或复制。
CSS 内联
- 外联 .css 与 HTML 一次内联
- 页内 <style> 同步处理
- 可跳转首页 Playground 预览
- No signup; use the tool in the browser
内联后务必发真实测试——预览代替不了各家客户端的差异。
一份 HTML 交给 ESP
内联一次，粘贴活动后台，归档定稿。