在 textarea 中带有 css 的 html

Question

我有一个 html 页面，我在 head 中将我的样式定义为代码:

<style type="text/css"style="margin: 0;padding: 0;font-family: Helvetica, Arial, sans-serif;">

    * { margin:0; padding:0; }
    * { font-family: Helvetica, Arial, sans-serif; }
    body { -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; width:100%!important; height:100%; }
    a { color:#2BA6CB; }
    .btn { text-decoration:none; color:#FFF; background-color:#2a2c2d; padding:14px 16px; font-weight:bold; margin-right:10px; text-align:center; cursor:pointer; display:inline-block; }
    table.social { background-color:#ebebeb; }
    table.body-wrap { width:100%; padding-top:50px; }
    table.footer-wrap { width:100%; clear:both!important; }
    .footer-wrap .container td.content  p { border-top:1px solid rgb(215,215,215); padding-top:15px; }
    .footer-wrap .container td.content p { font-size:10px; font-weight:bold; }
    h1,h2,h3 { font-family:Helvetica, Arial, sans-serif; line-height:1.1; margin-bottom:15px; color:#2a2c2d; }
    h1 { font-weight:700; font-size:40px; color:#2a2c2e; }
    h2 { font-weight:700; font-size:22px; margin-top:25px; }
    h3 { font-weight:700; font-size:16px; margin-top:25px; }
    p, ul { margin-bottom:10px; font-weight:normal; font-size:14px; line-height:1.4; }
    p { color:#6c6f70; }
    div.lead p { font-size:17px; font-weight:700; color:#2a2c2d; }
    ul li { margin-left:5px; list-style-position:inside; }
    .container { display:block!important; max-width:600px!important; margin:0 auto!important; clear:both!important; }
    .content { padding:25px; max-width:600px; margin:0 auto; display:block; }
    .content table { width:100%; font-size:14px; }
    .log-details { background-color:#2a2c2d; color:#FFF; padding:20px; margin-bottom:15px; }
    .log-details td { padding-top:2px; padding-bottom:2px; }
    th { width:110px; text-align:left; }

    @media only screen and (max-width: 600px) {

    a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important; }
    div[class="column"] { width: auto!important; float:none!important; }
    table.social div[class="column"] { width:auto!important; }

    }
</style>  

用于发送时事通讯。然后我必须在另一个页面的 TextArea 中呈现这个 HTML 页面。到目前为止一切都很好。

当我将代码呈现到 TextArea 时将其保存到数据库后，我在主页面上破坏了 css。发生的事情是，它需要在 textarea 中找到的 css 并将其添加到主页。这是它添加到 header 的标记。

谁能帮我避免这种情况？非常感谢!

Answer 1

您的 head 部分中的样式标签格式不正确，正确的结构方式是:

<style type="text/css">
    .selector {margin: 0;padding: 0;font-family: Helvetica, Arial, sans-serif;
    * { margin:0; padding:0; }
    * { font-family: Helvetica, Arial, sans-serif; }
    body { -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none;}
</style>

CSS 选择器和规则必须位于一个适当闭合的 <style> 集合中标签。