Building HTML emails, can I put styles in the header section or do I have to use inline styles?

问题

I have to build some email templates using basic HTML and CSS.

I have found this page which details which CSS styles are most supported in various email clients. I understand these will work as inline styles. However I'd like to put them in the head section of the email as it will be a bit cleaner, can I do that as well and will it be well supported? E.g.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
           /* CSS goes here */
        </style>
    </head>
    <body>
        Email goes here
    </body>
</html>

Many thanks!

回答1:

Using CSS and HTML in Email Newsletters a post in http://groundwire.org will help you..

http://groundwire.org/labs/email-publishing/using-css-and-html-in-email-newsletters

回答2:

Unfortunately, for best compatibility the answer is yes, you need to inline your styles. You'll also have to use tables for markup.

Tools such as premailer, which inline the styles for you, help alleviate a lot of headaches though.

CampaignMonitor provides a good list of CSS support.

回答3:

I recommend htmlemailboilerplate

回答4:

To be the most compatible with the widest range of email clients you'll want to use inline styles. I always try to think like a web programmer from 1995 when developing email templates.

Tables - YES! Transparent PNGs - Nooooooooooo.

Thankfully there are a lot of tools out there to help in building email templates that work across most email clients. MailChimp's Email Blueprints project had a lot of templates you can start with.

You CAN use CSS styling while in development (the MailChimp templates do this). But before you send the email you'll need to run it through an HTML Inliner tool to put all the CSS styles inline. MailChimp does this automatically if you use their service. Or Premailer works great too.

来源：https://stackoverflow.com/questions/9661659/building-html-emails-can-i-put-styles-in-the-header-section-or-do-i-have-to-use

标签

html

css

email-templates