CSS

Question 1

Auf welche Weisen kann CSS definiert werden?

Answer 1

User Agent (Browser), User Style, Application Styles

Question 2

Wie wird ein CSS-Regelset definiert?

Answer 2

selector {
property: value;
…
}

Question 3

Wo und wie wird CSS im HTML-Code implementiert?

Answer 3

Im < head >:
< style >
[ CSS-Regeln ]
< / style >

Question 4

Woraus besteht eine Box in CSS (in aufsteigender Reihenfolge)?

Answer 4

Content, Padding, Border, Margin

Question 5

Was ist der Content einer CSS-Box?

Answer 5

Der Inhalt der Box

Question 6

Was ist das Padding einer CSS-Box?

Answer 6

Der Abstand zwischen Content und Border

Question 7

Was ist die Border einer CSS-Box?

Answer 7

Der Umriss der Box

Question 8

Was ist das Margin einer CSS-Box?

Answer 8

Der Abstand der Box zu anderen Boxen

Question 9

Was ist eine Klasse in HTML?

Answer 9

Ein Attribut, das man einzelnen Elementen geben kann, um die Elemente zu gruppieren

Question 10

Wie importiere ich ein CSS-Dokument in HTML?

Answer 10

< link rel=”stylesheet” href=”style.css” >

Question 11

Wie schreibe ich Selektoren für Klassen?

Answer 11

.klasse

Question 12

Wie schreibe ich Selektoren für Elemente innerhalb einer bestimmten Klasse?

Answer 12

.klasse element

Question 13

Absolute vs Relative Position

Answer 13

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

Question 14

position: fixed

Answer 14

Das Element wird an einer Stelle des Viewports positioniert, bleibt z.B. beim Scrollen an derselben Stelle

Question 15

z-index: x

Answer 15

Liegen mehrere Elemente übereinander, wird das Element mit dem höchsten z-index über allen anderen angezeigt usw

Question 16

Wie schreibe ich Kommentare in CSS?

Answer 16

/* Ein Kommentar */

Question 17

display: block

Answer 17

Zeigt die ausgewählten Elemente als Block Level Elemente an

Question 18

display: inline

Answer 18

Zeigt die ausgewählten Elemente als In-Line Elemente an

Question 19

display: inline-block

Answer 19

Zeigt die ausgewählten Elemente als In-Line Elemente an, lässt aber Anpassungen der Größe zu

Question 20

display: flex

Answer 20

Erzeugt einen Flex-Container

Question 21

flex-flow:

Answer 21

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

Question 22

align-items:

Answer 22

Ausrichtung der Elemente eines Flex-Containers auf der Kreuzachse

Question 23

justify-content:

Answer 23

Ausrichtung der Elemente eines Flex-Containers auf der Hauptachse

Question 24

order: 0

Answer 24

Reihenfolge der Flex-Elemente; Elemente mit höherem Wert landen weiter hinten (nach Ausrichtung der Hauptachse des Flex-Containers)

Question 25

align-self:

Answer 25

Ausrichtung des einzelnen Flex-Elements auf der Kreuzachse des Containers

Question 26

flex: 0 1 auto

Answer 26

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)