Visualforce-邮件模板（2）样式

默认情况下，Visualforce电子邮件模板始终使用其他Salesforce组件的标准外观。但是，您可以通过定义自己的样式表来扩展或覆盖这些样式。与其他Visualforce页面不同，Visualforce电子邮件模板不能使用引用的页面样式或静态资源。尽管CSS似乎在电子邮件模板预览窗格中呈现，但它与您的电子邮件的收件人不同。您必须在<style>标签内使用CSS定义您的样式。以下示例将电子邮件的字体更改为Courier，将边框添加到表中，并更改表格行的颜色：

<messaging:emailTemplate recipientType="Contact" relatedToType="Account" subject="Case report for Account: {!relatedTo.name}" replyTo="support@acme.com"> <messaging:htmlEmailBody> <html> <style type="text/css"> body {font-family: Courier; size: 12pt;} table { border-width: 5px; border-spacing: 5px; border-style: dashed; border-color: #FF0000; background-color: #FFFFFF; } td { border-width: 1px; padding: 4px; border-style: solid; border-color: #000000; background-color: #FFEECC; } th { color: #000000; border-width: 1px ; padding: 4px ; border-style: solid ; border-color: #000000; background-color: #FFFFF0; } </style> <body> <p>Dear {!recipient.name},</p> <table border="0" > <tr> <th>Case Number</th><th>Origin</th> <th>Creator Email</th><th>Status</th> </tr> <apex:repeat var="cx" value="{!relatedTo.Cases}"> <tr> <td><a href = "https://na1.salesforce.com/{!cx.id}">{!cx.CaseNumber} </a></td> <td>{!cx.Origin}</td> <td>{!cx.Contact.email}</td> <td>{!cx.Status}</td> </tr> </apex:repeat> </table> </body> </html> </messaging:htmlEmailBody> </messaging:emailTemplate>

在自定义组件中定义Visualforce样式表

虽然您无法在Visualforce电子邮件模板中引用外部样式表，但您可以将样式定义放置在可在其他位置引用的自定义组件中。例如，您可以修改前面的示例以将样式信息放入名为EmailStyle的组件中：

<apex:component access="global"> <style type="text/css"> body {font-family: Courier; size: 12pt;} table { border-width: 5px; border-spacing: 5px; border-style: dashed; border-color: #FF0000; background-color: #FFFFFF; } td { border-width: 1px; padding: 4px; border-style: solid; border-color: #000000; background-color: #FFEECC; } th { color: #000000; border-width: 1px ; padding: 4px ; border-style: solid ; border-color: #000000; background-color: #FFFFF0; } </style> </apex:component>

然后，在Visualforce电子邮件模板中，您只能引用该组件：

<messaging:htmlEmailBody> <html> <c:EmailStyle /> <body> <p>Dear {!recipient.name},</p> ... </body> </html> </messaging:htmlEmailBody>

注意：在Visualforce电子邮件模板中使用的任何<apex：component>标记都必须具有全局访问级别。