In diesem Kapitel lernst du, wie du CSS-Stile auf unterschiedliche Arten einbindest und wie die Vererbung und Verschachtelung von CSS-Regeln funktioniert.
1. Arten der CSS-Integration
a) Inline-Stile
Inline-Stile werden direkt im HTML-Tag definiert und sind nur fĂŒr das jeweilige Element gĂŒltig.
Beispiel:
<p style="color: red; font-size: 20px;">Dieser Text ist rot und gröĂer.</p>Vorteil: Schnell und einfach fĂŒr einzelne Elemente. Nachteil: UnĂŒbersichtlich bei gröĂeren Projekten.
b) CSS im Kopf der Seite
Hier wird ein <style>-Block im <head> der HTML-Datei verwendet.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>Dieser Text ist blau.</p>
</body>
</html>Vorteil: Zentralisierte Stile fĂŒr die gesamte Seite. Nachteil: Nicht ĂŒber mehrere Dateien hinweg nutzbar.
c) Externe CSS-Dateien
CSS wird in einer separaten Datei ausgelagert und mit <link> eingebunden.
HTML-Datei:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Dieser Text wird von einer externen CSS-Datei gestylt.</p>
</body>
</html>Externe CSS-Datei (styles.css):
p {
color: green;
font-size: 16px;
}Vorteil: Saubere Trennung von Inhalt und Design. Kann von mehreren Seiten verwendet werden. Nachteil: ZusÀtzliche Datei erforderlich.
2. CSS-Vererbung und Verschachtelung
Vererbung
Viele CSS-Eigenschaften wie Schriftart oder Farbe werden von einem ĂŒbergeordneten Element an seine Kinder vererbt.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: purple;
}
h1 {
font-size: 24px;
}
</style>
</head>
<body>
<h1>Ăberschrift</h1>
<p>Dieser Text ist lila, da er die Farbe vom `body` erbt.</p>
</body>
</html>Verschachtelung
CSS-Regeln können verschachtelt und kombiniert werden, um spezifischere Stile zu definieren.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
text-decoration: none;
color: navy;
}
nav ul li a:hover {
color: orange;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Ăber uns</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</body>
</html>Hierbei wird jede Ebene der HTML-Struktur gezielt angesprochen.
Mit diesen Techniken kannst du deine Webseite flexibel gestalten und die Wiederverwendbarkeit erhöhen. Experimentiere mit verschiedenen AnsĂ€tzen, um die beste Lösung fĂŒr dein Projekt zu finden!