AWS SES发送模板邮件时如何正确使用CSS？

问题根源 #

邮件客户端（如Gmail、Outlook、Apple Mail等）几乎不支持外部CSS链接（<link>标签），这是你样式失效的核心原因——即使把CSS传到Google Drive，邮件也不会加载外部样式文件，不管用AWS SES还是其他邮件服务都是如此。

解决方案 #

1. 采用内联CSS（最可靠的方案）

把所有样式直接写在HTML元素的style属性里，这是邮件样式兼容的黄金准则。针对你的示例，修改后的代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>HTML Pandas Dataframe with CSS</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <table>
        <tr style="color: rgb(119,119,119);font-size: 16.0px;">
            <td align="left">
                <p> </p>
                <p>Hi,</p>
                <p>Welcome!</p>
                <br>
                <!-- 将表格的CSS样式直接内联到元素上 -->
                <table border="1" style="border-collapse: collapse; width: 100%;">
                    <thead>
                        <tr style="text-align: right; background-color: #f2f2f2;">
                            <th style="border: 1px solid #ddd; padding: 8px;">id</th>
                            <th style="border: 1px solid #ddd; padding: 8px;">name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="border: 1px solid #ddd; padding: 8px;">1</td>
                            <td style="border: 1px solid #ddd; padding: 8px;">Jack</td>
                        </tr>
                    </tbody>
                </table>
                <br>
            </td>
        </tr>
    </table>
</body>
</html>

2. 补充使用嵌入式CSS（<style>标签）

部分邮件客户端支持<head>里的嵌入式CSS，可以作为内联样式的补充（比如统一设置全局样式），但注意Gmail等客户端会过滤部分嵌入式样式，所以不能完全依赖：

<head>
    <style>
        .mystyle th { background-color: #f2f2f2; }
        .mystyle td { padding: 8px; border: 1px solid #ddd; }
    </style>
</head>

3. 使用工具自动转换内联CSS

如果邮件结构复杂，手动写内联样式太繁琐，可以用工具自动把嵌入式/外部CSS转成内联样式，比如：

• Premailer（在线工具或Python库）
• Juice（Node.js工具）
  这些工具能帮你快速处理样式转换，减少手动工作量。

4. AWS SES模板的额外注意事项

• 使用send_templated_email时，模板中的HTML必须是自包含的，不能引用外部资源（CSS、图片等），图片建议上传到S3并设置公开访问，然后用绝对URL引用。
• 测试兼容性：不同邮件客户端对CSS的支持差异很大，建议用专业工具测试样式在主流客户端的显示效果。

内容的提问来源于stack exchange，提问作者Bushmaster