CSS 自定义教程
从零开始，打造独一无二的公众号排版风格
快速开始
新手推荐基于预设模板微调
- 在编辑器中选择一个预设模板（简洁/专业/雅韵等）
- 点击"样式"按钮，切换到"自定义 CSS"标签
- 点击"当前模板"按钮，加载预设模板的完整 CSS 代码
- 只修改你想调整的部分（如修改 h1 颜色、h2 边框等）
- 点击"临时应用"查看效果，满意后点击"保存为预设"
高级用户从零开始编写
- 点击"空白模板"查看所有可用的 CSS 类名
- 在编辑器中编写自己的样式
- 使用 CSS 变量（var(--md-primary-color)）实现主题色联动
- 保存为预设后可随时切换
主题色联动（强烈推荐）
Yipoo 提供了强大的 CSS 变量系统，让你的自定义样式能够与编辑器的主题设置联动。 这样当你切换主题色时，所有使用该变量的元素都会自动更新。
--md-primary-color
主题色变量
- 当在面板中选择具体颜色时，等于该颜色值
- 当选择"默认"时，等于当前模板的默认主题色
--md-font-family
字体家族变量
- 当在面板中选择具体字体时，等于该字体值
- 当选择"模板默认"时，等于模板预设字体
--md-line-height
行高变量
- 当在面板中选择具体行高时，等于该行高值
- 当选择"模板默认"时，等于模板预设行高
示例用法：
/* 标题使用主题色 */
h1, h2, h3 {
color: var(--md-primary-color);
}
/* 链接使用主题色 */
.link {
color: var(--md-primary-color);
border-bottom: 1px solid var(--md-primary-color);
}
/* 分隔线使用主题色渐变 */
hr {
background: linear-gradient(
to right,
transparent,
var(--md-primary-color),
transparent
);
}CSS 类名速查表
基础元素
.container | 整篇文章的最外层容器 |
h1 ~ h6 | 各级标题 |
p | 段落 |
strong | 加粗文本 |
em | 斜体文本 |
hr | 分隔线 |
链接与图片
.link | Markdown 链接 |
.image | Markdown 图片 |
代码
.codespan | 行内代码 |
.code_pre | 代码块外层 <pre> |
.hljs | 代码块内层 <code> |
列表
ol / ul | 有序/无序列表 |
.listitem | 列表项（包括任务清单） |
引用与提示框
blockquote | 普通引用 |
.blockquote_p | 引用内段落 |
.blockquote_note | NOTE 提示框 |
.blockquote_tip | TIP 提示框 |
.blockquote_warning | WARNING 提示框 |
表格
table | 表格 |
th / td | 表头/单元格 |
tr | 表格行 |
重要注意事项
❌
不要使用伪元素
微信公众号编辑器会移除所有伪元素（::before, ::after）！ 请使用真实的边框、背景色等属性代替。
❌
避免不兼容的 CSS 特性
- position: fixed / sticky（微信不支持）
- 复杂的 CSS 动画和过渡
- 过于复杂的选择器
✅
推荐使用的 CSS 属性
- border（边框）
- background（背景）
- padding / margin（间距）
- color（颜色）
- font-*（字体相关）
- border-radius（圆角）
- box-shadow（阴影）
最佳实践
从预设模板开始
预设模板已经过精心设计和测试，在其基础上微调比从零开始更高效。 点击"当前模板"按钮查看源码，理解每个样式的作用。
使用 CSS 变量联动
将标题、链接、强调元素等统一使用 var(--md-primary-color)， 这样切换主题色时所有元素会自动更新，保持风格一致。
保持简洁
过于复杂的样式可能在微信公众号中出现兼容性问题。 坚持简洁设计原则，专注于内容的可读性和视觉舒适度。
及时测试
使用"临时应用"功能实时查看效果，确保样式符合预期。 完成后复制到微信公众号后台，在真实环境中测试。
保存为预设
调整满意后立即保存为预设，避免意外丢失。 登录后预设会云端同步，在任何设备上都能使用。
备份 CSS 代码
定期将自定义 CSS 复制到本地文件保存， 避免浏览器缓存清除或其他意外导致的数据丢失。