Sind Überschriftenelemente Block- oder Inline-Elemente?

Ist es richtig, die Textfarbe innerhalb eines H1-, H2-, H3-, H4-, H5- oder H6-Elements zu ändern? Handelt es sich um Elemente auf Blockebene?

Zum Beispiel:

<h1><span style="color:#ABAB">#500</span> Hello world</h1>

Es handelt sich um Blockelemente.

Wenn Sie sich das strenge HTML 4.01 ansehen DTD:

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">

<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

Sie sind also alle definiert als %heading Entitäten, die wiederum Teil der sind %block Entitäten.

Was die Frage betrifft, ob Sie die Farbe ändern können – das ist nur Stil und in Ordnung, obwohl ich das in einer CSS-Datei und nicht inline tun würde:

H1, H2, H3, H4, H5, H6 {
   color: #ccccc;
}

Ja, das ist der richtige Weg, wenn Sie Inline-CSS verwenden möchten. Andernfalls verwenden Sie a class Attribut sagen:

<h1 class="title"><span>#500</span> Hello world</h1>

Jetzt ist das CSS:

h1.title span {
   color: #ababab;
}

Noch einmal: Ja <h1> Zu <h6> sind Elemente auf Blockebene.

Der einfachste Weg, herauszufinden, ob es sich bei einem Element um ein Block- oder Inline-Element handelt, besteht darin, einen Rahmen darum zu legen.

HTML

<h1>Heading 1</h1>
<span>Span</span>

CSS

h1 {
   border: 2px solid green;
}

span {
   border: 2px solid blue;
}

Weitere Beispiele auf JSFiddle.

Ja, alle Header sind Elemente auf Blockebene.

Noch eine Anmerkung: #ABAB ist keine gültige Farbe.

Ja ein span innerhalb eines h1-Tags ist zulässig. Wie Sie auf dem sehen können W3C-Referenzseite für das h1-Tag:

Zulässige Inhalte: Phrasierungsinhalte

Und Formulierungsinhalte sind sowohl normaler Text als auch Ihr Text span Element (und mehrere andere Elemente, wie hier zu sehen ist). Referenzseite zur Formulierung von Inhalten.

Ach ja, und die Überschriften-Tags sind Blockelemente.

Die beste Vorgehensweise besteht darin, zunächst einen CSS-Stil in einer Stylesheet-Datei zu erstellen.

h1 {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 18px;
   font-weight: bold;
   color: #000000;
}

Farbe verändert die Schriftfarbe, nicht die Hintergrundfarbe, ist also technisch gesehen genauso korrekt. Dies bedeutet jedoch, dass Sie für jeden gewünschten Header mit diesem Stil ein Span-Tag angeben müssen, wie Sie es getan haben.

Eine bessere Lösung, wenn Sie möchten, dass es für h1-Tags immer wirksam ist, könnte darin bestehen, ein Stylesheet mit dem folgenden Code einzuschließen:

h1 {
  color: #ABABAB
}