css制作邮件

CSS 制作邮件的注意事项

邮件客户端对 CSS 的支持差异较大，部分客户端会忽略或限制某些 CSS 属性。为确保兼容性，建议使用内联样式（Inline CSS）而非外部样式表或 <style> 标签。避免使用浮动（float）、定位（position）等复杂布局属性。

推荐的内联样式写法

在 HTML 标签中直接通过 style 属性添加 CSS：

<p style="color: #333; font-family: Arial, sans-serif; font-size: 14px;">邮件正文内容</p>

常用邮件兼容 CSS 属性

• 字体与文本
  font-family、font-size、color、line-height、text-align
  优先使用 Web 安全字体（如 Arial, Helvetica, Times New Roman）。

  

• 背景与边框
  background-color（部分客户端不支持图片背景）、border（避免复杂边框样式）。

• 布局
  使用表格（<table>）布局而非 <div>，因表格在邮件中兼容性更好。例如：

  <table width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td style="padding: 10px;">内容区域</td>
    </tr>
  </table>

避免使用的 CSS 特性

• 外部样式表或 <style> 标签（Gmail 等会移除）。
• JavaScript 或动态样式（如 :hover）。
• 绝对单位（如 cm、mm），建议使用 px 或百分比。

测试工具与资源

• 测试工具：Litmus、Email on Acid 可检查多客户端渲染效果。
• 模板框架：MJML（响应式邮件标记语言）或 Foundation for Emails 可简化开发。