html - 如何设置 HTML 电子邮件的样式

Question

这是我的 HTML 电子邮件示例

<div style="width:650px;">
    <div class="begining">  
        <p>
            Dear <span>' . $name . '</span><br/>Thank you for your booking 
        </p>
    </div>

    <table border="1" style="width:80% ;margin: 10px auto;">
        <tr>
            <td>Confirmation Number: </td>
            <td>' . $id . '</td>
        </tr>
        <tr>
            <td>Client’s Name & Contact No:</td>
            <td>' . $name .' and ' . $mobile . '</td>
        </tr>
    </table>

    <div class="begining">  
        <p>
            Should you require an early delivery, 
            please call for your request as soon as possible.<br/>
            Sincerely,<br/>

            Johns<br/>

        </p>
    </div>
</div>

如果我希望我可以分别设置每个元素的样式，就像我对主 div 和表格所做的那样。但是我有很多表格元素，例如 td 和 tr 。我希望插入更多 div 。在每个 div 和其他元素中添加相同的样式会很麻烦。所以我想添加一个样式表或将所有样式放在某个地方。我不知道去哪里。我尝试为我的样式表中的每个元素添加样式，但没有成功，那么我现在该怎么办？提前致谢

Answer 1

您需要内联您的代码。尽管它是多余的，但您可以简单地将内联 CSS 复制并粘贴到每个元素中。如果您需要批量更改许多内容，请使用文本编辑器中的搜索和替换。我还使用片段来避免手动输入。就我个人而言，我发现这比处理电子邮件时使用样式标签更容易、更快捷，因为它可以防止任何来回并有助于调试。

或者，您可以传统地在样式标签中工作(在标题中，而不是样式表中)并使用 inliner tool在发送之前将其转换为内联。

我强烈建议你 check out this thread .它有很多关于 html 电子邮件最佳实践的信息，应该有助于加快您的学习曲线。