Django 邮件模板中 CSS 不生效的解决方案：仅支持内联样式与嵌入式样式-html教程-PHP中文网

Django 发送 HTML 邮件时，外部 CSS 文件、CDN 链接或 @import 规则均无法加载；邮件客户端（如 Gmail、Outlook）仅支持内联样式（inline styles）和标签内的嵌入式 CSS。

django 发送 html 邮件时，外部 css 文件、cdn 链接或 `@import` 规则均无法加载；邮件客户端（如 gmail、outlook）仅支持内联样式（inline styles）和 `

在构建 Django 邮件模板时，一个常见误区是沿用 Web 页面开发习惯——将 CSS 抽离为独立文件（如 base.css），再通过或 @import 引入。这在邮件场景中完全失效。原因在于绝大多数邮件客户端出于安全与兼容性考虑，会主动屏蔽外部资源请求，且不解析标签或外部样式表。

✅ 正确做法是：所有样式必须以两种形式之一存在

内联样式（Inline Styles）：直接写在 HTML 元素的 style 属性中（如
）；
嵌入式样式（Embedded CSS）：统一写在内的标签中（注意：必须声明 type="text/css"，部分客户端对省略该属性不兼容）。

⚠️ 特别注意以下限制：

❌ 不支持 @import 规则；
❌ 不支持外部 CSS 文件（.css）、CDN 链接或 Django 的 {% static %} 模板标签；
❌ 不支持；
❌ 媒体查询（@media）虽被部分现代客户端支持（如 Apple Mail），但 Gmail（Web/Android/iOS）默认禁用，建议谨慎使用并做降级处理；
✅ 推荐优先使用内联样式 +

下面是一个符合邮件规范的 Django 模板片段示例（test.html）：



  <meta charset="utf-8"><title>Order Confirmation</title><style type="text/css">
    /* 所有全局样式必须在此定义 */
    body { margin: 0; padding: 0; background-color: #f5f5f5; font-family: 'Open Sans', Helvetica, Arial, sans-serif; }
    .container { max-width: 600px; margin: 0 auto; }
    .btn {
      display: inline-block;
      background-color: #F44336;
      color: white !important;
      text-decoration: none;
      padding: 12px 24px;
      border-radius: 4px;
      font-weight: bold;
    }
    @media screen and (max-width: 480px) {
      .mobile-hide { display: none !important; }
    }
  </style><div class="container" style="background-color: white; margin: 20px auto; border-radius: 8px; overflow: hidden;">
    <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center" style="padding: 30px 20px; background-color: #4CAF50; color: white;">
          <h1 style="margin: 0; font-size: 28px;">Thank You!</h1>
        </td>
      </tr>
<tr>
<td style="padding: 25px;">
          <p>Hello {{ user_name }},</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill2691" title="Django"><img
														src="https://img.php.cn/upload/skill/000/000/081/178928291071323.jpg" alt="Django" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill2691" title="Django" class="overflowclass">Django</a>
													<p class="overflowclass">避免常见的 Django 错误——QuerySet 评估、N+1 查询、迁移冲突和 ORM 陷阱。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill2691" title="Django" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
          <p>Your order <strong>#{{ order_id }}</strong> has been confirmed.</p>
          <a href="%7B%7B%20order_url%20%7D%7D" class="btn" style="background-color: #2196F3;">View Order</a>
        </td>
      </tr>
</table>
</div>

在视图中发送邮件时，确保使用 render_to_string 渲染完整 HTML，并通过 EmailMultiAlternatives 同时附加 HTML 和纯文本版本（提升可访问性与反垃圾邮件评分）：

from django.core.mail import EmailMultiAlternatives
from django.template.loader import render_to_string
from django.utils.html import strip_tags

def send_order_email(user, order):
    context = {
        'user_name': user.get_full_name() or user.username,
        'order_id': order.id,
        'order_url': f"https://example.com/orders/{order.id}/",
    }
    html_content = render_to_string("emails/test.html", context)
    text_content = strip_tags(html_content)  # 自动生成纯文本备选内容

    email = EmailMultiAlternatives(
        subject="Your Order Has Been Confirmed",
        body=text_content,
        from_email="no-reply@example.com",
        to=[user.email],
    )
    email.attach_alternative(html_content, "text/html")
    email.send()

? 最佳实践总结：

✅ 使用工具辅助：可借助 Premailer 或 Python 库 pynliner 将
✅ 测试多端：务必在 Gmail、Outlook、Apple Mail、iOS Mail 等主流客户端中实测渲染效果；
✅ 避免 CSS 重置：不要依赖 * { box-sizing: border-box } 等全局重置，应显式为每个容器设置；
✅ 表格布局优先：尽管语义化不足，但布局仍是目前跨客户端最稳定的响应式方案（如示例中所用）；
✅ 图片务必加 width/height 及 alt 属性，并使用绝对 URL（如 https://example.com/static/logo.png），避免相对路径失效。
遵循以上原则，即可确保 Django 发送的 HTML 邮件在各类客户端中样式稳定、布局准确、交互可用。