Recent Lessons

Show all results for ""

CSS

CSS

Choose a study mode

Play Quiz

Study Flashcards

Spaced Repetition

Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Download our mobile app to listen on the go

Get App

Questions and Answers

Was ist die Hauptstadt von Frankreich? (Beispielfrage)

Paris (correct)
London
Berlin
Madrid

Flashcards

Nennen und beschreiben Sie die 2 wichtigen Eigenschaften von CSS.

...

Was bedeutet CSS? Was steht beim Einsatz von CSS im Fokus und welche Vorteile ergeben sich dabei?

Cascading Style Sheets (CSS) ist eine Style-Sheet-Sprache, die zur Beschreibung des Aussehens und der Formatierung eines in einer Markup-Sprache geschriebenen Dokuments verwendet wird.

Kurz: CSS definiert, wie die einzelnen HTML-Elemente angezeigt werden sollen.

Was ist eine CSS-Regel? Nenne Sie die Bestandteile einer CSS-Regel und beschreiben Sie den prinzipiellen Aufbau anhand eines Code-Beispiels.

Besteht aus CSS-Selektor, Eigenschaften und Werten

selector {
 Eigenschaft: Wert;
 Eigenschaft: Wert1 Wert2;
 Eigenschaft: Wert;
 }
/* das ist ein Kommentar */

Was ist eine sog. „shorthand“-Eigenschaft?

Eine „Shorthand“-Eigenschaft (oder Kurzschreibweise) in der Programmierung, insbesondere in CSS, ist eine Möglichkeit, mehrere verwandte Eigenschaften in einer einzigen Zeile zusammenzufassen.

Signup and view all the flashcards

Nennen Sie die Möglichkeiten, CSS-Informationen in eine HTML-Dokument hinzuzufügen. Beschreiben Sie kurz die jeweilige Vorgehensweise.

Inline-CSS: Direkt im HTML-Tag, nützlich für einzelne Elemente.

Interne CSS: Innerhalb des <style>-Tags im <head>-Bereich, geeignet für kleinere Webseiten.

Externe CSS: In einer separaten .css-Datei, ideal für größere Projekte und Wiederverwendbarkeit.

Signup and view all the flashcards

Was versteht man unter der CSS-Kaskade? Wie ist die Kaskadierung definiert? Nennen Sie die Merk-Regel für die CSS-Kaskade.

Die CSS-Kaskade regelt, wie der Browser entscheidet, welche Regel bei mehreren konkurrierenden CSS-Regeln angewendet wird, und folgt dabei der Reihenfolge der Spezifität, der Reihenfolge der Deklarationen und der Wichtigkeit.

1. Inline-Stil (innerhalb eines HTML-Elements)
2. Externe und/oder interne Formatvorlagen (im Head). Wichtig: Reihenfolge beachten.
3. Browser-Standard

Die Regel, die dem Element am nächsten liegt, hat die höchste Priorität.

Signup and view all the flashcards

Aus welchen unterschiedlichen Quellen können CSSRegeln beim Rendern im Browser prinzipiell stammen?

- Aus dem style-Attribut eines HTML-Elements (CSS Inline)
- Aus <style>-Elementen der Webseite.
- Aus externen CSS-Dateien.
- Vom Browser selbst, der eigene Styles mitbringt, wenn keine CSS-Regeln für das Element definiert sind.
- Aus dem Stylesheet des Besuchers, wenn der Browser das Laden eines eigenen Stylesheets erlaubt.

Signup and view all the flashcards

Elementselektoren

Selektor ist gleich dem Namen des entsprechenden HTML-Elements (nicht case-sensitive). (Universeller Selektor * passt auf jedes HTML-Element im HTML-Dokument)

h1 { font-family: Helvetica; font-size: large; }
table { color: silver; }

Signup and view all the flashcards

ID-Selektoren

Selektor ist gleich dem Wert des ID-Attributs eines HTML-Elements (case-sensitive). Wird gekennzeichnet mit einem führenden #.

#First { background: red; }
HTML: <td id="First">Zelle</td>

Signup and view all the flashcards

Klassenselektoren

Selektor ist gleich dem Wert des Class-Attributs eines HTML-Elements (case-sensitive). Wirdgekennzeichnet mit einem führenden ..

.warning { font-weight: bold; }
HTML: <p class="warning">Achtung!</p>
(Mehrere Klassen für ein HTML-Element sind möglich class="class1 class2 ...“)`

Signup and view all the flashcards

Pseudoklassen

Spezielle vordefinierte Klassen abhängig vom Zustand des Elements (nicht case-sensitive).

p:hover { font-weight: bold; } (weitere: :link; :visited; :focus; :acitve; )
HTML: <p>Element wird fett, sobald der Mauszeiger dar&uuml;ber ist</p>

Signup and view all the flashcards

Attribut-Selektoren

Selektor ist gleich dem Namen eines Attributs in einem HTML-Element (case-sensitive).

[title] { visibility: hidden; }
div[title] { visibility: hidden; }
HTML: <div title="unsichtbar">Information nicht zu sehen</div>

Signup and view all the flashcards

Attributwert-Selektoren

Selektor ist gleich dem Wert eines Attributes in einem HTML-Element.

[lang="en"] { color: blue; }
h1[lang="en"] { color: blue; }
HTM: <h1 lang="en">Blue Header</h1>

Signup and view all the flashcards

Selektoren für Nachfahren

h2 b { font-style: italic; }
HTML: <h2>Text ist <u><b>unterstrichen, fett und kursiv</b></u></h2>
Wirkt nur auf <b>-Elemente unterhalb von <h2>-Elementen (beliebig tief geschachtelt)

Signup and view all the flashcards

Selektoren für direkte Kind-Knoten

h2 > b { font-style: italic; }
HTML: <h2>Text ist <u><b>unterstrichen, fett und nicht kursiv</b</u>
 <b>fett und kursiv</b></h2>
Wirkt nur auf <b>-Elemente direkt unterhalb von <h2>-Elementen

Signup and view all the flashcards

Selektorenliste

h1, h2 { font-size: larger; }
Ist identisch mit:
h1 { font-size: larger; }
h2 { font-size: larger; }

Signup and view all the flashcards

Nennen Sie den Unterschied zwischen absoluten und relativen Schriftgrößen.

Absolut: Feste Werte, die nicht vom Kontext abhängen (z. B. px, pt, cm). Beispiel: font-size: 16px;

Relativ: Abhängig vom Kontext, z. B. der Größe des übergeordneten Elements oder des Root-Elements (z. B. em, rem, %). Beispiel: font-size: 2rem; (relativ zur Root-Schriftgröße).

Signup and view all the flashcards

Signup and view all the flashcards

More Like This

CSSD Sterilization Methods Quiz

5 questions

CSSD Sterilization Methods Quiz

IntuitiveThunderstorm

CSS Skills Flashcards

63 questions

CSS Skills Flashcards

WieldyJadeite4115

CSS Basics Quiz

25 questions

CSS Basics Quiz

LowCostHarpy

CS 102 CSS Practice Test

25 questions

CS 102 CSS Practice Test

WellBacklitJasmine

Use Quizgecko on...

Browser