11.1 Kaskadieren (Cascading)
Die Grundprinzipien von CSS umfassen Kaskadieren, Vererbung und Spezifität. Das Verständnis dieser Prinzipien hilft, das Styling und das Erscheinungsbild von Webseiten besser zu kontrollieren.
Kaskadieren (Cascading)
Kaskadieren ist das grundlegende Prinzip von CSS, das bestimmt, wie Stile angewendet werden, wenn mehrere Regeln im Konflikt stehen. Beim Kaskadieren verwendet der Browser die folgenden Regeln, um Konflikte zu lösen:
- Quellenreihenfolge: Stile können an verschiedenen Stellen definiert werden – externe Stylesheets (CSS-Dateien), interne Stylesheets (innerhalb des
<style>-Tags) und eingebettete Stile (imstyle-Attribut des HTML-Elements). Die Regeln werden in der Reihenfolge ihrer Definition angewendet. - Spezifität: Jeder Selektor hat sein eigenes Spezifitätsniveau. Je höher die Spezifität eines Selektors, desto höher seine Priorität.
- Wichtigkeit (Importance): Regeln mit der Direktive
!importanthaben die höchste Priorität und werden auch bei Vorhandensein anderer Konfliktregeln angewendet.
Beispiel für Kaskadierung:
In diesem Beispiel wird die Hintergrundfarbe gelb sein, da der eingebettete Stil Vorrang vor dem internen Stil hat. Die Textfarbe wird rot sein, da der eingebettete Stil Vorrang vor dem internen hat.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beispiel für CSS-Kaskadierung</title>
<style>
body {
background-color: lightblue; /* Interner Stil */
}
p {
color: green;
}
</style>
</head>
<body style="background-color: yellow;"> <!-- Eingebetteter Stil -->
<p style="color: red;">Beispiel für CSS-Kaskadierung</p>
</body>
</html>
11.2 Vererbung (Inheritance)
Vererbung ist der Prozess, bei dem Kind-Elemente die Stile ihrer Eltern-Elemente übernehmen. Nicht alle CSS-Eigenschaften werden vererbt. Vererbbare Eigenschaften sind z.B. Textfarbe, Schriftfamilie, Zeilenhöhe und einige andere.
Beispiel für Vererbung:
In diesem Beispiel übernimmt das <p>-Element die Schriftart und die Farbe vom <body>-Element, und die Schriftgröße von der Klasse .container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beispiel für CSS-Vererbung</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<p>Dieser Text erbt die Schriftart und Farbe von body, und die Schriftgröße von ".container".</p>
</div>
</body>
</html>
11.3 Spezifität (Specificity)
Spezifität definiert, welche CSS-Regel auf ein Element angewendet wird, wenn mehrere Regeln auf dasselbe Element zutreffen. Die Spezifität wird basierend auf der Anzahl und dem Typ der Selektoren in der Regel berechnet.
Regeln zur Berechnung der Spezifität:
- Eingebettete Stile (inline styles) haben die höchste Spezifität
- IDs (selectors by ID) haben eine höhere Spezifität als Klassen, Pseudoklassen und Attribute
- Klassen, Pseudoklassen und Attribute haben eine höhere Spezifität als Elemente und Pseudoelemente
- Elemente und Pseudoelemente haben die geringste Spezifität
Beispiel zur Berechnung der Spezifität:
In diesem Beispiel wird der Text rot, da der #unique-Selektor die höchste Spezifität hat.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beispiel für CSS-Spezifität</title>
<style>
p {
color: blue; /* Spezifität 0-0-0-1 */
}
.highlight {
color: green; /* Spezifität 0-0-1-0 */
}
#unique {
color: red; /* Spezifität 0-1-0-0 */
}
</style>
</head>
<body>
<p class="highlight" id="unique">Dieser Text wird rot.</p>
</body>
</html>
11.4 Wichtigkeit (Importance)
CSS ermöglicht es Entwicklern, die Priorität von Stilen explizit mit der Direkte !important anzugeben. Regeln mit dieser Direktive werden unabhängig von der Spezifität anderer Regeln angewendet.
Beispiel für die Verwendung von !important:
In diesem Beispiel wird der Text blau, weil die Regel mit !important die höchste Priorität hat.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beispiel für !important in CSS</title>
<style>
p {
color: blue !important;
}
.highlight {
color: green;
}
</style>
</head>
<body>
<p class="highlight">Dieser Text wird aufgrund von "!important" blau sein.</p>
</body>
</html>
11.5 Beispiele zur Anwendung von CSS-Prinzipien
Beispiele zur Anwendung von CSS-Prinzipien in realen Aufgaben.
Beispiel für Kaskadierung und Spezifität:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beispiel für CSS-Kaskadierung und Spezifität</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
}
.important {
color: red;
}
</style>
</head>
<body>
<p class="important">Dieser Text wird rot, weil .important eine höhere Spezifität als "p" hat.</p>
</body>
</html>
Beispiel für Vererbung und Spezifität:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beispiel für CSS-Vererbung und Spezifität</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
color: green; /* Überschreibt die Farbe von body für alle Kindelemente */
}
.highlight {
color: red; /* Hat eine höhere Spezifität als .container */
}
</style>
</head>
<body>
<div class="container">
<p class="highlight">Dieser Text wird rot, aufgrund der Spezifität der Klasse ".highlight".</p>
</div>
</body>
</html>
GO TO FULL VERSION