Django 发送 HTML 邮件时，外部 CSS 文件、CDN 链接或 @import 规则均无法加载；邮件客户端（如 Gmail、Outlook）仅支持内联样式（inline styles）和 <style> 标签内的嵌入式 CSS。
django 发送 html 邮件时，外部 css 文件、cdn 链接或 `@import` 规则均无法加载；邮件客户端（如 gmail、outlook）仅支持内联样式（inline styles）和 `
在构建 Django 邮件模板时，一个常见误区是沿用 Web 页面开发习惯——将 CSS 抽离为独立文件（如 base.css），再通过 <link rel="stylesheet"> 或 @import 引入。这在邮件场景中完全失效。原因在于绝大多数邮件客户端出于安全与兼容性考虑，会主动屏蔽外部资源请求，且不解析 <link> 标签或外部样式表。
✅ 正确做法是：所有样式必须以两种形式之一存在
- 内联样式（Inline Styles）：直接写在 HTML 元素的 style 属性中（如 <div style="color: #333; font-size: 16px;">）；
- 嵌入式样式（Embedded CSS）：统一写在 <head> 内的 <style type="text/css">...</style> 标签中（注意：必须声明 type="text/css"，部分客户端对省略该属性不兼容）。
⚠️ 特别注意以下限制：
- ❌ 不支持 @import 规则；
- ❌ 不支持外部 CSS 文件（.css）、CDN 链接或 Django 的 {% static %} 模板标签；
- ❌ 不支持 <link rel="stylesheet">；
- ❌ 媒体查询（@media）虽被部分现代客户端支持（如 Apple Mail），但 Gmail（Web/Android/iOS）默认禁用，建议谨慎使用并做降级处理；
- ✅ 推荐优先使用内联样式 + <style> 嵌入组合，兼顾兼容性与可维护性。
下面是一个符合邮件规范的 Django 模板片段示例（test.html）：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body style="margin: 0; padding: 0; background-color: #f5f5f5;">
<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>
<p>Your order <strong>#{{ order_id }}</strong> has been confirmed.</p>
<a href="{{ order_url }}" class="btn" style="background-color: #2196F3;">View Order</a>
</td>
</tr>
</table>
</div>
</body>
</html>在视图中发送邮件时，确保使用 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 将 <style> 中的规则自动内联到元素上（进一步提升兼容性）；
- ✅ 测试多端：务必在 Gmail、Outlook、Apple Mail、iOS Mail 等主流客户端中实测渲染效果；
- ✅ 避免 CSS 重置：不要依赖 * { box-sizing: border-box } 等全局重置，应显式为每个容器设置；
- ✅ 表格布局优先：尽管语义化不足，但 <table> 布局仍是目前跨客户端最稳定的响应式方案（如示例中所用）；
- ✅ 图片务必加 width/height 及 alt 属性，并使用绝对 URL（如 https://example.com/static/logo.png），避免相对路径失效。
遵循以上原则，即可确保 Django 发送的 HTML 邮件在各类客户端中样式稳定、布局准确、交互可用。
