CSS-Selektoren Regeln

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

Welche Aussage trifft zu, wenn es gleichwertige CSS-Regeln gibt? (gleiche Spezifität des Selektors)

Jene, die weiter unten im Quellcode steht. (correct)

CSS-Regeln dürfen im Selektor nicht mehr als zwei IDs enthalten.

Eine Inline-CSS-Angabe mit !important gilt immer.

Bei gleichwertigen Selektoren werden nur die Eigenschaften übernommen, die !important enthalten.

Welche Aussage zu einfachen CSS-Selektoren ist falsch?

[foo] ... jedes Element mit einem Kindelement foo wird angesprochen

E ... jedes Element E wird angesprochen (correct)

#id ... das Element mit der ID „id“ wird angesprochen

.c ... jedes Element mit der Klasse c wird angesprochen

Welche der folgenden Aussagen zu Kombinationen von CSS-Selektoren (E und F) ist falsch?

E * F … alle Elemente E, die ein Elternelement von den Elementen F sind (correct)

E + F … alle Elemente F, die einen direkten Vorgänger E auf gleicher Ebene haben

E ~ F … alle Elemente F, die einen Vorgänger auf gleicher Ebene haben

E F … alle Elemente F, die Nachfahren eines Elements E sind

Wie kann ein Selektor für das folgende HTML-Element aussehen? Hello World!

div.top Signup and view all the answers

Welcher der folgenden Selektoren spricht alle Listenelemente mit dem Inhalt „A“ aus dem Beispiel an?

li:nth-child(2n+1) Signup and view all the answers

Welche der folgenden Begriffe sind keine HTTP Request Methoden?

SECURE und SSL Signup and view all the answers

Welche Aussage trifft laut HTTP-Standard für die Beschreibung einer HTTP Request Methode zu?

Eine GET Anfrage soll nur Daten abrufen. Signup and view all the answers

Welche Cache-Richtlinien können mit dem Cache-Control Header definiert werden?

no-cache Signup and view all the answers

In welcher Syntax werden Cookies mit dem Set-Cookie Header übertragen?

name=value; name2=value2 Signup and view all the answers

Warum ist HTTP Basic Authentication eher als unsicher anzusehen?

Username und Passwort werden nur Base64 enkodiert. Signup and view all the answers

Was definiert der HTTP Status Code?

Ob ein HTTP Request erfolgreich abgeschlossen wurde oder nicht. Signup and view all the answers

HTTP Response Status Codes werden in wie vielen Gruppen eingeteilt?

5 Signup and view all the answers

Was beschreiben HTTP Response Status Codes von 400 bis 499?

Client error responses Signup and view all the answers

Welche der Angaben beschreiben Gruppen von HTTP Response Status Codes?

Redirection messages Signup and view all the answers

Mit welchen zwei Status Codes können temporäre Umleitungen von permanenten Umleitungen unterschieden werden?

301 und 302 Signup and view all the answers

Study Notes

HTTP Request + Headers

HTTP Request Methoden: GET, POST, PUT, DELETE, PATCH, CONNECT
Keine HTTP Request Methode: SECURE, SSL, CHANGE, OPTION
Cache-Richtlinien mit Cache-Control Header: no-cache, max-age, no-store, must-revalidate
Cookies werden mit Set-Cookie Header übertragen: name=value; name2=value2
Warum ist HTTP Basic Authentication unsicher: USERNAME und Passwort werden nur Base64 encodiert.

HTTP Status Codes

HTTP Status Codes definieren, ob ein HTTP Request erfolgreich abgeschlossen wurde oder nicht.
HTTP Response Status Codes werden in 5 Gruppen eingeteilt: 1xx, 2xx, 3xx, 4xx, 5xx
Status Codes von 400 bis 499: Client error responses
Status Codes von 500 bis 599: Server error responses

Editor, IDE

IDE: integrated development environment
Visual Studio Code Extensions werden in JavaScript erstellt
Editoren, die von Webentwicklern häufig verwendet werden: Visual Studio Code, WebStorm, Brackets, Notepad++

Zusammenspiel HTML, CSS, JavaScript

Trennung von HTML-, CSS- und JavaScript-Code: Inhalt, Darstellung und Funktion
HTML Tags werden in spitzen Klammern geschrieben
Eine CSS Regel definiert eine Formatvorlage für bestimmte HTML Tags

HTML Grundgerüst

Zum HTML Grundgerüst gehören: Doctype, head-Element, body-Element
DTD für HTML5:
Der Meta-Tag "viewport" im HTML-Head wird für die Darstellung der Webseite auf mobilen Endgeräten verwendet

Block, Inline, andere Displayarten

Die CSS-Eigenschaft "display" bestimmt, ob und wie ein Element auf der Seite dargestellt wird
Standardmäßig Blockly-Elemente: div, p, ul
Standardmäßig Inline-Elemente: strong, i, img

Semantik

Semantik: Bedeutungslehre
Semantisches HTML beschreibt die Beziehung von HTML-Tags und deren Inhalten
Vorteile von semantischen HTML-Codes: Besseres Verständnis der Inhalte durch Suchmaschinen, bessere Zugänglichkeit für Benutzer mit Einschränkungen

Hyperlinks

Der Tag erzeugt einen Hyperlink in der Webseite
Das Attribut "target" in einem Hyperlink legt fest, wo sich das verlinkte Dokument öffnen soll
Pseudoklassen für Hyperlinks: :link, :visited, :hover, :active

Formulare

Attribute des Formular-Elements: action, method, enctype
Eingabefelder können mit verschiedenen Typen (z.B. text, password, submit) erstellt werden
Radiobuttongruppen können mit mehreren input-Elementen erstellt werden

CSS Regel

Eine CSS Regel besteht aus Selektor und Deklarationsblock
Eine CSS Regel beschreibt das Aussehen der mit dem Selektor angesprochenen HTML-Elemente
CSS steht für Cascading Style Sheet

CSS Selektoren, Kaskadierung

Selektoren können kombiniert werden, um bestimmte Elemente anzusprechen
Pseudoklassen wie :first-child, :last-child, :nth-child können verwendet werden
Kombination von Selektoren: E, F, E F, E * F, E ~ F

Box Modell

Das Box Modell definiert die Darstellung eines Elements: width, height, padding, border, margin
Eine Box kann mit Außenabstand, Innenabstand, Rahmen und Inhalt definiert werden
Schriftgröße kann mit px, vw, vh, % oder rad festgelegt werden

Flexbox

Flexbox ermöglicht die Darstellung von flexiblen Boxen
Vorteile von Flexbox: alle Elemente innerhalb eines Containers können die Container-Höhe übernehmen
Eigenschaften von Flexbox: flex-grow, flex-shrink, flex-basis

Pseudoklassen, Pseudoelemente

Pseudoklassen ermöglichen es, einem Element für einen bestimmten Zustand Formatierung zu geben
Pseudoklassen können verwendet werden, um bestimmte Elemente anzugreifen
Pseudoelemente können verwendet werden, um bestimmte Teile eines Elements anzugreifen

Mediaqueries

Mediaqueries ermöglichen es, unterschiedliche CSS-Eigenschaften für verschiedene Gerätetypen festzulegen
Mediaqueries können Eigenschaften des Bildschirmes abfragen: Breite, Höhe, Orientierung
Mediaqueries können verwendet werden, um die Webapplikation für den Darkmode zu optimieren

Bootstrap

Bootstrap ist ein Framework für die Erstellung von responsiven Webseiten
Bootstrap ermöglicht es, schnell und einfach eine Website mit verschiedenen Geräten zu erstellen### Bootstrap Framework
Bootstrap ist ein CSS Framework für schnellere und einfachere Webentwicklung.
Es beinhaltet HTML und CSS basierte Design-Templates für Typographie, Formulare, Buttons, Tabellen, Navigation, Bilder und optionale JavaScript Plugins.

Bootstrap Gridsystem

Das Bootstrap Gridsystem besteht aus 12 Spalten.
Es verwendet Default-Breakpoints (in v5: xs, sm, md, lg, xl, xxl).
Die Anzahl an Spalten kann frei konfiguriert werden.

Bootstrap Grid - Elemente erstellen

Mit der Klasse .col-4 können drei gleichgroße Elemente nebeneinander erstellt werden, die gemeinsam die Breite des Containers einnehmen.

Bootstrap-Button

Ein Bootstrap-Button mit grünem Hintergrund kann mit dem Tag btn-success erstellt werden.

Bootstrap Formularfelder

Erfolgreich validierte Formularfelder werden mit der Klasse is-valid markiert.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

Erkennen Sie die richtigen CSS-Regeln und Selektoren für einfache und kombinierte Selektoren. Testen Sie Ihre Fähigkeiten in diesem Quiz!