Wie können wir Styles definieren?
Wie können wir Styles definieren?
Wie können wir Styles definieren? 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
Hallo,
Wir haben das bereits teilweise in der vorherigen Lektion erklärt. Wiederholen wir es nun.
In CSS können Styles auf drei Arten definiert werden:
- Inline-Style
- Zwischen den <style>-Tags
- Durch Verwendung einer externen CSS-Datei
Inline-Style
1. Inline-Style
Wie der Name schon sagt, handelt es sich um Styles, die wir definieren, indem wir jedem Element das style-Attribut inline übergeben.
Diese Verwendung wird nicht bevorzugt, da sie die Wiederverwendbarkeit jedes Styles verringert und seine Lesbarkeit sehr gering ist.
Im folgenden Beispiel erzeugt der Style letter-spacing einen Abstand von 15px zwischen den einzelnen Buchstaben des Textes.
<p style="letter-spacing:15px">
Inline Style
</p>Mit dem style-Tag
2. Zwischen den <style>-Tags
Der Style kann zwischen style-Tags definiert werden. Auch diese Definition wird außer in einigen Ausnahmefällen nicht bevorzugt, etwa beim sichtbaren Bereich oberhalb des Seitenumbruchs.
Wir werden weiterhin style-Tags verwenden, um unsere Beispiele übersichtlich zu halten. Ich empfehle jedoch nicht, sie in Ihren Anwendungen zu verwenden, außer in den genannten Ausnahmefällen.
<html>
<head>
<style>
.root {
color:red;
}
</style>
</head>
<body class>
<div class="root">Test</div>
</body>
</html>Externe CSS-Datei
3. Externe CSS-Datei
Lernen wir nun, wie externe CSS-Dateien verwendet werden.
Diese Form der Style-Definition werden wir am häufigsten verwenden. Zunächst wird eine Datei erstellt, die ausschließlich CSS-Selektoren enthält.
Anschließend kann die entsprechende CSS-Datei für das link-Element zwischen den head-Tags definiert werden.
Im folgenden Beispiel wird die Datei styles.css über das href-Attribut dem link-Element zugewiesen.
<link rel = "stylesheet" href = "styles.css">
Diese Funktion ist die beste Lösung, damit dieselbe CSS-Datei von mehreren Dateien eingebunden werden kann und die Wiederverwendbarkeit erhöht wird.
Im folgenden Beispiel wurde eine Style-Definition erstellt, die die externe Klasse auswählt.
.external{
color:red;
font-size:30px;
letter-spacing:10px;
}
Im folgenden Beispiel wurde eine Style-Definition erstellt, die die externe Klasse auswählt.
Speichern wir diese Anweisung in der Datei test 1.css und weisen wir sie dem link-Element zu.
<html>
<head>
<link rel="stylesheet"
href="https://coddy.s3.amazonaws.com/css/test_1.css">
</head>
<body>
<div class="external">Hello</div>
</body>
</html>Glückwunsch
Glückwunsch 🎉
In diesem Abschnitt haben wir die Arten von Stildefinitionen in CSS kennengelernt.
Im nächsten Abschnitt lernen wir den ID-Selektor kennen.
Häufig gestellte Fragen
Ist die Lektion „Wie können wir Styles definieren?“ kostenlos?
Ja — der vollständige Text von „Wie können wir Styles definieren?“ 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 „Wie können wir Styles definieren?“?
Wie können wir Styles definieren? 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 „Wie können wir Styles definieren?“?
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.