css 为Gmail设计HTML电子邮件样式

e5nqia27 于 10个月前发布在其他

关注(0)|答案(8)|浏览(150)

我正在生成一个使用内部样式表的html电子邮件，即。

<!doctype html>
<html>
<head>
  <style type="text/css">
    h2.foo {color: red}    
  </style>
</head>
<body>
 <h2 class="foo">Email content here</foo>
</body>
</html>

字符串
当在Gmail中查看时，似乎内部样式表中的所有样式都被忽略了。

<h2 style="color: red">Email content here</foo>

型
这是我在使用Gmail查看HTML电子邮件时唯一的选择吗？

css

来源：https://stackoverflow.com/questions/9056172/styling-html-email-for-gmail

8条答案

按热度按时间

monwx1rj1#

使用内联样式的一切。这个网站将您的类转换为内联样式：http://premailer.dialect.ca/

赞(0）回复(0）举报 10个月前

axr492tv2#

这里的答案已经过时了，截至今天2016年9月30日。Gmail目前是head中的style标签的rolling out support，以及媒体查询。如果Gmail是你唯一关心的，你可以像现代开发人员一样安全地使用类！
作为参考，您可以检查**official gmail CSS docs**。
顺便说一下，Gmail是唯一一个不支持style（reference，直到他们更新）的主要客户端。这意味着你可以 * 几乎 * 安全地停止将样式内联。一些更不知名的客户端可能仍然需要它们。

赞(0）回复(0）举报 10个月前

abithluo3#

Gmail开始在头部区域提供基本的样式标签支持。目前还没有发现任何官方的东西，但是你可以很容易地自己尝试。
它似乎忽略了类和id选择器，但基本的元素选择器工作。

<!doctype html>
<html>
  <head>
    <style type="text/css">
      p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}  
    </style>
  </head>
  <body>
    <p>Email content here</p>
  </body>
</html>

字符串
它将在自己的头部区域创建一个样式标记，该区域仅限于包含邮件正文的div

<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>

型

赞(0）回复(0）举报 10个月前

o75abkj44#

我同意所有支持类和内联样式的人的观点，你现在可能已经了解了这一点，但是如果你的样式表中有一个错误，Gmail会忽略它。
你可能会认为你的CSS是完美的，因为你经常这样做，为什么我会在我的CSS错误？运行它通过CSS验证器（例如http://www.css-validator.org/），看看会发生什么。我这样做后，遇到一些Gmail显示问题，令我惊讶的是，几个Microsoft Outlook特定的样式声明显示为错误。
这对我来说是有意义的，所以我把它们从样式表中删除，并把它们放在only for Microsoft代码块中，如下所示：

<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->

字符串
这只是一个简单的例子，但是，谁知道呢，它可能在某个时候派上用场。

赞(0）回复(0）举报 10个月前

xdyibdwo5#

请注意，用于发送电子邮件的服务和工具可能能够为您内联CSS，允许<style>标签中的CSS在Gmail中工作。
例如，如果您使用MailChimp发送电子邮件，您的CSS从<style>标签将被默认自动内联。使用Mandrill，您可以通过选中设置选项卡的“发送邮件”部分中的“HTML电子邮件中的内联CSS样式”框来启用此功能（尽管默认情况下for performance reasons禁用）：

的数据

赞(0）回复(0）举报 10个月前

3htmauhk6#

正如其他人所说，有些电子邮件程序不会读取css样式。如果你已经写好了一封网络电子邮件，你可以使用zurb的以下工具来内联所有样式：
http://zurb.com/ink/inliner.php
当使用上面提到的来自mailchimp，campaign monitor等的模板时，这非常方便，因为它们，正如你所发现的，在某些电子邮件程序中不起作用。这个工具将您的样式部分留给将读取它的邮件程序，并将所有样式内联以获得您想要的格式的更通用的可读性。

赞(0）回复(0）举报 10个月前

s4chpxco7#

我在Mailjet中设计模板时遇到了同样的问题。解决这个问题的方法是在<style>标签中缩小CSS代码。

赞(0）回复(0）举报 10个月前

w8biq8rn8#

@shawn确实给了给予一个例子，如何使用头部样式和内联样式的组合。一些电子邮件客户端（Outlook，Gmail等）有棘手的事情，这些可以用css在头部样式中修复。
额外的表<table width="580">是为Outlook解决“宽度”问题，也是为了居中布局。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="border:none;" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<base target=_blank href="http://">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="x-apple-disable-message-reformatting"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no"/>
<title>
</title>
<link href="https://fonts.google.com/specimen/Open+Sans#standard-styles" rel="stylesheet" type="text/css"/>
<style type="text/css">
.ReadMsgBody { width:100%;background-color:#eeeeee }
.ExternalClass { width:100%;background-color:#eeeeee }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height:100% }
a[x-apple-data-detectors] { color:inherit !important;text-decoration:none !important;font-size:inherit !important; font-family:inherit !important;font-weight:inherit !important;line-height:inherit !important }
div[style*="margin: 16px 0"] { margin:0 !important }
body { margin:0;padding:0;font-family:'Open Sans','Verdana',Geneva,sans-serif;-webkit-text-size-adjust:none;-ms-text-size-adjust:none }
#outlook a { padding:0 }
.yshortcuts a { border-bottom:none !important }
table,td { mso-table-lspace:0pt;mso-table-rspace:0pt }
table,tr,td { border-collapse:collapse }
tbody { width: 100% }
p,a,li,blockquote { mso-line-height-rule:exactly }
li { mso-margin-top-alt:0;mso-margin-bottom-alt:0 }
@media screen and (min-width: 600px) {
  table.container {width: 580px !important; margin: 10px auto !important }
  div.fullwidth { width: 580px !important }
  div.halfwidth { width: 290px !important }
}
</style>
<!--[if gte mso 11]>
<style type="text/css">table {border-spacing: 0;}table td {border-collapse: separate;}</style>
<![endif]-->
<!--[if !mso]><!-->
<style type="text/css">table{border-spacing:0} table td{border-collapse:collapse}</style>
<!--<![endif]-->
<!--[if gte mso 15]>
<xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<![endif]-->
<!--[if gte mso 9]>
<xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<![endif]-->
</head>
<body bgcolor="#ffffff" style="width:100%; margin:0px; padding:0px; border:0px; -webkit-text-size-adjust:100%">

<!-- BODY TABLE -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:100%; border-collapse:collapse; border-spacing:0; margin:0 auto; padding:0; border:0; background-color:#ffffff">
<tr>
<td width="100%" align="center" valign="top" style="padding:0px !important; border-collapse:collapse; border-spacing:0; border:0px; text-align:center; vertical-align:top; -webkit-text-size-adjust:100%;">

<!-- WRAPPER TABLE -->
<!--[if (gte mso 9)|(IE)]>
<table width="580" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td>
<![endif]-->
<table class="container" width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; max-width: 580px; margin: 0 auto; background-color: #ffffff; border:1px solid #e7e7e7">
<tr>
<td class="font0" align="center" style="padding: 0 !important; font: normal 0px/0px sans-serif !important; font-size: 0px !important; border-collapse: collapse; border-spacing: 0; border: 0; text-align: center; vertical-align: top;">

<!-- EACH CONTENT ROW AS BELOW -->
<!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td>
<![endif]-->
<div class="fullwidth" style="width: 290px; display: inline-block; vertical-align: top;">
<table width="100%" style="border-collapse: collapse; border-spacing: 0;">
<tr>
<td style="padding: 20px 10px 0px 10px; font: normal 12px/16px sans-serif; color: #555454; text-align: left; -webkit-text-size-adjust: 100%;">
YOUR CONTENT HERE
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->

<!-- END WRAPPER TABLE -->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->

<!-- END BODY TABLE -->
</td>
</tr>
</table>

</body>
</html>

字符串

赞(0）回复(0）举报 11个月前

我来回答

css 为Gmail设计HTML电子邮件样式

8条答案

相关问题

热门标签

最新问答