CSS = Styles und Farben
Styling HTML mit CSS
CSS steht für Cascading Style Sheets
Styling können HTML-Elemente auf 3 Arten hinzugefügt werden:
- Inline - ein Stil - Attribut in HTML - Elemente verwenden
- Intern - mit einem <style> Element im HTML <head> Abschnitt
- Extern - mit einem oder mehreren externen CSS - Dateien
Der häufigste Weg, Styling hinzuzufügen, ist die Stile in separaten CSS-Dateien zu halten. Aber in diesem Tutorial verwenden wir internes Styling, weil es einfacher zu demonstrieren ist, und einfacher für Sie, es selbst zu versuchen.
Sie können viel mehr über CSS in unserem lernen CSS Tutorial .
Inline - Styling (Inline CSS)
Inline - Styling wird verwendet , um einen einzigartigen Stil zu einem einzigen HTML - Elemente anwenden:
Inline - Styling verwendet das style - Attribut.
In diesem Beispiel wird die Textfarbe des <h1> Elements zu blau:
Interne Styling (Internal CSS)
Internes Styling wird verwendet, um einen Stil für eine HTML-Seite zu definieren.
Internes Styling wird im definierten <head> Abschnitt einer HTML - Seite innerhalb eines <style> Elements:
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Versuch es selber " Externe Styling (External CSS)
Ein externes Stylesheet verwendet, um den Stil für viele Seiten zu definieren.
Mit einem externen Stylesheet können Sie das Aussehen einer gesamten Website ändern , indem Sie eine Datei zu ändern!
Um ein externes Stylesheet zu verwenden, fügen Sie einen Link , um es im <head> Abschnitt der HTML - Seite:
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> Versuch es selber " Ein externes Stylesheet kann in einem beliebigen Texteditor geschrieben werden. Die Datei sollte keine HTML-Tags enthalten. Die Stylesheet - Datei muss mit einem gespeichert werden .css - Erweiterung.
Hier ist , wie die „ styles.css “ aussieht:
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}CSS Fonts
Die CSS - color Eigenschaft definiert die Textfarbe für das HTML - Element verwendet werden.
Die CSS font-family - Eigenschaft definiert die Schriftart für das HTML - Element verwendet werden.
Die CSS font-size Eigenschaft definiert die Textgröße für das HTML - Element verwendet werden.
Beispiel
<!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> Versuch es selber " Das CSS-Box-Modell
Jedes HTML-Element hat eine Box um ihn herum, auch wenn man es nicht sehen kann.
Die CSS - border Eigenschaft definiert einen sichtbaren Rahmen um ein HTML - Element:
Die CSS - padding - Eigenschaft definiert einen padding (space) innerhalb der Grenze:
Die CSS - margin Eigenschaft definiert einen Spielraum (space) außerhalb der Grenze:
Die CSS - Beispiele über die Verwendung px Größen in Pixel zu definieren.
Das id Attribut
Alle Beispiele oben Verwendung CSS in HTML-Elemente in allgemeiner Weise Stil.
Um einen besonderen Stil für ein spezielles Element zu definieren, zuerst ein ID-Attribut zu dem Elemente hinzuzufügen:
<p id="p01">I am different</p>definiert dann einen Stil für das Element mit der bestimmten id :
Die class Attribut
Um einen Stil für eine spezielle Art zu definieren ( class ) von Elementen, fügen ein class für das Element:
<p class="error">I am different</p>Jetzt können Sie einen anderen Stil für Elemente mit der spezifischen Klasse definieren:
Verwenden id eine Adresse single Element. Verwenden class zu adressieren groups von Elementen.
Kapitelzusammenfassung
- Verwenden Sie das HTML - style - Attribut für die Inline - Styling
- Verwenden Sie den HTML <style> Element definieren interne CSS
- Verwenden Sie die HTML <link> Element beziehen sich auf eine externe CSS - Datei
- Verwenden Sie die HTML <head> Element speichern <style> und <link> Elemente
- Verwenden Sie die CSS color Eigenschaft für Textfarben
- Verwenden Sie die CSS font-family - Eigenschaft für Text - Fonts
- Verwenden Sie die CSS font-size Eigenschaft für Textgrößen
- Verwenden Sie die CSS - border Eigenschaft für sichtbares Element Grenzen
- Verwenden Sie die CSS padding Eigenschaft für Raum innerhalb der Grenze
- Verwenden Sie die CSS - margin Eigenschaft für Raum außerhalb der Grenze
Testen Sie sich mit Übungen!
Aufgabe 1 » Übung 2» Exercise 3 » Exercise 4» Exercise 5 » Exercise 6»
HTML Style-Tags
| Etikett | Beschreibung |
|---|---|
| <style> | Definiert Stilinformationen für ein HTML-Dokument |
| <link> | Definiert, eine Verbindung zwischen einem Dokument und einer externen Ressource |