CSS Flashcards
Auf welche Weisen kann CSS definiert werden?
User Agent (Browser), User Style, Application Styles
Wie wird ein CSS-Regelset definiert?
selector {
property: value;
…
}
Wo und wie wird CSS im HTML-Code implementiert?
Im < head >:
< style >
[ CSS-Regeln ]
< / style >
Woraus besteht eine Box in CSS (in aufsteigender Reihenfolge)?
Content, Padding, Border, Margin
Was ist der Content einer CSS-Box?
Der Inhalt der Box
Was ist das Padding einer CSS-Box?
Der Abstand zwischen Content und Border
Was ist die Border einer CSS-Box?
Der Umriss der Box
Was ist das Margin einer CSS-Box?
Der Abstand der Box zu anderen Boxen
Was ist eine Klasse in HTML?
Ein Attribut, das man einzelnen Elementen geben kann, um die Elemente zu gruppieren
Wie importiere ich ein CSS-Dokument in HTML?
< link rel=”stylesheet” href=”style.css” >
Wie schreibe ich Selektoren für Klassen?
.klasse
Wie schreibe ich Selektoren für Elemente innerhalb einer bestimmten Klasse?
.klasse element
Absolute vs Relative Position
Absolut: Element ist nicht Teil des Document Workflows, sondern wird auf eine Position im es enthaltenden Element gesetzt
Relativ: Element bleibt Teil des Workflows, wird aber visuell auf eine neue Position relativ zu seiner tatsächlichen Position verschoben
position: fixed
Das Element wird an einer Stelle des Viewports positioniert, bleibt z.B. beim Scrollen an derselben Stelle
z-index: x
Liegen mehrere Elemente übereinander, wird das Element mit dem höchsten z-index über allen anderen angezeigt usw
Wie schreibe ich Kommentare in CSS?
/* Ein Kommentar */
display: block
Zeigt die ausgewählten Elemente als Block Level Elemente an
display: inline
Zeigt die ausgewählten Elemente als In-Line Elemente an
display: inline-block
Zeigt die ausgewählten Elemente als In-Line Elemente an, lässt aber Anpassungen der Größe zu
display: flex
Erzeugt einen Flex-Container
flex-flow:
Ausrichtung des Flex-Containers (row/column -> Hauptachse waagerecht / Hauptachse senkrecht)
und Verhalten der Elemente bei kleinerem Viewport (wrap/nowrap -> Wird in neuer Zeile/Säule fortgeführt / Elemente werden gestaucht und, falls nötig, durch Rand des Viewports abgeschnitten)
Appendix ‘-reverse’ kehrt Richtung um
align-items:
Ausrichtung der Elemente eines Flex-Containers auf der Kreuzachse
justify-content:
Ausrichtung der Elemente eines Flex-Containers auf der Hauptachse
order: 0
Reihenfolge der Flex-Elemente; Elemente mit höherem Wert landen weiter hinten (nach Ausrichtung der Hauptachse des Flex-Containers)
align-self:
Ausrichtung des einzelnen Flex-Elements auf der Kreuzachse des Containers
flex: 0 1 auto
flex-grow - wenn größer als 0, wächst Flex-Element, um den gesamten restlichen Raum auszufüllen; bei mehreren Elementen gilt: Höhere Zahl = Höherer Anteil am Wachstum
flex-shrink - Ähnlich wie flex-grow, betriff aber Stauchung des Flex-Elements bei weniger Raum
flex-basis - Größe des Flex-Elements, abhängig von der Hauptachse (Bei row Breite, bei column Höhe)
