HTML Stil - CSS

CSS (Cascading Style Sheets) wird verwendet, um HTML-Element-Tags zu gestalten.

Ausprobieren - Beispiel

Dieses Beispiel zeigt, wie HTML mithilfe der im <head>-Abschnitt hinzugefügten Stilinformationen formatiert wird.

Dieses Beispiel zeigt, wie man einen Link ohne Unterstreichung mithilfe des style-Attributs erstellt.
Wie man das style-Attribut verwendet, um einen Link ohne Unterstreichung zu erstellen.

Dieses Beispiel zeigt, wieLink zu einem externen Stylesheet

Wie man CSS verwendet

CSS wurde in HTML 4 eingeführt, um HTML-Elemente besser darzustellen.

CSS kann auf folgende Weise zu HTML hinzugefügt werden:

• Inline-Styles - Verwendung von "style" in HTML-ElementenAttribute
• Internes Stylesheet - Verwendung von <style> im <head>-Abschnitt des HTML-DokumentsElementeUm CSS einzubinden
• Externe Referenz - Verwenden einer externen CSS-DateiDatei

Der beste Weg ist, eine externe Referenz auf eine externe CSS-Datei zu verwenden.

In unseren HTML-Tutorials auf dieser Website verwenden wir Inline-CSS-Stile, um Beispiele vorzustellen; dies ist ein vereinfachtes Beispiel, das es einfacher macht, die Beispiele online zu bearbeiten und auszuführen.

Mehr über CSS erfahren Sie durch Folgendes:CSS-TutorialErfahren Sie mehr über CSS.

Inline-Stile

Wenn spezielle Stile auf einzelne Elemente angewendet werden müssen, können Sie Inline-Stile verwenden. Verwenden Sie Inline-Stile, indem Sie das style-Attribut in den entsprechenden Tags verwenden. Das style-Attribut kann jede CSS-Eigenschaft enthalten. Das folgende Beispiel zeigt, wie Sie die Farbe und den linken Rand eines Absatzes ändern.

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

Um mehr über Stile zu erfahren, besuchen Sie bitte das CSS-Tutorial.

HTML-Stilbeispiel - Hintergrundfarbe

Die Eigenschaft für die Hintergrundfarbe (background-color) definiert die Hintergrundfarbe eines Elements:

Die Eigenschaft für die Hintergrundfarbe (background-color) wurde im alten HTML mit dem bgcolor-Attribut definiert.

Ausprobieren: Altes HTML zum Festlegen des Hintergrunds

HTML-Stilbeispiel - Schriftart, Schriftfarbe, Schriftgröße

Wir können die Eigenschaften font-family (Schriftart), color (Farbe) und font-size (Schriftgröße) verwenden, um den Stil des Textes festzulegen:

Heutzutage verwenden wir normalerweise die Eigenschaften font-family (Schriftart), color (Farbe) und font-size (Schriftgröße), um den Textstil festzulegen, anstatt das Tag <font> zu verwenden.

HTML-Stilbeispiel - Textausrichtung

Verwenden Sie die Eigenschaft text-align (Textausrichtung), um die horizontale und vertikale Ausrichtung des Textes anzugeben:

Die Eigenschaft text-align ersetzte das alte Tag <center>.

Ausprobieren

Internes Stylesheet

Wenn eine einzelne Datei spezielle Styles benötigt, kann ein internes Stylesheet verwendet werden. Sie können ein internes Stylesheet im <head>-Abschnitt definieren, indem Sie das <style>-Tag verwenden:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

Externes Stylesheet

Wenn Styles auf viele Seiten angewendet werden müssen, sind externe Stylesheets die ideale Wahl. Mit externen Stylesheets können Sie das Erscheinungsbild der gesamten Website ändern, indem Sie eine Datei ändern.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css.html">
</head>

HTML-Style-Tag

Veraltete Tags und Attribute

In HTML 4 wurden die Tags und Attribute, die zum Definieren des Stils von HTML-Elementen verwendet wurden, als veraltet eingestuft. Diese Tags werden in neuen HTML-Versionen nicht mehr unterstützt.

Nicht empfohlene Tags: <font>, <center>, <strike>

Nicht empfohlene Attribute: color und bgcolor.