HTML Stile
Das HTML-Attribut style
wird verwendet, um Stile zu einem Element hinzuzufügen, z. B. Farbe, Schriftart, Größe und mehr.
Das HTML-Style-attribut
Das Festlegen des Stils eines HTML-Elements kann mit dem Attribut style
erfolgen.
Das HTML-Attribut style
hat die folgende Syntax:
<tagname
style="property:value;">
Die property ist eine CSS-Eigenschaft. Der value ist ein CSS-Wert.
Später in diesem Tutorial erfahren Sie mehr über CSS.
Hintergrundfarbe
Die CSS-Eigenschaft background-color
definiert die Hintergrundfarbe für ein HTML-Element.
Beispiel
Legen Sie die Hintergrundfarbe für eine Seite auf Puderblau fest:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Try it Yourself »
Beispiel
Legen Sie die Hintergrundfarbe für zwei verschiedene Elemente fest:
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
Try it Yourself »
Textfarbe
Die CSS-Eigenschaft color
definiert die Textfarbe für ein HTML-Element:
Beispiel
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Try it Yourself »
Schriftarten
Die CSS-Eigenschaft font-family
definiert die Schriftart, die für ein HTML-Element verwendet werden soll:
Beispiel
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Try it Yourself »
Textgröße
Die CSS-Eigenschaft font-size
definiert die Textgröße für ein HTML-Element:
Beispiel
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Try it Yourself »
Textausrichtung
Die CSS-Eigenschaft text-align
definiert die horizontale Textausrichtung für ein HTML-Element:
Beispiel
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Try it Yourself »
Kapitelzusammenfassung
- Verwenden Sie das Attribut
style
zum Gestalten von HTML-Elementen - Verwenden Sie
background-color
als Hintergrundfarbe - Verwenden Sie
color
für Textfarben - Verwenden Sie
font-family
für Textschriftarten - Verwenden Sie
font-size
für Textgrößen - Verwenden Sie
text-align
für die Textausrichtung