Einführung in CSS
Einführung in CSS
Einführung in CSS ist eine kostenlose HTML for Kids-Lektion auf CoddyKit. Dies ist Lektion 1 von 1. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML for Kids-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML for Kids-Kurs umfasst insgesamt 1 Lektionen.
Einführung 1
Hallo,
Im vorherigen Kapitel haben wir gelernt, was CSS ist und warum wir es verwenden sollten. Jetzt möchte ich anhand eines einfachen Beispiels eine kurze Einführung geben.
Definieren wir eine einfache HTML-Seite.
<html>
<body>
<h1>Hello CSS</h1>
</body>
</html>Inline-Style
Nun möchten wir die Farbe unserer Überschrift „Hello CSS“ in Rot ändern. Dazu verwenden wir das style-Attribut, das zu fast jedem HTML-Tag hinzugefügt werden kann.
Mit diesem Attribut können wir für jedes Element einen Inline-Style definieren.
In der Vorschau sehen wir, dass die Farbe der Überschrift rot wird.
color: red;
Wir haben die Schriftfarbe des Elements mit einer Style-Definition geändert.
<h1 style="color:red;">Hello CSS</h1>Inline-Style 2
Sie erinnern sich sicher, dass wir gesagt haben, dass wir Attribute verwenden, um Tags in HTML Verhaltensweisen und Eigenschaften zuzuweisen.
Eines der wichtigsten dieser Attribute ist das style-Attribut: Wir verwenden es, um einen Style für Tags zu definieren.
Inline-Style 3
Fügen wir nun einen neuen Style hinzu. Mit font-size können wir die Textgröße erhöhen.
Wenn wir mehrere Styles definieren, müssen wir sie durch Semikolons trennen.
Im folgenden Beispiel werden die Styles color und font-size durch Semikolons getrennt.
<h1 style="color:red;font-size:50px;">
Hello CoddyKit
</h1>Style-Definition
Die Syntax ist beim Hinzufügen eines Styles wichtig.
styleName: styleValue;
Denken wir noch einmal daran, dass wir den Style wie oben zuweisen müssen.
Beispiel
Erweitern wir unser Beispiel nun noch etwas.
<html>
<body>
<h1>Hello CoddyKit</h1>
<p>Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a
type specimen book.</p>
<h1>Hello CSS</h1>
</body>
</html>Beispiel 2
In diesem Beispiel möchten wir die Farbe des gesamten Textes in Rot ändern. Für jedes Tag können wir den Style wie folgt definieren.
<html>
<body>
<h1 style="color:red;">Hello Coddy</h1>
<p style="color:red;">
Lorem Ipsum is simply dummy
text of the printing and typesetting industry
Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley
of type and scrambled it to
make a type specimen book.</p>
<h1 style="color:red;">Hello CSS</h1>
</body>
</html>CSS-Selektor
Aber so sieht das nicht besonders gut aus, oder?
Da wir jetzt drei Elemente auf der Seite haben, haben wir die Textfarbe jedes einzelnen auf Rot geändert. Wenn diese Zahl jedoch auf 3000 steigt, ist es nicht sinnvoll, für jedes Element einen Style zu definieren.
Stattdessen sollten wir CSS-Selektoren verwenden, anstatt jedes Element inline zu definieren.
Einführung 12
Lernen wir nun das Konzept des Selektors kennen.
CSS-Selektoren sind dafür zuständig, das relevante im Dokument enthaltene HTML-Element auszuwählen, um HTML-Elemente zu stylen.
Wie der Name schon sagt, wählen sie also HTML-Elemente aus. 😂
CSS-Selektoren müssen zwischen <style>-Tags im HTML-Dokument oder in einer externen CSS-Datei definiert werden.
In unseren Beispielen verwenden wir, was normalerweise zwischen style-Tags steht. Genau genommen ist es jedoch besser, den Style in einer externen CSS-Datei zu definieren.
Einführung 13
Der Punktoperator und der Klassenname werden verwendet, um eine Klasse zwischen style-Tags zu definieren. Die Stildefinitionen werden zwischen den geschweiften Klammern vorgenommen.
.class-name {
font-size:22px;
color:red;
}
Im folgenden Beispiel haben wir zwischen den style-Tags eine Klasse namens my-component definiert und der entsprechenden Klasse den Stil font-size zugewiesen.
<style>
.my-component{
font-size:22px;
}
</style>
Definieren wir nun zwei Absatzelemente
Definieren wir nun zwei Absatzelemente, die die Klasse my-component haben.
Da beide Absätze nach dieser Definition denselben Klassennamen haben, werden sie vom CSS-Selektor ausgewählt und ihre Schriftgrößen auf 22px aktualisiert.
<style>
.my-component{
font-size:22px;
}
</style>
<p class="my-component">Hello CoddyKit</p>
<p class="my-component">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean maximus neque diam,
in tristique tortor volutpat a. Vivamus porttitor
id est et suscipit. Duis interdum at sem sed vestibulum.
Phasellus sit amet ullamcorper libero, a vestibulum libero.
Fusce laoreet nunc a pharetra viverra.
</p>Einführung 6
Wir können einem Selektor mehr als einen Style zuweisen.
Im folgenden Beispiel sind die Styles font-size und color im selben Selektor definiert.
<style>
.my-component{
font-size:22px;
color:red;
}
</style>Verschachtelte CSS-Selektoren
Analysieren wir den folgenden HTML-Code.
Es wurde ein Absatz-Element definiert und diesem Element wurde ein span-Element mit dem Inhalt „Hello CSS Selectors“ hinzugefügt.
In diesem Fall können wir sagen, dass das Absatz-Element das übergeordnete Element von span ist.
Andererseits ist span auch das untergeordnete Element des p-Elements.
Wie bei Lebewesen verwenden wir HTML-Elemente entsprechend ihrer Position im Codeblock in Eltern-Kind-Beziehungen.
<p>
<span>Hello CSS Selectors</span>
</p>Verschachtelter CSS-Selektor 2
Erweitern wir unser Beispiel noch etwas und analysieren wir erneut die Hierarchie zwischen den Elementen.
- Dem folgenden Beispiel zufolge
- sind das Element <span> und das Element <a> Geschwisterelemente.
- sind das Element <span> und das Element <a> Nachfahren des div-Elements.
- sind <span> und <a> Kinder des Elements <p>.
- ist das Element <p> ein Kind des Elements <div>.
<div>
<p>
<span>Hello CSS Selectors</span>
<a href="https://coddykit.com">
Go CoddyKit
</a>
</p>
</div>Analyse des Baummodells
Betrachten wir das obige Bild genauer.
Das folgende Beispiel für HTML-Code wurde in ein Baummodell umgewandelt.
Beachten Sie, dass das Baummodell tatsächlich die Hierarchie der Eltern-Kind-Beziehungen widerspiegelt.
<!DOCTYPE html>
<html>
<head>
<title>CoddyKit</title>
<meta charset="UTF-8">
</head>
<body>
<h1>This is a Heading</h1>
<p>
<a href="#">Link</a>
<br/>
<span>lorem ipsum</span>
</p>
</body>
</html>
Wann verwenden wir diese hierarchische Beziehung?
Wann verwenden wir diese hierarchische Beziehung?
Sehen wir uns zunächst ein Beispiel an und formulieren ein Problem. Anschließend sehen wir, wie wir mithilfe dieser Hierarchie Lösungen finden können.
Betrachten wir das folgende Codebeispiel.
Angenommen, wir möchten den gesamten Text rot färben. Bisher haben wir dafür zwei verschiedene Möglichkeiten kennengelernt.
- Erstens und am ungünstigsten: Wir definieren das Attribut style (style = "color: red") inline für jedes Element.
- Zweitens: Wir definieren eine Klasse namens red-txt und weisen sie jedem Element als Attribut zu (class = "red-txt").
Es gibt jedoch einen einfacheren Weg. 🥳
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p><span>
This is a span element
</span>
</p>
</div>
</div>Wann verwenden wir diese hierarchische Beziehung? 2
Sehen wir uns den obigen Code noch einmal an.
Wenn wir auf das div-Element mit der Klasse root achten, sehen wir, dass es tatsächlich der Vorfahr aller Elemente in unserem Beispiel ist.
Genetische Merkmale werden beim Menschen von Vorfahren an Nachkommen weitergegeben. Auch der einem Vorfahren in CSS zugewiesene Stil wird an die Nachkommen weitergegeben.
Wenn wir in diesem Fall eine Stildefinition erstellen, die das betreffende div-Element auswählt, können wir erwarten, dass alle seine Nachfahren von dieser Zuweisung betroffen sind.
Probieren wir es aus.
Wann verwenden wir diese hierarchische Beziehung? 3
Definieren wir mithilfe eines Punktoperators eine Klasse namens root und erstellen wir darin eine Stildefinition (mit color: red).
Dadurch werden alle Elemente ausgewählt, die die Klasse root haben, und die Textfarben des Elements selbst sowie seiner Nachfahren werden auf Rot gesetzt.
Im Vorschaubereich werden wir sehen, dass alle Texte rot werden.
<style>
.root{
color:red;
}
</style>
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p>
<span>
This is a span element
</span>
</p>
</div>
</div>Vererbung
Dieses Konzept können wir in CSS als Vererbung bezeichnen. Mithilfe dieser Funktion haben wir gelernt, unseren Code kürzer zu schreiben.
Wie im vorherigen Beispiel haben wir diese Eigenschaft nicht für jedes Element einzeln definiert, sondern dem Vorfahrenelement zugewiesen und dadurch Codewiederholungen vermieden.
Platzierung des Head-Elements
In den vorherigen Beispielen haben wir das style-Element direkt neben dem von uns geschriebenen HTML-Element eingefügt.
Der richtige Bereich, in dem das style-Tag eingefügt werden sollte, befindet sich jedoch zwischen den head-Tags.
Die Verwendung sieht daher wie folgt korrekt aus.
<!DOCTYPE html>
<html>
<head>
<style>
.hello{
font-size:30px;
}
</style>
</head>
<body>
<h1 class="hello">This is a Heading</h1>
</body>
</html>Unsere Codes so kurz und wiederverwendbar wie möglich schreiben
Beim Programmieren müssen wir unseren Code so kurz wie möglich und wiederverwendbar schreiben.
Glückwunsch
Glückwunsch 🎉
In diesem Abschnitt haben wir gemeinsam die Konzepte Selektor und Vererbung gelernt.
Im nächsten Abschnitt lernen wir die Arten von Stildefinitionen in CSS kennen.
Häufig gestellte Fragen
Ist die Lektion „Einführung in CSS“ kostenlos?
Ja — der vollständige Text von „Einführung in CSS“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML for Kids-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML for Kids-Kurs umfasst insgesamt 1 Lektionen.
Was lerne ich in „Einführung in CSS“?
Einführung in CSS Du übst HTML for Kids mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML for Kids zu starten?
Keine Vorkenntnisse erforderlich. HTML for Kids auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 1.
Wie lange dauert die Lektion „Einführung in CSS“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML for Kids-Lektion Code schreiben und ausführen?
Ja. Jede HTML for Kids-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.