HTML-Stile - CSS
Erfahren Sie, wie Sie CSS auf drei Arten zu HTML-Elementen hinzufügen, sie mit CSS-Eigenschaften gestalten und verschiedene Beispiele erkunden.
CSS wird verwendet, um HTML zu gestalten. Es bestimmt, wie HTML-Elemente auf dem Bildschirm, auf Papier oder in anderen Medien dargestellt werden.
CSS spart sehr viel Arbeit. Es kann das Layout mehrerer Seiten gleichzeitig steuern.
Es gibt 3 Möglichkeiten, CSS zu HTML-Elementen hinzuzufügen:
- Inline — das
style-Attribut wird direkt einem HTML-Element hinzugefügt. - Intern — ein
<style>-Element wird im<head>-Abschnitt der Seite platziert. - Extern — eine separate
.css-Datei wird mit der Seite verknüpft.
Warum drei Methoden? Jede bietet einen anderen Kompromiss zwischen Komfort und Reichweite. Inline-Stile sind schnell, gelten aber nur für ein einzelnes Element. Interne Stile decken eine einzelne Seite ab. Externe Stylesheets sind der empfohlene Ansatz für echte Projekte, da eine einzige Datei eine gesamte Website gestalten kann und vom Browser zwischengespeichert wird.
Kaskaden-Priorität
Wenn mehr als eine Regel auf dasselbe Element abzielt, löst CSS den Konflikt durch Spezifität und Quellenreihenfolge auf. Als Faustregel gilt: Je näher ein Stil am Element deklariert wird, desto höher ist seine Priorität:
Inline-style > internes <style> > externes Stylesheet
Wenn also ein externes Stylesheet besagt, dass ein Absatz blau ist, und ein Inline-style besagt, dass er rot ist, erscheint der Absatz rot. (Das Flag !important kann diese Reihenfolge überschreiben, sollte jedoch sparsam verwendet werden.) Erfahren Sie mehr in der CSS-Einführung.
Schauen wir uns jede Methode im Detail an.
Inline-CSS
Ein Inline-CSS wendet einen bestimmten Stil auf ein einzelnes HTML-Element an. Dabei wird das style-Attribut des HTML-Elements verwendet.
Im folgenden Beispiel ist die Textfarbe des <p>-Elements rot:
Beispiel für Inline-CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Usage of the inline CSS</h1>
<p style="color:red;">The paragraph is red.</p>
</body>
</html>Internes CSS
Ein internes CSS legt einen Stil für eine einzelne HTML-Seite fest. Es wird im <head>-Element einer HTML-Seite innerhalb eines <style>-Tags definiert:
Beispiel für internes CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: yellow;
}
h1 {
font-size: 30px;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Externes CSS
Ein externes Stylesheet legt den Stil für mehrere HTML-Seiten fest. Es kann das Erscheinungsbild einer gesamten Website verändern, indem nur eine einzige Datei geändert wird.
Um ein externes Stylesheet zu verwenden, fügen Sie im <head>-Element der HTML-Seite einen <link> darauf hinzu. Das href-Attribut verweist auf den Pfad der .css-Datei:
Beispiel für ein externes CSS-Stylesheet:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Die verknüpfte styles.css-Datei enthält die Regeln. Sie darf keinen HTML-Code enthalten und muss mit der Erweiterung .css gespeichert werden. Für die obige Seite könnte styles.css so aussehen:
body {
background-color: yellow;
}
h1 {
font-size: 30px;
}
p {
font-size: 18px;
}CSS-Schriftarten und -Farben
Die CSS-Eigenschaft font-family definiert die Schriftart des Textinhalts.
Die CSS-Eigenschaft font-size definiert die Textgröße.
Die CSS-Eigenschaft color legt die Farbe des Textes selbst fest. (Beachten Sie, dass color keine Schrifteigenschaft ist — sie steuert die Vordergrundtextfarbe.)
Die CSS-Eigenschaft background-color legt die Farbe hinter dem Element fest.
Beispiel für CSS-Schriftarten und -Farben:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: #008000;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 200%;
}
p {
color: #666666;
font-family: 'New Roman', serif;
font-size: 150%;
}
</style>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>CSS-Rahmen
Die CSS-Eigenschaft border setzt Werte für alle vier Seiten eines Elements.
Beispiel für die CSS-Eigenschaft border:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px dotted red;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>CSS-Innenabstand
Die CSS-Eigenschaft padding legt den Innenabstand (Leerraum) zwischen dem Text und dem Rahmen fest.
Beispiel für die CSS-Eigenschaft padding:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px dashed #008022;
padding: 50px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>CSS-Außenabstand
Die CSS-Eigenschaft margin erzeugt Leerraum um das Element herum.
Beispiel für die CSS-Eigenschaft margin:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px dashed #090fce;
margin: 50px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Das id-Attribut
Das id-Attribut zielt auf ein einzelnes, eindeutiges Element ab. Ein id-Wert muss innerhalb der Seite eindeutig sein — keine zwei Elemente dürfen dieselbe id teilen. In CSS wählen Sie es mit einem Rautezeichen aus, zum Beispiel #large-text.
Beispiel für das id-Attribut:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#large-text {
border: 8px groove powderblue;
font-size: 24px;
padding: 20px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p id="large-text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Das class-Attribut
Das class-Attribut ist wiederverwendbar: Dieselbe Klasse kann auf eine beliebige Anzahl von Elementen angewendet werden, und ein einzelnes Element kann mehrere Klassen tragen. Das macht Klassen zum richtigen Werkzeug, um eine Gruppe von Elementen auf die gleiche Weise zu gestalten. In CSS wählen Sie eine Klasse mit einem Punkt aus, zum Beispiel .text.
Beispiel für das class-Attribut:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
border: 8px inset powderblue;
font-size: 20px;
padding: 10px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p class="text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p class="text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>