如何將內聯CSS代碼轉換爲外部文件CSS代碼？

Question

我有一個wordpress網站。寫完每篇文章後，我會在發佈文章時手動插入一些評論，並且需要像下面的圖片一樣。我有內聯CSS，但如何將其轉換爲外部CSS代碼並在網頁中指定它？

我需要刪除左側的空間，也需要更接近的意見來節省空間。

我的內聯CSS代碼： -

<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>

我試了一下：

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 }

在HTML頁面中：

<hr class="dhr" /> 
 

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

這是行不通的。任何人都可以提供外部CSS代碼和頁面代碼嗎？如果可能，請刪除左側代碼和評論之間的差距。我的外部CSS文件名是custom.css。請幫幫我。提前致謝。

Answer 1

dhr是type selector。它選擇<dhr>元素（其中don't exist in HTML）。

你的元素是類dhr的成員，所以你需要一個class selector：.dhr

---

之後你解決這個問題，需要糾正你的規則集的規則。它們必須用分號分隔，就像你將它們內聯編寫在style屬性中一樣。 （這是validator可能會出現的錯誤）。

Answer 2

嘗試.dhr而不是隻在你的CSS中的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 }