dhbw 02_css_extended: native html-block + basic-selektoren + basic-pseudoclasses + specificity raus (jetzt in 01), einheitliche cover (sitzung 2 — html & css frameworks), font 1.7→1.4rem, fragen-slide raus
This commit is contained in:
+23
-191
@@ -17,7 +17,7 @@ section.invert {
|
|||||||
--color-foreground: #fff;
|
--color-foreground: #fff;
|
||||||
}
|
}
|
||||||
section {
|
section {
|
||||||
font-size: 1.7rem;
|
font-size: 1.4rem;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
color: #005f8a;
|
color: #005f8a;
|
||||||
@@ -50,26 +50,34 @@ a {
|
|||||||
<!-- _header: '' -->
|
<!-- _header: '' -->
|
||||||
<!-- _backgroundColor: #001520 -->
|
<!-- _backgroundColor: #001520 -->
|
||||||
|
|
||||||
# CSS: Extended
|
# Web Engineering
|
||||||
|
|
||||||
|
**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
|
||||||
|
|
||||||
|
**Sommersemester 2026** · Sitzung 2 — HTML & CSS (Frameworks)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# CSS Selectors – Tag, Class, ID, Attribute
|
# Inhalt
|
||||||
|
|
||||||
```css
|
Aufbauend auf den Grundlagen aus Sitzung 1.
|
||||||
/* Tag */
|
|
||||||
p { color: #333; }
|
|
||||||
|
|
||||||
/* Class */
|
1. Attribut-Selektoren
|
||||||
.button { background: blue; }
|
2. Combinators (vertieft)
|
||||||
|
3. Pseudo-Klassen — erweitert
|
||||||
|
4. Shorthand Properties
|
||||||
|
5. Flexbox-Shorthands
|
||||||
|
6. Custom Properties (Variables)
|
||||||
|
7. CSS Functions (`calc`, `clamp`, ...)
|
||||||
|
8. Transition & Animation
|
||||||
|
9. CSS Frameworks (Tailwind & Co.)
|
||||||
|
|
||||||
/* ID */
|
---
|
||||||
#header { height: 60px; }
|
|
||||||
|
|
||||||
/* Attribute */
|
<!-- _class: invert -->
|
||||||
input[type="text"] { border: 1px solid #ccc; }
|
<!-- _backgroundColor: #001520 -->
|
||||||
input[disabled] { background: #eee; }
|
|
||||||
```
|
# CSS: Extended
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -118,27 +126,7 @@ h1, h2, h3 { font-weight: bold; }
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Pseudo Classes
|
# Pseudo Classes – Erweitert
|
||||||
|
|
||||||
```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
|
```css
|
||||||
/* Form States */
|
/* Form States */
|
||||||
@@ -259,28 +247,6 @@ transition: background 0.2s, transform 0.1s;
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# CSS Specificity
|
|
||||||
|
|
||||||
Welcher Selektor gewinnt? **Punktezählung:**
|
|
||||||
|
|
||||||
```
|
|
||||||
ID – 0,1,0,0
|
|
||||||
Class / Attr / Pseudo-Class – 0,0,1,0
|
|
||||||
Tag / Pseudo-Element – 0,0,0,1
|
|
||||||
Inline Style – 1,0,0,0
|
|
||||||
!important – setzt alles außer Kraft
|
|
||||||
```
|
|
||||||
|
|
||||||
```css
|
|
||||||
#main .btn:hover /* 0,1,2,0 */
|
|
||||||
.btn.primary /* 0,0,2,0 */
|
|
||||||
button[type="submit"] /* 0,0,1,1 */
|
|
||||||
```
|
|
||||||
|
|
||||||
→ Faustregel: möglichst flach. `!important` vermeiden.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# CSS Frameworks
|
# CSS Frameworks
|
||||||
|
|
||||||
| Framework | Stil |
|
| Framework | Stil |
|
||||||
@@ -308,137 +274,3 @@ button[type="submit"] /* 0,0,1,1 */
|
|||||||
- JIT-Compiler erzeugt nur genutzte Klassen
|
- JIT-Compiler erzeugt nur genutzte Klassen
|
||||||
- Design-System via `tailwind.config.js`
|
- Design-System via `tailwind.config.js`
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _class: invert -->
|
|
||||||
<!-- _backgroundColor: #001520 -->
|
|
||||||
|
|
||||||
# No JavaScript, No Cry
|
|
||||||
|
|
||||||
## Native HTML statt JS-Komponenten
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# Native HTML – Was früher JS brauchte
|
|
||||||
|
|
||||||
| Komponente | Native Alternative |
|
|
||||||
|------------|--------------------|
|
|
||||||
| Accordion / Collapsible | `<details>` + `<summary>` |
|
|
||||||
| Modal / Dialog | `<dialog>` |
|
|
||||||
| Date Picker | `<input type="date">` |
|
|
||||||
| Time Picker | `<input type="time">` |
|
|
||||||
| Color Picker | `<input type="color">` |
|
|
||||||
| Range Slider | `<input type="range">` |
|
|
||||||
| Progress Bar | `<progress>` |
|
|
||||||
| Auto-Complete | `<datalist>` |
|
|
||||||
|
|
||||||
→ Baseline Widely Available (Chrome, Firefox, Safari, Edge).
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# `<details>` + `<summary>`
|
|
||||||
|
|
||||||
```html
|
|
||||||
<details>
|
|
||||||
<summary>Mehr Infos</summary>
|
|
||||||
<p>Hier steht der ausklappbare Inhalt.</p>
|
|
||||||
</details>
|
|
||||||
```
|
|
||||||
|
|
||||||
- Keine Zeile JS
|
|
||||||
- Tastatur-zugänglich
|
|
||||||
- Animierbar mit `::details-content` (CSS only)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# `<dialog>` – Native Modal
|
|
||||||
|
|
||||||
```html
|
|
||||||
<dialog id="myDialog">
|
|
||||||
<form method="dialog">
|
|
||||||
<p>Wirklich löschen?</p>
|
|
||||||
<button value="cancel">Abbrechen</button>
|
|
||||||
<button value="ok">OK</button>
|
|
||||||
</form>
|
|
||||||
</dialog>
|
|
||||||
|
|
||||||
<button onclick="myDialog.showModal()">Öffnen</button>
|
|
||||||
```
|
|
||||||
|
|
||||||
- `showModal()` blockt Hintergrund + ESC schließt
|
|
||||||
- Backdrop via `dialog::backdrop`
|
|
||||||
- Form mit `method="dialog"` schließt + liefert `returnValue`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# `<input type="date">` & Co.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<input type="date" min="2026-01-01" max="2026-12-31">
|
|
||||||
<input type="time" step="60">
|
|
||||||
<input type="color" value="#005f8a">
|
|
||||||
<input type="range" min="0" max="100" step="5" value="50">
|
|
||||||
<input type="number" min="1" max="300">
|
|
||||||
```
|
|
||||||
|
|
||||||
- Plattform-native UI (Touch-Datepicker auf Mobile)
|
|
||||||
- Validierung "for free"
|
|
||||||
- Locale-Awareness vom Browser
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# `<progress>` – Native Progress Bar
|
|
||||||
|
|
||||||
```html
|
|
||||||
<progress value="70" max="100">70%</progress>
|
|
||||||
|
|
||||||
<!-- indeterminate -->
|
|
||||||
<progress></progress>
|
|
||||||
```
|
|
||||||
|
|
||||||
```css
|
|
||||||
progress {
|
|
||||||
width: 100%;
|
|
||||||
height: 0.5rem;
|
|
||||||
}
|
|
||||||
progress::-webkit-progress-bar { background: #eee; }
|
|
||||||
progress::-webkit-progress-value { background: #005f8a; }
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# Form Validation – Native
|
|
||||||
|
|
||||||
```html
|
|
||||||
<form>
|
|
||||||
<input type="email" required
|
|
||||||
pattern=".+@dhbw\.de"
|
|
||||||
title="Bitte DHBW-Mail eingeben">
|
|
||||||
<input type="password" minlength="8" required>
|
|
||||||
<button>Login</button>
|
|
||||||
</form>
|
|
||||||
```
|
|
||||||
|
|
||||||
- `required`, `min`, `max`, `pattern`, `step`
|
|
||||||
- `:invalid` / `:valid` CSS-Pseudoklassen
|
|
||||||
- `form.checkValidity()` / `input.setCustomValidity()`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# Wann doch JS?
|
|
||||||
|
|
||||||
- Komplexe Interaktion über mehrere Komponenten
|
|
||||||
- State, der nicht ins DOM gehört
|
|
||||||
- Async / Server-Sync
|
|
||||||
- Animationen mit komplexer Logik
|
|
||||||
- Cross-Browser-Polyfills (selten heute)
|
|
||||||
|
|
||||||
→ **Default: HTML/CSS. JS nur wenn nötig.**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# Fragen?
|
|
||||||
|
|
||||||
1. Was bedeutet `div > p` vs `div p`?
|
|
||||||
2. Wann nutzt du `nth-child(even)`?
|
|
||||||
3. Warum `--variable` statt direkt `#fff`?
|
|
||||||
Reference in New Issue
Block a user