Question

当使用mutt通过电子邮件发送以下html页面（Yahoo / Gmail）时，我无法看到CSS样式。我只看到一个普通的表格。但是当我在浏览器中查看时，我得到了理想的样式。为什么会这样？我错过了什么吗？

mutt -e "set content_type=text/html" me@mail.com -s "Test" < Test.html

的test.html

<!DOCTYPE html>
<html>
<head>
<style>
rd{ color: red; }
gn{ color: green; }
body { background-color:#E0E0E0; font-family: helvetica;font-size: 15px;}
</style>
</head>
<body>
<table border="1" align ="left">
<tr><th>No.</th><th>Item</th></tr>
<tr><td>1</td><td><gn>abc</gn></td></tr>
<tr><td>2</td><td><rd>ghi</rd></td></tr>
</table>
</body>
</html>

Answer 1

在HTML电子邮件中包含CSS的方法是使用内联样式。

    <!DOCTYPE html>
    <html>
    <body style='background-color:#E0E0E0; font-family: helvetica;font-size: 15px;'>
        <table border="1" align="left" style="color:red;">
            <tr><th>No.</th><th>Item</th></tr>
            <tr><td>1</td><td><gn>abc</gn></td></tr>
        </table>
    </body>
    </html>

参考：http://www.htmlgoodies.com/beyond/css/article.php/3679231

Answer 2

html-email非常有限，甚至div和p标签也不总是按预期运行。试图创建自己的标签只是在寻找麻烦。

你的两个表格单元格应该是这样的：

<tr><td>1</td><td style="font-family: Helvetica, Arial, sans-serif; font-size: 15px; color:#007700;">abc</td></tr>
<tr><td>2</td><td style="font-family: Helvetica, Arial, sans-serif; font-size: 15px; color:#770000;">ghi</td></tr>

除了始终内联CSS之外，您还需要使用6位十六进制颜色来获得最大的电子邮件客户端支持。您还必须在每个表格单元格中重新声明您的字体样式。不幸的是，这是html-email所需要的。

不要忘记字体堆栈，因为您目前假设读者已安装Helvetica。

Answer 3

您可能需要查看本教程Getting Started with HTML Emails tutsplus这是一个旧教程但非常有用。

祝你好运。

电子邮件中没有看到CSS样式

3 个答案: