HTML -Stile - CSS
CSS steht für Cascading Style Sheets.
CSS spart viel Arbeit. Es kann das Layout mehrerer Webseiten gleichzeitig steuern.
CSS = Stile und Farben
Was ist CSS?
Cascading Style Sheets (CSS) werden verwendet, um das Layout einer Webseite zu formatieren.
Mit CSS können Sie die Farbe, die Schriftart, die Textgröße, den Abstand zwischen den Elementen, die Positionierung und das Layout der Elemente, die zu verwendenden Hintergrundbilder oder Hintergrundfarben, verschiedene Anzeigen für verschiedene Geräte und Bildschirmgrößen usw. steuern viel mehr!
Tipp: Das Wort Kaskadierung bedeutet, dass ein Stil, der auf ein übergeordnetes Element angewendet wird, auch auf alle untergeordneten Elemente innerhalb des übergeordneten Elements angewendet wird. Wenn Sie also die Farbe des Fließtextes auf „Blau“ setzen, erhalten auch alle Überschriften, Absätze und andere Textelemente innerhalb des Fließtextes dieselbe Farbe (sofern Sie nichts anderes angeben)!
Verwendung von CSS
CSS kann auf drei Arten zu HTML-Dokumenten hinzugefügt werden:
- Inline – durch Verwendung des
styleAttributs innerhalb von HTML-Elementen - Intern - durch Verwendung eines
<style>Elements im<head>Abschnitt - Extern – durch Verwendung eines
<link>Elements zum Verlinken auf eine externe CSS-Datei
Die gebräuchlichste Art, CSS hinzuzufügen, besteht darin, die Stile in externen CSS-Dateien beizubehalten. In diesem Tutorial verwenden wir jedoch Inline- und interne Stile, da dies einfacher zu demonstrieren ist und Sie es leichter selbst ausprobieren können.
Inline-CSS
Ein Inline-CSS wird verwendet, um einem einzelnen HTML-Element einen einzigartigen Stil zuzuweisen.
Ein Inline-CSS verwendet das styleAttribut eines HTML-Elements.
Das folgende Beispiel setzt die Textfarbe des <h1>Elements auf Blau und die Textfarbe des <p>Elements auf Rot:
Beispiel
<h1 style="color:blue;">A Blue Heading</h1>
<p
style="color:red;">A red paragraph.</p>
Internes CSS
Ein internes CSS wird verwendet, um einen Stil für eine einzelne HTML-Seite zu definieren.
Ein internes CSS wird im <head>Abschnitt einer HTML-Seite innerhalb eines <style>Elements definiert.
Das folgende Beispiel setzt die Textfarbe ALLER <h1>Elemente (auf dieser Seite) auf Blau und die Textfarbe ALLER <p>Elemente auf Rot. Außerdem wird die Seite mit einer "puderblauen" Hintergrundfarbe angezeigt:
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Externes CSS
Ein externes Stylesheet wird verwendet, um den Stil für viele HTML-Seiten zu definieren.
Um ein externes Stylesheet zu verwenden, fügen Sie im <head>Abschnitt jeder HTML-Seite einen Link dazu hinzu:
Beispiel
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Das externe Stylesheet kann in einem beliebigen Texteditor geschrieben werden. Die Datei darf keinen HTML-Code enthalten und muss mit der Erweiterung .css gespeichert werden.
So sieht die Datei "styles.css" aus:
"stile.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Tipp: Mit einem externen Stylesheet können Sie das Aussehen einer gesamten Website ändern, indem Sie eine Datei ändern!
CSS-Farben, Schriftarten und Größen
Hier werden wir einige häufig verwendete CSS-Eigenschaften demonstrieren. Sie werden später mehr über sie erfahren.
Die CSS color-Eigenschaft definiert die zu verwendende Textfarbe.
Die CSS- font-familyEigenschaft definiert die zu verwendende Schriftart.
Die CSS font-size-Eigenschaft definiert die zu verwendende Textgröße.
Beispiel
Verwendung von CSS-Eigenschaften für Farbe, Schriftfamilie und Schriftgröße:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS-Grenze
Die CSS border-Eigenschaft definiert einen Rahmen um ein HTML-Element.
Tipp: Sie können für fast alle HTML-Elemente einen Rahmen definieren.
Beispiel
Verwendung der CSS-Eigenschaft Border:
p {
border: 2px
solid powderblue;
}
CSS-Padding
Die CSS padding-Eigenschaft definiert eine Auffüllung (Leerzeichen) zwischen dem Text und dem Rand.
Beispiel
Verwendung von CSS-Rand- und Padding-Eigenschaften:
p {
border: 2px
solid powderblue;
padding: 30px;
}
CSS-Marge
Die CSS margin-Eigenschaft definiert einen Rand (Leerzeichen) außerhalb des Rahmens.
Beispiel
Verwendung von CSS-Rand- und Randeigenschaften:
p {
border: 2px
solid powderblue;
margin: 50px;
}
Link zu externem CSS
Auf externe Stylesheets kann mit einer vollständigen URL oder mit einem Pfad relativ zur aktuellen Webseite verwiesen werden.
Beispiel
Dieses Beispiel verwendet eine vollständige URL, um auf ein Stylesheet zu verlinken:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Beispiel
Dieses Beispiel verlinkt auf ein Stylesheet, das sich im HTML-Ordner der aktuellen Website befindet:
<link rel="stylesheet" href="/html/styles.css">
Beispiel
Dieses Beispiel verlinkt auf ein Stylesheet, das sich im selben Ordner wie die aktuelle Seite befindet:
<link rel="stylesheet" href="styles.css">
Mehr über Dateipfade erfahren Sie im Kapitel HTML -Dateipfade .
Kapitelzusammenfassung
- Verwenden Sie das HTML
style-Attribut für das Inline-Styling - Verwenden Sie das HTML
<style>-Element, um internes CSS zu definieren - Verwenden Sie das HTML
<link>-Element, um auf eine externe CSS-Datei zu verweisen - Verwenden Sie das HTML
<head>-Element, um <style>- und <link>-Elemente zu speichern - Verwenden Sie die CSS
color-Eigenschaft für Textfarben - Verwenden Sie die CSS
font-family-Eigenschaft für Textschriften - Verwenden Sie die CSS
font-size-Eigenschaft für Textgrößen - Verwenden Sie die CSS-
borderEigenschaft für Rahmen - Verwenden Sie die CSS
padding-Eigenschaft für Leerzeichen innerhalb des Rahmens - Verwenden Sie die CSS
margin-Eigenschaft für Leerzeichen außerhalb des Rahmens
Tipp: In unserem CSS-Tutorial erfahren Sie noch viel mehr über CSS .
HTML-Übungen
HTML-Stil-Tags
| Tag | Description |
|---|---|
| <style> | Defines style information for an HTML document |
| <link> | Defines a link between a document and an external resource |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz .