diff --git a/slides/223015c/02-netzwerke-protokolle-css.md b/slides/223015c/02-netzwerke-protokolle-css.md index 7d8b726..a8ed890 100644 --- a/slides/223015c/02-netzwerke-protokolle-css.md +++ b/slides/223015c/02-netzwerke-protokolle-css.md @@ -1889,6 +1889,8 @@ HTML definiert die Struktur – was ist auf der Seite. CSS definiert das Aussehe # Was ist CSS? +![bg right:35%](./assets/demos/css-anatomie.png) + **C**ascading **S**tyle **S**heets ```css @@ -1984,6 +1986,8 @@ Semikolon nach jedem Paar. Doppelpunkt zwischen Property und Value. # Selektoren: Element +![bg right:35%](./assets/demos/css-selector-element.png) + ```css /* Alle

-Elemente */ p { @@ -2012,6 +2016,8 @@ Komma bedeutet "oder" – h1 oder h2 oder h3. # Selektoren: Klasse +![bg right:35%](./assets/demos/css-selector-class.png) + ```html

Dieser Text ist wichtig.

Dieser nicht.

@@ -2040,6 +2046,8 @@ Eine Klasse kann auf beliebig viele Elemente angewendet werden. Ein Element kann # Selektoren: ID +![bg right:35%](./assets/demos/css-selector-id.png) + ```html ``` @@ -2069,6 +2077,8 @@ In der Praxis: Klassen sind meist besser. IDs haben hohe Spezifität und sind un # Selektoren: Kombinationen +![bg right:35%](./assets/demos/css-combinators.png) + ```css /* Nachfahre (beliebig tief verschachtelt) */ article p { line-height: 1.6; } @@ -2105,6 +2115,8 @@ Element.Klasse: Das Element muss beides sein. "p.wichtig" heißt: nur p-Elemente # Spezifität: Welche Regel gewinnt? +![bg right:35%](./assets/demos/css-specificity.png) + | Selektor | Spezifität | |----------|------------| | Element (`p`) | 0,0,0,1 | @@ -2200,6 +2212,8 @@ Margin: Außenabstand. Zwischen diesem Element und anderen. # Box-Modell: CSS +![bg right:35%](./assets/demos/css-box-model.png) + ```css .box { width: 200px; @@ -2232,6 +2246,8 @@ Best Practice: Setzt das global für alle Elemente. # Farben +![bg right:35%](./assets/demos/css-colors.png) + ```css /* Keyword */ color: red; @@ -2300,6 +2316,8 @@ vw und vh sind Prozent des Viewports. 100vw ist die volle Bildschirmbreite. # Pseudo-Klassen +![bg right:35%](./assets/demos/css-pseudo-classes.png) + ```css /* Hover – Maus drüber */ a:hover { color: red; } @@ -2335,6 +2353,8 @@ Wichtig für interaktive Elemente und Zebra-Streifen in Tabellen. # Pseudo-Elemente +![bg right:35%](./assets/demos/css-pseudo-elements.png) + ```css /* Vor dem Inhalt einfügen */ .required::before { @@ -2371,6 +2391,8 @@ Doppelpunkt zur Unterscheidung von Pseudo-Klassen – aber einfacher Doppelpunkt # Responsive Design +![bg right:35%](./assets/demos/css-responsive.png) + ```css /* Mobile First: Basis-Styles */ .container { diff --git a/slides/223015c/assets/demos/css-anatomie-frame.html b/slides/223015c/assets/demos/css-anatomie-frame.html new file mode 100644 index 0000000..37cb024 --- /dev/null +++ b/slides/223015c/assets/demos/css-anatomie-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: css-anatomie + + + +
+
+
+ + file:///beispiel/anatomie.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/css-anatomie.html b/slides/223015c/assets/demos/css-anatomie.html new file mode 100644 index 0000000..d9b0699 --- /dev/null +++ b/slides/223015c/assets/demos/css-anatomie.html @@ -0,0 +1,15 @@ + + + + + CSS Anatomie + + + +

Dieser Absatz ist blau und 16 Pixel groß.

+

Alle p-Elemente werden gleich gestylt.

+ + diff --git a/slides/223015c/assets/demos/css-anatomie.png b/slides/223015c/assets/demos/css-anatomie.png new file mode 100644 index 0000000..4b0f9e2 Binary files /dev/null and b/slides/223015c/assets/demos/css-anatomie.png differ diff --git a/slides/223015c/assets/demos/css-box-model-frame.html b/slides/223015c/assets/demos/css-box-model-frame.html new file mode 100644 index 0000000..098918a --- /dev/null +++ b/slides/223015c/assets/demos/css-box-model-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: css-box-model + + + +
+
+
+ + file:///beispiel/box-model.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/css-box-model.html b/slides/223015c/assets/demos/css-box-model.html new file mode 100644 index 0000000..7b6a3c3 --- /dev/null +++ b/slides/223015c/assets/demos/css-box-model.html @@ -0,0 +1,58 @@ + + + + + Box-Modell + + + +
+
+
+
+
content
+
+
+
+
+ 
.box {
+  width: 140px;
+  padding: 18px;
+  border: 18px solid;
+  margin: 18px;
+}
+ + diff --git a/slides/223015c/assets/demos/css-box-model.png b/slides/223015c/assets/demos/css-box-model.png new file mode 100644 index 0000000..3bec062 Binary files /dev/null and b/slides/223015c/assets/demos/css-box-model.png differ diff --git a/slides/223015c/assets/demos/css-colors-frame.html b/slides/223015c/assets/demos/css-colors-frame.html new file mode 100644 index 0000000..da123ff --- /dev/null +++ b/slides/223015c/assets/demos/css-colors-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: css-colors + + + +
+
+
+ + file:///beispiel/colors.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/css-colors.html b/slides/223015c/assets/demos/css-colors.html new file mode 100644 index 0000000..e115f3c --- /dev/null +++ b/slides/223015c/assets/demos/css-colors.html @@ -0,0 +1,21 @@ + + + + + Farben + + + +
color: red;
+
color: rebeccapurple;
+
#FF0000
+
rgb(255, 0, 0)
+
rgba(255, 0, 0, 0.5)
+
hsl(0, 100%, 50%)
+ + diff --git a/slides/223015c/assets/demos/css-colors.png b/slides/223015c/assets/demos/css-colors.png new file mode 100644 index 0000000..12c1be8 Binary files /dev/null and b/slides/223015c/assets/demos/css-colors.png differ diff --git a/slides/223015c/assets/demos/css-combinators-frame.html b/slides/223015c/assets/demos/css-combinators-frame.html new file mode 100644 index 0000000..e722e42 --- /dev/null +++ b/slides/223015c/assets/demos/css-combinators-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: css-combinators + + + +
+
+
+ + file:///beispiel/combinators.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/css-combinators.html b/slides/223015c/assets/demos/css-combinators.html new file mode 100644 index 0000000..80fdb7c --- /dev/null +++ b/slides/223015c/assets/demos/css-combinators.html @@ -0,0 +1,25 @@ + + + + + Kombinatoren + + + + +
+

Artikel-Überschrift

+

Direkt nach h2 (größer, grün).

+

Normaler Absatz im article (gelb).

+

Wichtig (rot).

+
+ + diff --git a/slides/223015c/assets/demos/css-combinators.png b/slides/223015c/assets/demos/css-combinators.png new file mode 100644 index 0000000..1f85dfe Binary files /dev/null and b/slides/223015c/assets/demos/css-combinators.png differ diff --git a/slides/223015c/assets/demos/css-pseudo-classes-frame.html b/slides/223015c/assets/demos/css-pseudo-classes-frame.html new file mode 100644 index 0000000..21f0a40 --- /dev/null +++ b/slides/223015c/assets/demos/css-pseudo-classes-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: css-pseudo-classes + + + +
+
+
+ + file:///beispiel/pseudo-classes.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/css-pseudo-classes.html b/slides/223015c/assets/demos/css-pseudo-classes.html new file mode 100644 index 0000000..8c9648b --- /dev/null +++ b/slides/223015c/assets/demos/css-pseudo-classes.html @@ -0,0 +1,37 @@ + + + + + Pseudo-Klassen + + + +

:hover / :visited

+ Link mit Hover · + Besuchter Link + +

:focus

+ + +

:first-child, :nth-child(odd)

+ + + diff --git a/slides/223015c/assets/demos/css-pseudo-classes.png b/slides/223015c/assets/demos/css-pseudo-classes.png new file mode 100644 index 0000000..e6b11e3 Binary files /dev/null and b/slides/223015c/assets/demos/css-pseudo-classes.png differ diff --git a/slides/223015c/assets/demos/css-pseudo-elements-frame.html b/slides/223015c/assets/demos/css-pseudo-elements-frame.html new file mode 100644 index 0000000..8e87ee4 --- /dev/null +++ b/slides/223015c/assets/demos/css-pseudo-elements-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: css-pseudo-elements + + + +
+
+
+ + file:///beispiel/pseudo-elements.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/css-pseudo-elements.html b/slides/223015c/assets/demos/css-pseudo-elements.html new file mode 100644 index 0000000..22d5c26 --- /dev/null +++ b/slides/223015c/assets/demos/css-pseudo-elements.html @@ -0,0 +1,33 @@ + + + + + Pseudo-Elemente + + + +

::before (Pflichtfeld-Sternchen)

+ + + +

::first-letter (Initial-Buchstabe)

+

Lorem ipsum dolor sit amet. Der erste Buchstabe wird per CSS hervorgehoben – kein extra HTML nötig.

+ + diff --git a/slides/223015c/assets/demos/css-pseudo-elements.png b/slides/223015c/assets/demos/css-pseudo-elements.png new file mode 100644 index 0000000..fcb74b4 Binary files /dev/null and b/slides/223015c/assets/demos/css-pseudo-elements.png differ diff --git a/slides/223015c/assets/demos/css-responsive-container.html b/slides/223015c/assets/demos/css-responsive-container.html new file mode 100644 index 0000000..84a3d81 --- /dev/null +++ b/slides/223015c/assets/demos/css-responsive-container.html @@ -0,0 +1,30 @@ + + + + + Responsive Container + + + +
+ + diff --git a/slides/223015c/assets/demos/css-responsive-frame.html b/slides/223015c/assets/demos/css-responsive-frame.html new file mode 100644 index 0000000..12e7f65 --- /dev/null +++ b/slides/223015c/assets/demos/css-responsive-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: css-responsive + + + +
+
+
+ + file:///beispiel/responsive.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/css-responsive.html b/slides/223015c/assets/demos/css-responsive.html new file mode 100644 index 0000000..1a70f10 --- /dev/null +++ b/slides/223015c/assets/demos/css-responsive.html @@ -0,0 +1,45 @@ + + + + + Responsive Design – 3 Viewports + + + +
+
Mobile @ 360px
+
+
+
+
Tablet @ 800px
+
+
+
+
Desktop @ 1100px
+
+
+ + diff --git a/slides/223015c/assets/demos/css-responsive.png b/slides/223015c/assets/demos/css-responsive.png new file mode 100644 index 0000000..a260766 Binary files /dev/null and b/slides/223015c/assets/demos/css-responsive.png differ diff --git a/slides/223015c/assets/demos/css-selector-class-frame.html b/slides/223015c/assets/demos/css-selector-class-frame.html new file mode 100644 index 0000000..d712be0 --- /dev/null +++ b/slides/223015c/assets/demos/css-selector-class-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: css-selector-class + + + +
+
+
+ + file:///beispiel/selector-class.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/css-selector-class.html b/slides/223015c/assets/demos/css-selector-class.html new file mode 100644 index 0000000..6152509 --- /dev/null +++ b/slides/223015c/assets/demos/css-selector-class.html @@ -0,0 +1,15 @@ + + + + + Klassen-Selektor + + + +

Dieser Text ist wichtig.

+

Dieser nicht.

+ + diff --git a/slides/223015c/assets/demos/css-selector-class.png b/slides/223015c/assets/demos/css-selector-class.png new file mode 100644 index 0000000..86703ef Binary files /dev/null and b/slides/223015c/assets/demos/css-selector-class.png differ diff --git a/slides/223015c/assets/demos/css-selector-element-frame.html b/slides/223015c/assets/demos/css-selector-element-frame.html new file mode 100644 index 0000000..ac7e26c --- /dev/null +++ b/slides/223015c/assets/demos/css-selector-element-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: css-selector-element + + + +
+
+
+ + file:///beispiel/selector-element.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/css-selector-element.html b/slides/223015c/assets/demos/css-selector-element.html new file mode 100644 index 0000000..1c641c7 --- /dev/null +++ b/slides/223015c/assets/demos/css-selector-element.html @@ -0,0 +1,18 @@ + + + + + Element-Selektor + + + +

Überschrift (sans-serif)

+

Absatz: grau, Georgia (serif).

+

Untertitel (sans-serif)

+

Noch ein grauer Absatz.

+ + diff --git a/slides/223015c/assets/demos/css-selector-element.png b/slides/223015c/assets/demos/css-selector-element.png new file mode 100644 index 0000000..d0e310e Binary files /dev/null and b/slides/223015c/assets/demos/css-selector-element.png differ diff --git a/slides/223015c/assets/demos/css-selector-id-frame.html b/slides/223015c/assets/demos/css-selector-id-frame.html new file mode 100644 index 0000000..e3d8c80 --- /dev/null +++ b/slides/223015c/assets/demos/css-selector-id-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: css-selector-id + + + +
+
+
+ + file:///beispiel/selector-id.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/css-selector-id.html b/slides/223015c/assets/demos/css-selector-id.html new file mode 100644 index 0000000..4c29cca --- /dev/null +++ b/slides/223015c/assets/demos/css-selector-id.html @@ -0,0 +1,24 @@ + + + + + ID-Selektor + + + + +

Rest der Seite.

+ + diff --git a/slides/223015c/assets/demos/css-selector-id.png b/slides/223015c/assets/demos/css-selector-id.png new file mode 100644 index 0000000..23913db Binary files /dev/null and b/slides/223015c/assets/demos/css-selector-id.png differ diff --git a/slides/223015c/assets/demos/css-specificity-frame.html b/slides/223015c/assets/demos/css-specificity-frame.html new file mode 100644 index 0000000..d5d2eb2 --- /dev/null +++ b/slides/223015c/assets/demos/css-specificity-frame.html @@ -0,0 +1,34 @@ + + + + +Preview: css-specificity + + + +
+
+
+ + file:///beispiel/specificity.html +
+ +
+
+ + diff --git a/slides/223015c/assets/demos/css-specificity.html b/slides/223015c/assets/demos/css-specificity.html new file mode 100644 index 0000000..1175d15 --- /dev/null +++ b/slides/223015c/assets/demos/css-specificity.html @@ -0,0 +1,30 @@ + + + + + Spezifität + + + +
+

Nur p: blau

+ 0,0,0,1 +
+
+

Nur .text: grün schlägt p

+ 0,0,1,0 > 0,0,0,1 +
+
+

ID #intro: rot schlägt alles

+ 0,1,0,0 > 0,0,1,0 +
+ + diff --git a/slides/223015c/assets/demos/css-specificity.png b/slides/223015c/assets/demos/css-specificity.png new file mode 100644 index 0000000..4119bf5 Binary files /dev/null and b/slides/223015c/assets/demos/css-specificity.png differ