Michael Czechowski
991965b78e
- Add German HTML entry point (index.de.html) - Add German app.js with translated UI strings (app.de.js) - Add German lesson config (lessons.de.js) - Add German translations of all 6 lesson modules: - HTML Elements: Block vs Inline - HTML Forms: Basic Inputs - HTML Forms: Validation - CSS: Basic Selectors - CSS: Advanced Selectors - Tailwind: Basics All IDs, variable names, and code examples remain in English. Only user-facing text has been translated to German. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
551 lines
30 KiB
JSON
551 lines
30 KiB
JSON
{
|
||
"$schema": "../../schemas/code-crispies-module-schema.json",
|
||
"id": "css-basic-selectors",
|
||
"title": "CSS: Grundlegende Selektoren",
|
||
"description": "CSS-Selektoren sind die Grundlage für das Stylen von Webseiten und ermöglichen es dir, bestimmte HTML-Elemente für die Gestaltung auszuwählen. Dieses Modul stellt grundlegende Selektortypen vor, einschließlich Element-Typ-Selektoren, Klassen-Selektoren, ID-Selektoren und des universellen Selektors.",
|
||
"difficulty": "beginner",
|
||
"lessons": [
|
||
{
|
||
"id": "introduction-to-selectors",
|
||
"title": "Was ist ein CSS-Selektor?",
|
||
"description": "Ein CSS-Selektor ist der erste Teil einer CSS-Regel, der dem Browser mitteilt, welche HTML-Elemente die im Deklarationsblock definierten Stile erhalten sollen. Selektoren sind im Wesentlichen Muster, die mit Elementen in deinem HTML-Dokument übereinstimmen. Das Verstehen von Selektoren ist grundlegend, da sie bestimmen, welche Elemente von deinen CSS-Regeln betroffen sind. Das Element oder die Elemente, die von einem Selektor anvisiert werden, werden als 'Subjekt des Selektors' bezeichnet. Beim Schreiben einer CSS-Regel gibst du zuerst den Selektor an, gefolgt von geschweiften Klammern, die die Stil-Deklarationen enthalten.<br/>Um beispielsweise die Textfarbe von Elementen zu ändern, kannst du die <kbd>color</kbd>-Eigenschaft in deinem Deklarationsblock verwenden.<br><br><pre>/* Element-Selektor */\np {\n color: orangered;\n /* │ └─── Gibt den Wert des Ausdrucks an\n │ \n └─────────── Gibt die Eigenschaft des Ausdrucks an */\n}</pre>",
|
||
"task": "Schreibe eine CSS-Regel mit einem Typ-Selektor, die alle Absatz-Elemente <kbd>p</kbd> im Dokument anvisiert. Mache den Text blau, indem du die <kbd>color</kbd>-Eigenschaft auf <kbd>blue</kbd> setzt.",
|
||
"previewHTML": "<h1>Einführung in CSS-Selektoren</h1>\n<p>Dieser Absatz sollte blau werden.</p>\n<div>Dieses div-Element sollte unverändert bleiben.</div>\n<p>Dieser zweite Absatz sollte ebenfalls blau werden.</p>",
|
||
"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
|
||
"sandboxCSS": "h1, p, div { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
|
||
"codePrefix": "/* Schreibe einen Typ-Selektor, um alle Absatz-Elemente anzuvisieren */\n",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"previewContainer": "preview-area",
|
||
"solution": "p { color: blue }",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "^p\\s*{",
|
||
"message": "Beginne deine Regel mit <kbd>p { … }</kbd>, um alle Absatz-Elemente auszuwählen",
|
||
"options": {
|
||
"caseSensitive": false
|
||
}
|
||
},
|
||
{
|
||
"type": "contains",
|
||
"value": "color:",
|
||
"message": "Füge die <kbd>color:</kbd>-Eigenschaft in deine CSS-Regel ein"
|
||
},
|
||
{
|
||
"type": "contains",
|
||
"value": "blue",
|
||
"message": "Setze den Farbwert auf <kbd>blue</kbd>"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "color",
|
||
"expected": "blue"
|
||
},
|
||
"message": "Verwende <kbd>color: blue</kbd>, um die Textfarbe zu setzen"
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "p\\s*{[^}]*}",
|
||
"message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer <kbd>}</kbd> zu beenden",
|
||
"options": {
|
||
"caseSensitive": false
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "type-selectors",
|
||
"title": "Typ-Selektoren: HTML-Elemente anvisieren",
|
||
"description": "Typ-Selektoren (auch Tag-Name-Selektoren oder Element-Selektoren genannt) visieren HTML-Elemente basierend auf ihrem Tag-Namen an. Zum Beispiel wählt <kbd>p</kbd> alle Absatz-Elemente, <kbd>h1</kbd> alle Überschriften der ersten Ebene und <kbd>div</kbd> alle Division-Elemente aus. Typ-Selektoren sind die grundlegendste Art, Elemente auszuwählen, und wenden Stile einheitlich auf alle Instanzen eines bestimmten HTML-Elements in deinem Dokument an. Du kannst verschiedene CSS-Eigenschaften mit Typ-Selektoren definieren, wie <kbd>color</kbd> für Textfarbe, <kbd>background-color</kbd> für den Hintergrund und <kbd>font-weight</kbd> für Textbetonung. Sie bieten einen breiten Ansatz für das Styling deiner Seite und sind oft der Ausgangspunkt für spezifischeres Styling mit anderen Selektortypen.",
|
||
"task": "Schreibe drei separate CSS-Regeln mit Typ-Selektoren, um bestimmte HTML-Elemente anzuvisieren: mache <kbd>h2</kbd>-Überschriften <kbd>purple</kbd>, gib <kbd>span</kbd>-Elementen einen <kbd>yellow</kbd>-Hintergrund und mache <kbd>strong</kbd>-Elemente <kbd>red</kbd>.",
|
||
"previewHTML": "<h2>Typ-Selektoren Beispiel</h2>\n<p>Normaler Absatztext <span>mit einem hervorgehobenen Span</span>, der einen gelben Hintergrund haben sollte.</p>\n<p>Ein weiterer Absatz mit <strong>wichtigem, fetten Text</strong>, der rot sein sollte.</p>\n<h2>Eine weitere Überschrift</h2>",
|
||
"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
|
||
"sandboxCSS": "h2, p, span, strong { padding: 3px; }",
|
||
"codePrefix": "/* Schreibe drei separate Typ-Selektoren unten */\n\n",
|
||
"initialCode": "/* 1. Mache h2-Überschriften lila */\n\n\n/* 2. Gib span-Elementen einen gelben Hintergrund */\n\n\n/* 3. Mache strong-Elemente rot */\n",
|
||
"codeSuffix": "",
|
||
"previewContainer": "preview-area",
|
||
"solution": "/* 1. Mache h2-Überschriften lila */\nh2 {\n color: purple;\n}\n\n/* 2. Gib span-Elementen einen gelben Hintergrund */\nspan {\n background-color: yellow;\n}\n\n/* 3. Mache strong-Elemente rot */\nstrong {\n color: red;\n}",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "^h2\\s*{",
|
||
"message": "Füge einen <kbd>h2 { … }</kbd>-Selektor hinzu"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "color",
|
||
"expected": "purple"
|
||
},
|
||
"message": "Setze die <kbd>color</kbd>-Eigenschaft auf <kbd>purple</kbd> für h2-Elemente"
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "h2\\s*{[^}]*}",
|
||
"message": "Vergiss nicht, deine h2-Regel mit einer schließenden Klammer <kbd>}</kbd> zu beenden"
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "^span\\s*{",
|
||
"message": "Füge einen <kbd>span { … }</kbd>-Selektor hinzu"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "background-color",
|
||
"expected": "yellow"
|
||
},
|
||
"message": "Setze <kbd>background-color: yellow</kbd> für span-Elemente"
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "span\\s*{[^}]*}",
|
||
"message": "Vergiss nicht, deine span-Regel mit einer schließenden Klammer <kbd>}</kbd> zu beenden"
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "^strong\\s*{",
|
||
"message": "Füge einen <kbd>strong { … }</kbd>-Selektor hinzu"
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "strong\\s*{\\s*color:\\s*red;[^}]*}",
|
||
"message": "Setze <kbd>color: red</kbd> für strong-Elemente"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "class-selectors",
|
||
"title": "Klassen-Selektoren: Elementgruppen stylen",
|
||
"description": "Klassen-Selektoren visieren Elemente mit einem bestimmten Klassen-Attributwert an. Sie beginnen mit einem Punkt (.) gefolgt vom Klassennamen. Klassen sind mächtig, weil sie es ermöglichen, die gleichen Stile auf mehrere Elemente anzuwenden, unabhängig von ihrem Typ. Ein HTML-Element kann mehrere Klassen haben (durch Leerzeichen im class-Attribut getrennt), und eine Klasse kann auf beliebig viele Elemente angewendet werden. Bei der Verwendung von Klassen-Selektoren kannst du Eigenschaften wie <kbd>background-color</kbd> zum Setzen der Hintergrundfarbe und <kbd>font-weight</kbd> zur Kontrolle der Textdicke anwenden. Diese Flexibilität macht Klassen-Selektoren zu einer der am häufigsten verwendeten Methoden zur Anwendung von Stilen in CSS und ermöglicht modulares und wiederverwendbares Styling auf deiner gesamten Website.",
|
||
"task": "Erstelle eine CSS-Regel mit einem Klassen-Selektor, die Elemente mit der Klasse <kbd>highlight</kbd> anvisiert. Gib diesen Elementen einen <kbd>yellow</kbd>-Hintergrund und <kbd>bold</kbd>-Text.",
|
||
"previewHTML": "<h2>Verwendung von Klassen-Selektoren</h2>\n<p>Dies ist ein normaler Absatz, aber <span class=\"highlight\">dieser Span hat die highlight-Klasse</span> angewendet.</p>\n<p class=\"highlight\">Dieser gesamte Absatz hat die highlight-Klasse.</p>\n<ul>\n <li>Normales Listenelement</li>\n <li class=\"highlight\">Dieses Listenelement ist hervorgehoben</li>\n</ul>",
|
||
"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
|
||
"sandboxCSS": "h2, p, li { padding: 5px; margin-bottom: 10px; }",
|
||
"codePrefix": "/* Erstelle einen Klassen-Selektor für Elemente mit der 'highlight'-Klasse */\n",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "^\\.highlight\\s*{",
|
||
"message": "Beginne deine Regel mit <kbd>.highlight { … }</kbd>, um einen Klassen-Selektor zu erstellen",
|
||
"options": {
|
||
"caseSensitive": true
|
||
}
|
||
},
|
||
{
|
||
"type": "contains",
|
||
"value": "background-color:",
|
||
"message": "Füge die <kbd>background-color:</kbd>-Eigenschaft hinzu"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "background-color",
|
||
"expected": "yellow"
|
||
},
|
||
"message": "Setze die Hintergrundfarbe auf <kbd>yellow</kbd>"
|
||
},
|
||
{
|
||
"type": "contains",
|
||
"value": "font-weight:",
|
||
"message": "Füge die <kbd>font-weight:</kbd>-Eigenschaft hinzu"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "font-weight",
|
||
"expected": "bold"
|
||
},
|
||
"message": "Setze font-weight auf <kbd>bold</kbd>"
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "\\.highlight\\s*{[^}]*}",
|
||
"message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer <kbd>}</kbd> zu beenden",
|
||
"options": {
|
||
"caseSensitive": true
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "multiple-classes",
|
||
"title": "Mit mehreren Klassen arbeiten",
|
||
"description": "HTML-Elemente können mehrere Klassen gleichzeitig haben, was komponierbare und modulare CSS-Designs ermöglicht. Wenn ein Element mehrere Klassen hat, erhält es Stile von allen passenden Klassen-Selektoren. Dieser Ansatz ermöglicht es dir, eine Bibliothek wiederverwendbarer CSS-Klassen aufzubauen, die auf verschiedene Arten kombiniert werden können. Du kannst auch Elemente anvisieren, die eine bestimmte Kombination von Klassen haben, indem du Klassen-Selektoren ohne Leerzeichen verkettst (z.B. <kbd>.class1.class2</kbd>). Beim Stylen dieser Elemente könntest du Eigenschaften wie <kbd>border-color</kbd> verwenden, um die Farbe von Element-Rahmen zu ändern, und <kbd>background-color</kbd>, um die Hintergrundfarbe von Elementen zu setzen. Diese Technik ermöglicht bedingte Stile, die nur gelten, wenn bestimmte Klassen zusammen erscheinen.",
|
||
"task": "Vervollständige die CSS-Regel, die Elemente mit sowohl <kbd>card</kbd> als auch <kbd>featured</kbd>-Klassen anvisiert, indem du die Selektoren verkettest. Setze border-color auf gold und background-color auf lemonchiffon, um hervorgehobene Karten hervorzuheben.",
|
||
"previewHTML": "<h2>Mehrfach-Klassen-Kombinationen</h2>\n<div class=\"card\">Normale Karte</div>\n<div class=\"card featured\">Hervorgehobene Karte</div>\n<div class=\"featured\">Nur hervorgehoben (keine Karte)</div>",
|
||
"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } .card { border: 2px solid gray; padding: 15px; margin-bottom: 10px; border-radius: 5px; }",
|
||
"sandboxCSS": "",
|
||
"codePrefix": "/* Die .card-Klasse hat bereits grundlegendes Styling */\n/* Visiere jetzt Elemente mit BEIDEN Klassen an: 'card' UND 'featured' */\n",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"previewContainer": "preview-area",
|
||
"solution": ".card.featured { border-color: gold; background-color: lemonchiffon }",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "^\\.card\\.featured\\s*{",
|
||
"message": "Verkette die Selektoren als <kbd>.card.featured</kbd> (kein Leerzeichen dazwischen)",
|
||
"options": {
|
||
"caseSensitive": true
|
||
}
|
||
},
|
||
{
|
||
"type": "contains",
|
||
"value": "border-color:",
|
||
"message": "Füge die <kbd>border-color</kbd>-Eigenschaft hinzu"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "border-color",
|
||
"expected": "gold"
|
||
},
|
||
"message": "Setze die Rahmenfarbe auf <kbd>gold</kbd>"
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "\\.card\\.featured\\s*{[^}]*;",
|
||
"message": "Vergiss nicht, deine CSS-Regel mit einem Semikolon <kbd>;</kbd> zu beenden"
|
||
},
|
||
{
|
||
"type": "contains",
|
||
"value": "background-color:",
|
||
"message": "Füge die <kbd>background-color</kbd>-Eigenschaft hinzu"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "background-color",
|
||
"expected": "lemonchiffon"
|
||
},
|
||
"message": "Setze die Hintergrundfarbe auf <kbd>lemonchiffon</kbd>"
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "\\.card\\.featured\\s*{[^}]*}",
|
||
"message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer <kbd>}</kbd> zu beenden",
|
||
"options": {
|
||
"caseSensitive": true
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "class-with-type",
|
||
"title": "Typ- und Klassen-Selektoren kombinieren",
|
||
"description": "Du kannst Typ-Selektoren mit Klassen-Selektoren kombinieren, um bestimmte HTML-Elemente anzuvisieren, die eine bestimmte Klasse haben. Dies erstellt einen spezifischeren Selektor, der nur passt, wenn beide Bedingungen wahr sind: das Element ist vom angegebenen Typ UND es hat die angegebene Klasse. Zum Beispiel würde <kbd>p.note</kbd> Absatz-Elemente mit der Klasse <kbd>note</kbd> auswählen, aber keine divs oder spans mit derselben Klasse. Du kannst diese kombinierten Selektionen mit Eigenschaften wie <kbd>background-color</kbd> stylen, um einen farbigen Hintergrund für deine Elemente zu setzen. Dieser Ansatz ermöglicht es dir, verschiedene Stile auf dieselbe Klasse anzuwenden, wenn sie auf verschiedenen Elementtypen erscheint.",
|
||
"task": "Erstelle eine CSS-Regel, die speziell <kbd><span></kbd>-Elemente mit der Klasse <kbd>highlight</kbd> anvisiert. Gib diesen Elementen einen orangen Hintergrund, während andere Elemente mit der highlight-Klasse unverändert bleiben.",
|
||
"previewHTML": "<h2>Typ- und Klassen-Kombinationen</h2>\n<p>Dieser Absatz hat einen <span class=\"highlight\">hervorgehobenen Span</span>, der einen orangen Hintergrund haben sollte.</p>\n<p class=\"highlight\">Dieser Absatz hat die highlight-Klasse, sollte aber KEINEN orangen Hintergrund haben.</p>",
|
||
"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } .highlight { font-weight: bold; }",
|
||
"sandboxCSS": "h2, p, span { padding: 5px; }",
|
||
"codePrefix": "/* Die .highlight-Klasse setzt bereits font-weight auf bold */\n/* Visiere jetzt NUR span-Elemente mit der highlight-Klasse an */\n",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "^span\\.highlight\\s*{",
|
||
"message": "Verwende den <kbd>span.highlight</kbd>-Selektor (kein Leerzeichen zwischen Element und Klasse)",
|
||
"options": {
|
||
"caseSensitive": true
|
||
}
|
||
},
|
||
{
|
||
"type": "contains",
|
||
"value": "background-color:",
|
||
"message": "Füge die <kbd>background-color</kbd>-Eigenschaft hinzu"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "background-color",
|
||
"expected": "orange"
|
||
},
|
||
"message": "Setze die Hintergrundfarbe auf <kbd>orange</kbd>"
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "span\\.highlight\\s*{[^}]*}",
|
||
"message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer <kbd>}</kbd> zu beenden",
|
||
"options": {
|
||
"caseSensitive": true
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "id-selectors",
|
||
"title": "ID-Selektoren: Einzigartige Elemente anvisieren",
|
||
"description": "ID-Selektoren visieren Elemente mit einem bestimmten id-Attribut an. Sie beginnen mit einem Raute-/Hash-Zeichen (#) gefolgt vom ID-Namen. Im Gegensatz zu Klassen müssen IDs innerhalb eines Dokuments einzigartig sein – jeder ID-Wert sollte nur einmal pro Seite verwendet werden. ID-Selektoren haben eine höhere Spezifität als Klassen- oder Element-Selektoren, was bedeutet, dass sie diese Selektoren bei Konflikten überschreiben. Beim Stylen mit ID-Selektoren kannst du Eigenschaften wie <kbd>color</kbd> verwenden, um die Textfarbe zu definieren, und <kbd>text-decoration</kbd>, um das Erscheinungsbild von Text zu kontrollieren, wie das Hinzufügen von Unterstreichungen zu Elementen. Wegen ihrer Einzigartigkeitsanforderung werden IDs am besten für einmalige Elemente wie Seitenköpfe, Hauptnavigation oder spezifische einzigartige Komponenten verwendet, die nur einmal auf einer Seite erscheinen.",
|
||
"task": "Erstelle eine CSS-Regel mit einem ID-Selektor, die das Element mit der ID <kbd>main-title</kbd> anvisiert. Setze seine Farbe auf purple und füge eine Unterstreichung mit <kbd>text-decoration: underline</kbd> hinzu.",
|
||
"previewHTML": "<h1 id=\"main-title\">Haupt-Seitentitel</h1>\n<p>Normaler Absatzinhalt.</p>\n<h2>Sekundäre Überschrift</h2>\n<p id=\"intro\">Einführungsabsatz (andere ID).</p>",
|
||
"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
|
||
"sandboxCSS": "h1, h2, p { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
|
||
"codePrefix": "/* Erstelle einen ID-Selektor für das Element mit id=\"main-title\" */\n",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "^#main-title\\s*{",
|
||
"message": "Beginne deine Regel mit <kbd>#main-title</kbd>, um einen ID-Selektor zu erstellen",
|
||
"options": {
|
||
"caseSensitive": true
|
||
}
|
||
},
|
||
{
|
||
"type": "contains",
|
||
"value": "color:",
|
||
"message": "Füge die <kbd>color</kbd>-Eigenschaft hinzu"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "color",
|
||
"expected": "purple"
|
||
},
|
||
"message": "Setze die Farbe auf <kbd>purple</kbd>"
|
||
},
|
||
{
|
||
"type": "contains",
|
||
"value": "text-decoration:",
|
||
"message": "Füge die <kbd>text-decoration</kbd>-Eigenschaft hinzu"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "text-decoration",
|
||
"expected": "underline"
|
||
},
|
||
"message": "Setze text-decoration auf <kbd>underline</kbd>"
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "#main-title\\s*{[^}]*}",
|
||
"message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer <kbd>}</kbd> zu beenden",
|
||
"options": {
|
||
"caseSensitive": true
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "id-with-type",
|
||
"title": "Typ- und ID-Selektoren kombinieren",
|
||
"description": "Ähnlich wie du Typ- und Klassen-Selektoren kombinieren kannst, kannst du auch Typ-Selektoren mit ID-Selektoren kombinieren. Zum Beispiel visiert <kbd>h1#title</kbd> ein h1-Element mit der ID 'title' an. Bei diesem kombinierten Ansatz kannst du CSS-Eigenschaften wie <kbd>font-style</kbd> anwenden, um die Neigung des Textes zu kontrollieren und ihn kursiv oder normal zu machen. Obwohl diese Selektor-Kombination spezifischer ist als die Verwendung nur des ID-Selektors, ist sie oft unnötig, da IDs bereits einzigartig im Dokument sein sollten. Diese Technik kann jedoch nützlich sein, um die Lesbarkeit des Codes zu verbessern oder wenn du betonen möchtest, dass eine bestimmte ID nur auf einem bestimmten Elementtyp erscheinen sollte.",
|
||
"task": "Erstelle eine CSS-Regel, die einen Typ-Selektor mit einem ID-Selektor kombiniert, um speziell ein Absatz-Element mit der ID <kbd>special</kbd> anzuvisieren. Setze seinen Schriftstil auf kursiv.",
|
||
"previewHTML": "<h2 id=\"special\">Überschrift mit ID \"special\" (sollte NICHT betroffen sein)</h2>\n<p id=\"special\">Absatz mit ID \"special\" (sollte kursiv werden)</p>",
|
||
"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
|
||
"sandboxCSS": "h2, p { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }",
|
||
"codePrefix": "/* Erstelle einen kombinierten Typ+ID-Selektor für einen Absatz mit id=\"special\" */\n",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "^p#special\\s*{",
|
||
"message": "Verwende <kbd>p#special</kbd>, um Absätze mit ID 'special' anzuvisieren",
|
||
"options": {
|
||
"caseSensitive": true
|
||
}
|
||
},
|
||
{
|
||
"type": "contains",
|
||
"value": "font-style:",
|
||
"message": "Füge die <kbd>font-style</kbd>-Eigenschaft hinzu"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "font-style",
|
||
"expected": "italic"
|
||
},
|
||
"message": "Setze font-style auf <kbd>italic</kbd>"
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "p#special\\s*{[^}]*}",
|
||
"message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer <kbd>}</kbd> zu beenden",
|
||
"options": {
|
||
"caseSensitive": true
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "selector-lists",
|
||
"title": "Selektor-Listen: Gleiche Regeln auf mehrere Selektoren anwenden",
|
||
"description": "Wenn mehrere Elemente das gleiche Styling benötigen, kannst du sie mit einer Selektor-Liste (auch Gruppierungs-Selektoren genannt) zusammenfassen. Selektor-Listen werden erstellt, indem einzelne Selektoren durch Kommas getrennt werden. Dieser Ansatz reduziert Wiederholungen in deinem CSS und macht es wartbarer und effizienter. Zum Beispiel wendet <kbd>h1, h2, h3 { color: blue; }</kbd> die gleiche blaue Farbe auf alle drei Überschriftenebenen an. Beim Stylen mehrerer Selektoren gleichzeitig kannst du Eigenschaften wie <kbd>background-color</kbd> für den Hintergrund, <kbd>border-left</kbd> für einen linken Rahmen mit bestimmter Dicke, Stil und Farbe, und <kbd>padding-left</kbd> anwenden, um Abstand zwischen dem Inhalt und dem linken Rahmen zu schaffen. Leerzeichen um Kommas sind optional, und jeder Selektor in der Liste kann ein beliebiger gültiger Selektortyp sein – Elemente, Klassen, IDs oder sogar komplexere Selektoren.",
|
||
"task": "Erstelle eine Selektor-Liste, die die gleichen Stile auf drei verschiedene Elemente anwendet: Absätze mit der Klasse <kbd>note</kbd>, Listenelemente mit der Klasse <kbd>important</kbd> und das Element mit der ID <kbd>summary</kbd>. Gib ihnen einen <kbd>lightyellow</kbd>-Hintergrund, einen <kbd>gold</kbd>-linken Rahmen und etwas linkes <kbd>padding</kbd>.",
|
||
"previewHTML": "<p class=\"note\">Dies ist ein Notiz-Absatz.</p>\n<ul>\n <li>Normales Listenelement</li>\n <li class=\"important\">Wichtiges Listenelement</li>\n</ul>\n<div id=\"summary\">Zusammenfassungs-Abschnitt</div>",
|
||
"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
|
||
"sandboxCSS": "p, li, div { padding: 8px; margin-bottom: 8px; border: 1px dashed gray; }",
|
||
"codePrefix": "/* Erstelle eine Selektor-Liste, um die gleichen Stile auf mehrere verschiedene Elemente anzuwenden */\n",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"previewContainer": "preview-area",
|
||
"solution": "p.note,\nli.important,\n#summary {\n background-color: lightyellow;\n border-left: 3px solid gold;\n padding-left: 10px\n}",
|
||
"validations": [
|
||
{
|
||
"type": "contains",
|
||
"value": "p.note",
|
||
"message": "Füge <kbd>p.note</kbd> in deine Selektor-Liste ein",
|
||
"options": {
|
||
"caseSensitive": true
|
||
}
|
||
},
|
||
{
|
||
"type": "contains",
|
||
"value": "li.important",
|
||
"message": "Füge <kbd>li.important</kbd> in deine Selektor-Liste ein",
|
||
"options": {
|
||
"caseSensitive": true
|
||
}
|
||
},
|
||
{
|
||
"type": "contains",
|
||
"value": "#summary",
|
||
"message": "Füge <kbd>#summary</kbd> in deine Selektor-Liste ein",
|
||
"options": {
|
||
"caseSensitive": true
|
||
}
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "(p\\.note|li\\.important|#summary)\\s*,\\s*(p\\.note|li\\.important|#summary)\\s*,\\s*(p\\.note|li\\.important|#summary)",
|
||
"message": "Erstelle eine kommagetrennte Liste mit allen drei Selektoren",
|
||
"options": {
|
||
"caseSensitive": true
|
||
}
|
||
},
|
||
{
|
||
"type": "contains",
|
||
"value": "background-color:",
|
||
"message": "Füge die <kbd>background-color</kbd>-Eigenschaft hinzu"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "background-color",
|
||
"expected": "lightyellow"
|
||
},
|
||
"message": "Setze die Hintergrundfarbe auf <kbd>lightyellow</kbd>"
|
||
},
|
||
{
|
||
"type": "contains",
|
||
"value": "border-left:",
|
||
"message": "Füge die <kbd>border-left</kbd>-Eigenschaft hinzu"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "border-left",
|
||
"expected": "3px solid gold"
|
||
},
|
||
"message": "Verwende <kbd>border-left: 3px solid gold</kbd>, um einen linken Rahmen zu erstellen"
|
||
},
|
||
{
|
||
"type": "contains",
|
||
"value": "padding-left:",
|
||
"message": "Füge die <kbd>padding-left</kbd>-Eigenschaft hinzu"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "padding-left",
|
||
"expected": "10px"
|
||
},
|
||
"message": "Verwende <kbd>padding-left: 10px</kbd>, um linkes Padding hinzuzufügen"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "universal-selector",
|
||
"title": "Der universelle Selektor: Alles anvisieren",
|
||
"description": "Der universelle Selektor wird durch ein Sternchen (*) gekennzeichnet und passt auf jedes Element jedes Typs. Er wählt alles im Dokument aus oder, wenn er mit anderen Selektoren kombiniert wird, alles innerhalb eines bestimmten Kontexts. Zum Beispiel entfernt <kbd>* { margin: 0; }</kbd> Ränder von allen Elementen, während <kbd>article *</kbd> alle Elemente innerhalb von article-Elementen auswählt. Bei der Verwendung des universellen Selektors in Kombination mit anderen Selektoren kannst du Eigenschaften wie <kbd>margin</kbd> anwenden, um die Abstände um Elemente zu kontrollieren. Der universelle Selektor ist mächtig, sollte aber wegen seiner breiten Auswirkung vorsichtig verwendet werden. Er wird häufig in CSS-Resets verwendet, um Standard-Browser-Styling zu überschreiben, oder um alle Kinder eines bestimmten Elements anzuvisieren.",
|
||
"task": "Verwende den universellen Selektor, um Ränder von allen Elementen innerhalb des Container-divs zu entfernen. Erstelle eine Regel mit <kbd>div.container *</kbd> als Selektor und setze <kbd>margin: 0</kbd>.",
|
||
"previewHTML": "<div class=\"container\">\n <h2>Innerhalb des Containers</h2>\n <p>Dieser Absatz ist innerhalb des Containers.</p>\n <ul>\n <li>Listenelement innerhalb des Containers</li>\n </ul>\n</div>\n<p>Dieser Absatz ist außerhalb des Containers und sollte nicht betroffen sein.</p>",
|
||
"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } div.container { border: 2px solid navy; padding: 15px; background-color: lavender; } h2, p, ul, li { margin: 15px 0; }",
|
||
"sandboxCSS": "",
|
||
"codePrefix": "/* Verwende den universellen Selektor, um alle Elemente innerhalb des Containers anzuvisieren */\n",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "^div\\.container\\s+\\*\\s*{",
|
||
"message": "Verwende <kbd>div.container *</kbd>-Selektor (mit einem Leerzeichen zwischen container und *)",
|
||
"options": {
|
||
"caseSensitive": true
|
||
}
|
||
},
|
||
{
|
||
"type": "contains",
|
||
"value": "margin:",
|
||
"message": "Füge die <kbd>margin</kbd>-Eigenschaft hinzu"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": {
|
||
"property": "margin",
|
||
"expected": "0"
|
||
},
|
||
"message": "Setze margin auf <kbd>0</kbd>"
|
||
},
|
||
{
|
||
"type": "regex",
|
||
"value": "div\\.container\\s+\\*\\s*{[^}]*}",
|
||
"message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer <kbd>}</kbd> zu beenden",
|
||
"options": {
|
||
"caseSensitive": true
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "specificity-basics",
|
||
"title": "Selektor-Spezifität verstehen",
|
||
"description": "CSS-Spezifität bestimmt, welche Stile Vorrang haben, wenn mehrere widersprüchliche Regeln auf dasselbe Element abzielen. Spezifität folgt einem hierarchischen System: Inline-Stile haben die höchste Spezifität, gefolgt von ID-Selektoren, dann Klassen-/Attribut-/Pseudo-Klassen-Selektoren und schließlich Element-/Pseudo-Element-Selektoren. Dies kann als vierteilige Punktzahl (inline, ID, Klasse, Element) konzeptualisiert werden. Beim Erstellen mehrerer Regeln, die auf dieselben Elemente abzielen könnten, kannst du die <kbd>color</kbd>-Eigenschaft verwenden, um Textfarben zu setzen, und die Spezifität bestimmt, welche Farbe tatsächlich angewendet wird. Das Verstehen von Spezifität ist entscheidend für vorhersagbares Styling und das Debuggen von CSS-Konflikten. Wenn zwei Selektoren gleiche Spezifität haben, gewinnt derjenige, der zuletzt im Stylesheet kommt.",
|
||
"task": "Untersuche die vorhandenen CSS-Regeln und füge eine neue Regel mit höherer Spezifität hinzu, um die Textfarbe des Absatzes zu überschreiben. Erstelle eine Regel mit '.content p' als Selektor und setze color: green.",
|
||
"previewHTML": "<div class=\"content\">\n <p>Welche Farbe wird dieser Absatz haben? Schau dir die CSS-Regeln und ihre Spezifität an.</p>\n</div>",
|
||
"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
|
||
"sandboxCSS": "p { border: 1px dashed gray; padding: 10px; }",
|
||
"codePrefix": "/* Diese CSS-Regeln visieren denselben Absatz an, haben aber unterschiedliche Spezifität */\n\n/* Regel 1: Element-Selektor (niedrigste Spezifität) */\np {\n color: red;\n}\n\n/* Regel 2: Nachfahren-Selektor (höhere Spezifität als nur 'p') */\n",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "^\\.content\\s+p\\s*{",
|
||
"message": "Verwende <kbd>.content p</kbd> als deinen Selektor (beachte das Leerzeichen dazwischen)",
|
||
"options": {
|
||
"caseSensitive": true
|
||
}
|
||
},
|
||
{
|
||
"type": "contains",
|
||
"value": "color:",
|
||
"message": "Füge die <kbd>color</kbd>-Eigenschaft hinzu"
|
||
},
|
||
{
|
||
"type": "contains",
|
||
"value": "green",
|
||
"message": ""
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|