使用 PHP 在 HTML 邮件中应用 CSS

Question

I am trying to create HTML email template which will be send using PHP,我正在尝试创建将使用 PHP 发送的 HTML 电子邮件模板，

I have created template like below,我创建了如下模板，

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Notification email template</title>
<style type="text/css">

.portlet.box.blue-hoki {
border: 1px solid #869ab3;
border-top: 0;
}

.portlet.box.blue-hoki > .portlet-title {
background-color: #67809F;
}

.portlet.box.blue-hoki > .portlet-title > .caption {
color: #FFFFFF;
}

</style>
</head>

<body>

<div class="portlet box blue-hoki">
        <div class="portlet-title">
          <div class="caption" >
            Report # {report_id} is {action}
          </div>
         </div>
</div>
</body>

When email sent, unfortunately there are no CSS applied to div contents, but if i plut style tag in div and put all style properties in div, then it get it correct,发送电子邮件时，不幸的是没有应用于 div 内容的 CSS，但是如果我在 div 中插入样式标记并将所有样式属性放在 div 中，那么它就正确了，

I could not able to find why class css is not applying to email when defined as class,当定义为类时，我无法找到为什么类 css 不适用于电子邮件，

Any advice?有什么建议吗？

Thanks,谢谢，

Answer 1

There are some thins you can, and cannot do within emails using HTML/CSS.在使用 HTML/CSS 的电子邮件中，您可以做一些事情，也可以做一些事情。

One being using <head></head> with styles set.一种是使用<head></head>设置样式。 Apple Mail.app supports it, but Gmail and Hotmail do not, so it's a no-no. Apple Mail.app 支持它，但 Gmail 和 Hotmail 不支持，所以这是一个禁忌。 Hotmail will support a style section in the body but Gmail still doesn't. Hotmail 将支持正文中的样式部分，但 Gmail 仍然不支持。
Link to an external stylesheet.链接到外部样式表。 Not many email clients support this, best to just forget it.没有多少电子邮件客户端支持这一点，最好忘记它。

What you are going to have to do is put all of your stylings inline to the elements you want.您将要做的是将所有样式内联到您想要的元素中。 So like this:所以像这样：

 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Notification email template</title> </head> <body> <div style="border: 1px solid #869ab3;border-top: 0;"> <div style="background-color: #67809F;"> <div style="color: #FFFFFF;"> Report # {report_id} is {action} </div> </div> </div> </body>

I would recommend reading the blog posted on CSS-Tricks (Using CSS in HTML Emails ) which gives you a much bigger overview of what you can and cannot do and how to best do things.我建议阅读发布在 CSS-Tricks 上的博客（在 HTML 电子邮件中使用 CSS ），它让您更全面地了解可以做什么和不可以做什么以及如何最好地做事。

Answer 2

I also had this problem, sending emails to gmail users.我也遇到了这个问题，向 gmail 用户发送电子邮件。 Gmail doesn't read the styles inside <style> my solution was to make the styles inside the elements using style="" . Gmail 不读取<style>内的<style>我的解决方案是使用style=""在元素内创建style="" 。

Answer 3

email clients not support css..电子邮件客户端不支持 css..

Only way is to right inline styles..唯一的方法是正确的内联样式..

使用 PHP 在 HTML 邮件中应用 CSS

问题描述

3 个解决方案

解决方案1
4 2015-07-30 09:59:59

解决方案2
2 2015-07-30 09:59:14

解决方案3
2 2015-07-30 10:03:33

使用 PHP 在 HTML 邮件中应用 CSS

问题描述

3 个解决方案

解决方案1 4 2015-07-30 09:59:59

解决方案2 2 2015-07-30 09:59:14

解决方案3 2 2015-07-30 10:03:33

解决方案1
4 2015-07-30 09:59:59

解决方案2
2 2015-07-30 09:59:14

解决方案3
2 2015-07-30 10:03:33