Wie kann ich Inline-CSS-Code in externen Datei-CSS-Code konvertieren?

Question

Ich habe eine Wordpress-Website. Nachdem ich jeden Beitrag geschrieben habe, füge ich einige Kommentare manuell ein, während ich den Artikel posten kann und er muss wie das folgende Bild aussehen. Ich habe das Inline-CSS dafür, aber wie man es in externen CSS-Code umwandelt und in der Webseite spezifiziert?

Ich muss den Platz auf der linken Seite entfernen und brauche auch die Kommentare näher zu sein, um Platz zu sparen.

My Inline CSS-Code: -

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

Was ich versucht:

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 }

in der HTML-Seite:

<hr class="dhr" /> 
 

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

Es funktioniert nicht. Kann mir bitte jemand den externen CSS Code und den Page Code geben? Wenn möglich, entfernen Sie den linken Code und die Lücke zwischen den Kommentaren. Mein externer CSS-Dateiname lautet custom.css. Bitte hilf mir. Danke im Voraus.

Answer 1

dhr ist ein type selector. Es wählt <dhr> Elemente (die don't exist in HTML).

Ihr Element ist ein Mitglied der Klasse dhr so benötigen Sie eine class selector: .dhr

---

Nachdem Sie beheben zu erreichen, müssen Sie die Regeln in Ihrem ruleset korrigieren. Sie müssen durch Semikolon getrennt werden, genau wie Sie es getan haben, als Sie sie in einem Stilattribut inline geschrieben haben. (Dies ist ein Fehler, den ein validator aufgenommen hätte).

Answer 2

Versuchen Sie .dhr anstatt nur dhr in Ihrem CSS.

Grund: .dhr repräsentiert eine Klasse (<element class='dhr'>), während nur dhr ein Element darstellt (<dhr>).

So verwenden:

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