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;
|
||||
}
|
||||
section {
|
||||
font-size: 1.7rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
h1 {
|
||||
color: #005f8a;
|
||||
@@ -50,26 +50,34 @@ a {
|
||||
<!-- _header: '' -->
|
||||
<!-- _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
|
||||
/* Tag */
|
||||
p { color: #333; }
|
||||
Aufbauend auf den Grundlagen aus Sitzung 1.
|
||||
|
||||
/* Class */
|
||||
.button { background: blue; }
|
||||
1. Attribut-Selektoren
|
||||
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 */
|
||||
input[type="text"] { border: 1px solid #ccc; }
|
||||
input[disabled] { background: #eee; }
|
||||
```
|
||||
<!-- _class: invert -->
|
||||
<!-- _backgroundColor: #001520 -->
|
||||
|
||||
# CSS: Extended
|
||||
|
||||
---
|
||||
|
||||
@@ -118,27 +126,7 @@ 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
|
||||
# Pseudo Classes – Erweitert
|
||||
|
||||
```css
|
||||
/* 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
|
||||
|
||||
| Framework | Stil |
|
||||
@@ -308,137 +274,3 @@ button[type="submit"] /* 0,0,1,1 */
|
||||
- JIT-Compiler erzeugt nur genutzte Klassen
|
||||
- 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