Question

我有一个wordpress网站。在撰写每篇文章后，我会在发布文章时手动插入一些注释，它需要如下图所示。我有内联CSS，但如何将其转换为外部CSS代码并在网页中具体说明？

我需要删除左侧的空格，并且还需要注释更接近节省空间。

我的内联CSS代码： -

＆＃13;

<div dir="ltr" style="text-align: left;" trbidi="on">
<hr style="background: 0px center rgb(255, 255, 255); border-bottom-color: rgb(204, 204, 204); border-bottom-style: dotted; border-bottom-width: 2px; border-top-width: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 13.8px; line-height: 20.7px;" />
<div class="comment authorComment" id="comment8167199" style="background-color: #fffce5; clear: both; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 13.8px; line-height: 20.7px; margin: 0.5em 0px 0px; min-height: 40px; padding: 8px 0px 0px 40px; position: relative; word-wrap: break-word;">
<div class="author_photo" style="float: left; height: 25px; left: 8px; margin: 0px; padding: 0px; position: absolute; top: 8px; width: 25px;">
</div>
<div class="comment_meta" style="color: #888888; font-size: 0.857em; line-height: 1.3; margin-bottom: 0.8em !important; padding: 0px 115px 0px 0px;">
<strong style="color: #333333;">anonymous&nbsp;</strong><span class="timestamp" style="display: inline-block;"><small style="background-color: #8b9a18; border-radius: 3px; color: white; font-size: 0.9em; padding: 2px 5px; position: absolute; right: 8px; top: 8px;">Comment</small></span></div>
<div class="comment_body" style="margin: 0px; padding: 0px 8px 0px 0px;">
<div class="" style="margin-bottom: 1em; padding: 0px;">
[<span style="font-family: Arial, Helvetica, sans-serif; font-size: 13.8px; line-height: 20.7px;">Here I enter command manually everytime</span><span style="font-size: 13.8px; line-height: 20.7px;">]</span></div>
</div>
</div>
<hr style="background: 0px center rgb(255, 255, 255); border-bottom-color: rgb(204, 204, 204); border-bottom-style: dotted; border-bottom-width: 2px; border-top-width: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 13.8px; line-height: 20.7px;" />
<div class="comment" id="comment8167751" style="background-color: white; margin: 0.5em 0px 0px; min-height: 40px; padding: 8px 0px 0px 40px; position: relative; word-wrap: break-word;">
<div class="author_photo" style="color: #333333; float: left; font-family: arial, helvetica, sans-serif; font-size: 13.8px; height: 25px; left: 8px; line-height: 20.7px; margin: 0px; padding: 0px; position: absolute; top: 8px; width: 25px;">
</div>
<div class="comment_meta" style="margin-bottom: 0.8em; padding: 0px 115px 0px 0px;">
<span style="color: #333333; font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;"><span style="font-size: 11.8266px; line-height: 15.3746px;"><b>anonymous</b></span></span></div>
<div class="comment_body" style="color: #333333; font-family: arial, helvetica, sans-serif; font-size: 13.8px; line-height: 20.7px; margin: 0px; padding: 0px 8px 0px 0px;">
<div class="" style="margin-bottom: 1em; padding: 0px;">
[Here I enter command manually everytime]</div>
</div>
</div>
<hr style="background: 0px center rgb(255, 255, 255); border-bottom-color: rgb(204, 204, 204); border-bottom-style: dotted; border-bottom-width: 2px; border-top-width: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 13.8px; line-height: 20.7px;" />
<div class="comment authorComment" id="comment8169379" style="background-color: #fffce5; clear: both; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 13.8px; line-height: 20.7px; margin: 0.5em 0px 0px; min-height: 40px; padding: 8px 0px 0px 40px; position: relative; word-wrap: break-word;">
<div class="author_photo" style="float: left; height: 25px; left: 8px; margin: 0px; padding: 0px; position: absolute; top: 8px; width: 25px;">
</div>
<div class="comment_meta" style="color: #888888; font-size: 0.857em; line-height: 1.3; margin-bottom: 0.8em !important; padding: 0px 115px 0px 0px;">
<strong style="color: #333333;">anonymous</strong><span class="timestamp" style="display: inline-block;"><small style="background-color: #8b9a18; border-radius: 3px; color: white; font-size: 0.9em; padding: 2px 5px; position: absolute; right: 8px; top: 8px;"><span style="font-size: 10.6439px; line-height: 13.8371px;">Comment</span></small></span></div>
<div class="comment_body" style="margin: 0px; padding: 0px 8px 0px 0px;">
<div class="" style="margin-bottom: 1em; padding: 0px;">
[<span style="font-family: Arial, Helvetica, sans-serif; font-size: 13.8px; line-height: 20.7px;">Here I enter command manually everytime</span><span style="font-size: 13.8px; line-height: 20.7px;">]</span></div>
</div>
</div>
<hr style="background: 0px center rgb(255, 255, 255); border-bottom-color: rgb(204, 204, 204); border-bottom-style: dotted; border-bottom-width: 2px; border-top-width: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 13.8px; line-height: 20.7px;" />
<div class="comment" id="comment8173614" style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 13.8px; line-height: 20.7px; margin: 0.5em 0px 0px; min-height: 40px; padding: 8px 0px 0px 40px; position: relative; word-wrap: break-word;">
<div class="author_photo" style="float: left; height: 25px; left: 8px; margin: 0px; padding: 0px; position: absolute; top: 8px; width: 25px;">
</div>
<div class="comment_meta" style="color: #888888; font-size: 0.857em; line-height: 1.3; margin-bottom: 0.8em !important; padding: 0px 115px 0px 0px;">
<b style="color: #333333; font-size: 11.8266px; line-height: 15.3746px;">anonymous</b></div>
<div class="comment_body" style="margin: 0px; padding: 0px 8px 0px 0px;">
<div class="" style="margin-bottom: 1em; padding: 0px;">
[Here I enter command manually everytime]</div>
</div>
</div>
<hr style="background: 0px center rgb(255, 255, 255); border-bottom-color: rgb(204, 204, 204); border-bottom-style: dotted; border-bottom-width: 2px; border-top-width: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 13.8px; line-height: 20.7px;" />
<div class="comment" id="comment8174843" style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 13.8px; line-height: 20.7px; margin: 0.5em 0px 0px; min-height: 40px; padding: 8px 0px 0px 40px; position: relative; word-wrap: break-word;">
<br /></div>
</div>

＆＃13;

我尝试了什么：

＆＃13;

dhr {
             background: 0px center #ffffff       /* This type of heading MUST be Green and Large! */
             border-bottom-color: #cccccc
             border-bottom-style: dotted 
             border-bottom-width: 2px
             border-top-width: 0px
             color: #333333
             font-family: Arial, Helvetica, sans-serif
             font-size: 13.8px
             line-height: 20.7px }

＆＃13;

在HTML页面中：

＆＃13;

<hr class="dhr" />

<span class="dhr">[Here I enter command manually everytime]</span>

＆＃13;

它不起作用。任何人都可以提供外部CSS代码和页面代码？如果可能，删除左侧代码和注释之间的差距。我的外部CSS文件名是 custom.css 。请帮我。提前谢谢。

Answer 1

dhr是type selector。它会选择<dhr>个元素（don't exist in HTML）。

您的元素是类 dhr的成员，因此您需要class selector：.dhr

修复后，您需要更正规则集中的规则。它们必须用分号分隔，就像在样式属性中内联编写它们时一样。（这是一个validator会发现的错误。

Answer 2

在CSS中尝试.dhr而不仅仅是dhr。

原因：.dhr代表一个班级（<element class='dhr'>），而dhr代表一个元素（<dhr>）。

所以使用这个：

.dhr {
             background: 0px center #ffffff       /* This type of heading MUST be Green and Large! */
             border-bottom-color: #cccccc
             border-bottom-style: dotted 
             border-bottom-width: 2px
             border-top-width: 0px
             color: #333333
             font-family: Arial, Helvetica, sans-serif
             font-size: 13.8px
             line-height: 20.7px }

如何将内联CSS代码转换为外部文件CSS代码？

2 个答案: