dhbw: neuer kurs technik I — 4 kapitel + demo assets

slides/dhbw/02_css_extended.md

@@ -0,0 +1,266 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Web Engineering – DHBW Stuttgart"
+footer: "Michael Czechowski – SoSe 2025"
+---
+
+<style>
+:root {
+  --color-foreground: #1a1a2e;
+  --color-highlight: #005f8a;
+  --color-dimmed: #4a6a7a;
+}
+section.invert {
+  --color-foreground: #fff;
+}
+section {
+  font-size: 1.7rem;
+}
+h1 {
+  color: #005f8a;
+}
+section.invert h1 {
+  color: #fff;
+}
+pre {
+  background: #0f1e2e;
+  color: #00b4d8;
+  border-radius: 8px;
+  border-left: 3px solid #005f8a;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+code {
+  background: #1a3a4a;
+  color: #00b4d8;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+a {
+  color: var(--color-highlight);
+}
+</style>
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #001520 -->
+
+# CSS: Extended
+
+---
+
+# CSS Selectors – Tag, Class, ID, Attribute
+
+```css
+/* Tag */
+p { color: #333; }
+
+/* Class */
+.button { background: blue; }
+
+/* ID */
+#header { height: 60px; }
+
+/* Attribute */
+input[type="text"] { border: 1px solid #ccc; }
+input[disabled] { background: #eee; }
+```
+
+---
+
+# CSS Selectors – Attribut-Selektoren
+
+```css
+/* presence */
+[disabled] { opacity: 0.5; }
+
+/* exact value */
+[type="email"] { border-color: blue; }
+
+/* contains word */
+[class~="btn"] { cursor: pointer; }
+
+/* starts with */
+[href^="https"] { color: green; }
+
+/* ends with */
+[src$=".png"] { border: 1px solid #ccc; }
+
+/* contains substring */
+[class*="icon"] { padding-left: 20px; }
+```
+
+---
+
+# CSS Combinators
+
+```css
+/* Child (direkt) */
+div > p { margin: 0; }
+
+/* Descendant (Nachkomme) */
+div p { margin: 0; }
+
+/* Next Sibling */
+h1 + p { font-size: 1.2em; }
+
+/* Subsequent Sibling */
+h1 ~ p { color: #666; }
+
+/* Selector List */
+h1, h2, h3 { font-weight: bold; }
+```
+
+---
+
+# Pseudo Classes
+
+```css
+/* User Interaction */
+:hover { color: red; }
+:active { background: blue; }
+:focus { outline: 2px solid orange; }
+
+/* Structure */
+:first-child { margin-left: 0; }
+:last-child { margin-right: 0; }
+:nth-child(odd) { background: #f9f9f9; }
+
+/* Links */
+:visited { color: purple; }
+:link { color: blue; }
+```
+
+---
+
+# Pseudo Classes – More
+
+```css
+/* Form States */
+:valid { border-color: green; }
+:invalid { border-color: red; }
+:placeholder-shown { color: #999; }
+
+/* Content */
+:before { content: "→ "; }
+:after { content: " [Wichtig]"; }
+:first-letter { font-size: 2em; }
+:first-line { font-weight: bold; }
+
+/* NOT */
+:not(.disabled) { pointer-events: auto; }
+:not(:last-child) { border-bottom: 1px solid #ccc; }
+```
+
+---
+
+# Shorthand Properties
+
+```css
+/* margin: top right bottom left */
+margin: 10px 20px 10px 20px;
+
+/* centering */
+margin: 0 auto;
+
+/* padding same */
+padding: 20px;
+
+/* border: width style color */
+border: 1px solid #333;
+
+/* background: color image position/size repeat */
+background: #fff url(logo.png) 0 0 no-repeat;
+
+/* font: style variant weight size/line-height family */
+font: italic normal bold 16px/1.5 Arial, sans-serif;
+```
+
+---
+
+# Flexbox Shorthands
+
+```css
+/* flex: grow shrink basis */
+flex: 1 0 auto;
+
+/* place-items: align-items justify-items */
+place-items: center stretch;
+
+/* place-content: align-content justify-content */
+place-content: space-between center;
+
+/* gap: row-gap column-gap */
+gap: 20px 40px;
+```
+
+---
+
+# CSS Custom Properties (Variables)
+
+```css
+:root {
+  --primary-color: #005f8a;
+  --spacing: 20px;
+  --radius: 8px;
+}
+
+.button {
+  background: var(--primary-color);
+  padding: var(--spacing);
+  border-radius: var(--radius);
+}
+```
+
+---
+
+# CSS Functions
+
+```css
+/* calc */
+width: calc(100% - 40px);
+
+/* min/max/clamp */
+width: min(100%, 600px);
+font-size: clamp(14px, 2vw, 20px);
+
+/* var with fallback */
+color: var(--text-color, #333);
+
+/* rgb/rgba/hsl/hsla */
+color: hsl(200, 100%, 50%);
+background: rgba(0, 0, 0, 0.5);
+```
+
+---
+
+# Transition & Animation
+
+```css
+/* transition: property duration timing-function */
+transition: all 0.3s ease-in-out;
+transition: background 0.2s, transform 0.1s;
+
+/* animation */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.fade-in {
+  animation: fadeIn 0.5s ease-out;
+}
+```
+
+---
+
+# Fragen?
+
+1. Was bedeutet `div > p` vs `div p`?
+2. Wann nutzt du `nth-child(even)`?
+3. Warum `--variable` statt direkt `#fff`?