add css demos for 223015c chapter 2: selectors, specificity, box-model, colors, pseudo, responsive
This commit is contained in:
@@ -1889,6 +1889,8 @@ HTML definiert die Struktur – was ist auf der Seite. CSS definiert das Aussehe
|
|||||||
**C**ascading **S**tyle **S**heets
|
**C**ascading **S**tyle **S**heets
|
||||||
|
|
||||||
```css
|
```css
|
||||||
|
p {
|
||||||
|
color: blue;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
@@ -1984,6 +1986,8 @@ Semikolon nach jedem Paar. Doppelpunkt zwischen Property und Value.
|
|||||||
```css
|
```css
|
||||||
/* Alle <p>-Elemente */
|
/* Alle <p>-Elemente */
|
||||||
p {
|
p {
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
/* Mehrere Elemente gleichzeitig */
|
/* Mehrere Elemente gleichzeitig */
|
||||||
h1, h2, h3 {
|
h1, h2, h3 {
|
||||||
@@ -2012,6 +2016,8 @@ Komma bedeutet "oder" – h1 oder h2 oder h3.
|
|||||||
```html
|
```html
|
||||||
<p class="wichtig">Dieser Text ist wichtig.</p>
|
<p class="wichtig">Dieser Text ist wichtig.</p>
|
||||||
<p>Dieser nicht.</p>
|
<p>Dieser nicht.</p>
|
||||||
|
```
|
||||||
|
|
||||||
```css
|
```css
|
||||||
.wichtig {
|
.wichtig {
|
||||||
color: red;
|
color: red;
|
||||||
@@ -2040,6 +2046,8 @@ Eine Klasse kann auf beliebig viele Elemente angewendet werden. Ein Element kann
|
|||||||
```html
|
```html
|
||||||
<nav id="hauptnavigation">...</nav>
|
<nav id="hauptnavigation">...</nav>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
#hauptnavigation {
|
#hauptnavigation {
|
||||||
background: #333;
|
background: #333;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
@@ -2069,6 +2077,8 @@ In der Praxis: Klassen sind meist besser. IDs haben hohe Spezifität und sind un
|
|||||||
```css
|
```css
|
||||||
/* Nachfahre (beliebig tief verschachtelt) */
|
/* Nachfahre (beliebig tief verschachtelt) */
|
||||||
article p { line-height: 1.6; }
|
article p { line-height: 1.6; }
|
||||||
|
|
||||||
|
/* Direktes Kind (nur eine Ebene) */
|
||||||
nav > a { text-decoration: none; }
|
nav > a { text-decoration: none; }
|
||||||
|
|
||||||
/* Nächstes Geschwister */
|
/* Nächstes Geschwister */
|
||||||
@@ -2105,6 +2115,8 @@ Element.Klasse: Das Element muss beides sein. "p.wichtig" heißt: nur p-Elemente
|
|||||||
| Selektor | Spezifität |
|
| Selektor | Spezifität |
|
||||||
|----------|------------|
|
|----------|------------|
|
||||||
| Element (`p`) | 0,0,0,1 |
|
| Element (`p`) | 0,0,0,1 |
|
||||||
|
| Klasse (`.wichtig`) | 0,0,1,0 |
|
||||||
|
| ID (`#header`) | 0,1,0,0 |
|
||||||
| Inline (`style="..."`) | 1,0,0,0 |
|
| Inline (`style="..."`) | 1,0,0,0 |
|
||||||
|
|
||||||
```css
|
```css
|
||||||
@@ -2200,6 +2212,8 @@ Margin: Außenabstand. Zwischen diesem Element und anderen.
|
|||||||
```css
|
```css
|
||||||
.box {
|
.box {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
height: 100px;
|
||||||
|
padding: 20px;
|
||||||
border: 2px solid black;
|
border: 2px solid black;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
@@ -2232,6 +2246,8 @@ Best Practice: Setzt das global für alle Elemente.
|
|||||||
```css
|
```css
|
||||||
/* Keyword */
|
/* Keyword */
|
||||||
color: red;
|
color: red;
|
||||||
|
color: rebeccapurple;
|
||||||
|
|
||||||
/* Hex */
|
/* Hex */
|
||||||
color: #FF0000;
|
color: #FF0000;
|
||||||
color: #F00;
|
color: #F00;
|
||||||
@@ -2300,6 +2316,8 @@ vw und vh sind Prozent des Viewports. 100vw ist die volle Bildschirmbreite.
|
|||||||
```css
|
```css
|
||||||
/* Hover – Maus drüber */
|
/* Hover – Maus drüber */
|
||||||
a:hover { color: red; }
|
a:hover { color: red; }
|
||||||
|
|
||||||
|
/* Besuchter Link */
|
||||||
a:visited { color: purple; }
|
a:visited { color: purple; }
|
||||||
|
|
||||||
/* Fokussiertes Element */
|
/* Fokussiertes Element */
|
||||||
@@ -2335,6 +2353,8 @@ Wichtig für interaktive Elemente und Zebra-Streifen in Tabellen.
|
|||||||
```css
|
```css
|
||||||
/* Vor dem Inhalt einfügen */
|
/* Vor dem Inhalt einfügen */
|
||||||
.required::before {
|
.required::before {
|
||||||
|
content: "* ";
|
||||||
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Erster Buchstabe */
|
/* Erster Buchstabe */
|
||||||
@@ -2371,6 +2391,8 @@ Doppelpunkt zur Unterscheidung von Pseudo-Klassen – aber einfacher Doppelpunkt
|
|||||||
```css
|
```css
|
||||||
/* Mobile First: Basis-Styles */
|
/* Mobile First: Basis-Styles */
|
||||||
.container {
|
.container {
|
||||||
|
padding: 1rem;
|
||||||
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ab 768px (Tablet): Anpassungen */
|
/* Ab 768px (Tablet): Anpassungen */
|
||||||
|
|||||||
34
slides/223015c/assets/demos/css-anatomie-frame.html
Normal file
34
slides/223015c/assets/demos/css-anatomie-frame.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Preview: css-anatomie</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hl: #d63384;
|
||||||
|
--dark: #0f0f23;
|
||||||
|
--chrome: #1a1a2e;
|
||||||
|
--muted: #4a4a6a;
|
||||||
|
}
|
||||||
|
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||||
|
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||||
|
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||||
|
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||||
|
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||||
|
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||||
|
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="browser">
|
||||||
|
<div class="window">
|
||||||
|
<div class="chrome">
|
||||||
|
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||||
|
<span class="url">file:///beispiel/anatomie.html</span>
|
||||||
|
</div>
|
||||||
|
<iframe src="./css-anatomie.html"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
slides/223015c/assets/demos/css-anatomie.html
Normal file
15
slides/223015c/assets/demos/css-anatomie.html
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>CSS Anatomie</title>
|
||||||
|
<style>
|
||||||
|
body { padding: 1.2rem; font-family: system-ui, sans-serif; }
|
||||||
|
p { color: blue; font-size: 16px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Dieser Absatz ist blau und 16 Pixel groß.</p>
|
||||||
|
<p>Alle p-Elemente werden gleich gestylt.</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
slides/223015c/assets/demos/css-anatomie.png
Normal file
BIN
slides/223015c/assets/demos/css-anatomie.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
34
slides/223015c/assets/demos/css-box-model-frame.html
Normal file
34
slides/223015c/assets/demos/css-box-model-frame.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Preview: css-box-model</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hl: #d63384;
|
||||||
|
--dark: #0f0f23;
|
||||||
|
--chrome: #1a1a2e;
|
||||||
|
--muted: #4a4a6a;
|
||||||
|
}
|
||||||
|
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||||
|
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||||
|
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||||
|
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||||
|
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||||
|
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||||
|
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="browser">
|
||||||
|
<div class="window">
|
||||||
|
<div class="chrome">
|
||||||
|
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||||
|
<span class="url">file:///beispiel/box-model.html</span>
|
||||||
|
</div>
|
||||||
|
<iframe src="./css-box-model.html"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
58
slides/223015c/assets/demos/css-box-model.html
Normal file
58
slides/223015c/assets/demos/css-box-model.html
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Box-Modell</title>
|
||||||
|
<style>
|
||||||
|
body { padding: 1.2rem; font-family: system-ui, sans-serif; background: #fff; }
|
||||||
|
.box { display: inline-block; }
|
||||||
|
.layer {
|
||||||
|
padding-top: 22px;
|
||||||
|
padding-bottom: 18px;
|
||||||
|
padding-left: 18px;
|
||||||
|
padding-right: 18px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.layer::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 4px; left: 8px;
|
||||||
|
font-size: 0.75em;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.margin { background: #fde68a; }
|
||||||
|
.margin::before { content: "margin"; color: #92400e; }
|
||||||
|
.border { background: #fca5a5; }
|
||||||
|
.border::before { content: "border"; color: #991b1b; }
|
||||||
|
.padding { background: #86efac; }
|
||||||
|
.padding::before { content: "padding"; color: #166534; }
|
||||||
|
.content {
|
||||||
|
background: #93c5fd;
|
||||||
|
width: 140px;
|
||||||
|
height: 56px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #1e3a8a;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
pre { background: #f3f4f6; padding: 10px; border-radius: 4px; font-size: 0.85em; margin-top: 1rem; font-family: ui-monospace, monospace; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="box">
|
||||||
|
<div class="layer margin">
|
||||||
|
<div class="layer border">
|
||||||
|
<div class="layer padding">
|
||||||
|
<div class="content">content</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<pre>.box {
|
||||||
|
width: 140px;
|
||||||
|
padding: 18px;
|
||||||
|
border: 18px solid;
|
||||||
|
margin: 18px;
|
||||||
|
}</pre>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
slides/223015c/assets/demos/css-box-model.png
Normal file
BIN
slides/223015c/assets/demos/css-box-model.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
34
slides/223015c/assets/demos/css-colors-frame.html
Normal file
34
slides/223015c/assets/demos/css-colors-frame.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Preview: css-colors</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hl: #d63384;
|
||||||
|
--dark: #0f0f23;
|
||||||
|
--chrome: #1a1a2e;
|
||||||
|
--muted: #4a4a6a;
|
||||||
|
}
|
||||||
|
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||||
|
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||||
|
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||||
|
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||||
|
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||||
|
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||||
|
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="browser">
|
||||||
|
<div class="window">
|
||||||
|
<div class="chrome">
|
||||||
|
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||||
|
<span class="url">file:///beispiel/colors.html</span>
|
||||||
|
</div>
|
||||||
|
<iframe src="./css-colors.html"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
21
slides/223015c/assets/demos/css-colors.html
Normal file
21
slides/223015c/assets/demos/css-colors.html
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Farben</title>
|
||||||
|
<style>
|
||||||
|
body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
|
||||||
|
.swatch { display: flex; align-items: center; margin-bottom: 8px; }
|
||||||
|
.chip { width: 40px; height: 40px; border-radius: 4px; margin-right: 12px; border: 1px solid #e5e7eb; }
|
||||||
|
code { background: #f3f4f6; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 0.85em; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="swatch"><div class="chip" style="background: red;"></div><code>color: red;</code></div>
|
||||||
|
<div class="swatch"><div class="chip" style="background: rebeccapurple;"></div><code>color: rebeccapurple;</code></div>
|
||||||
|
<div class="swatch"><div class="chip" style="background: #FF0000;"></div><code>#FF0000</code></div>
|
||||||
|
<div class="swatch"><div class="chip" style="background: rgb(255, 0, 0);"></div><code>rgb(255, 0, 0)</code></div>
|
||||||
|
<div class="swatch"><div class="chip" style="background: rgba(255, 0, 0, 0.5);"></div><code>rgba(255, 0, 0, 0.5)</code></div>
|
||||||
|
<div class="swatch"><div class="chip" style="background: hsl(0, 100%, 50%);"></div><code>hsl(0, 100%, 50%)</code></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
slides/223015c/assets/demos/css-colors.png
Normal file
BIN
slides/223015c/assets/demos/css-colors.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
34
slides/223015c/assets/demos/css-combinators-frame.html
Normal file
34
slides/223015c/assets/demos/css-combinators-frame.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Preview: css-combinators</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hl: #d63384;
|
||||||
|
--dark: #0f0f23;
|
||||||
|
--chrome: #1a1a2e;
|
||||||
|
--muted: #4a4a6a;
|
||||||
|
}
|
||||||
|
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||||
|
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||||
|
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||||
|
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||||
|
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||||
|
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||||
|
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="browser">
|
||||||
|
<div class="window">
|
||||||
|
<div class="chrome">
|
||||||
|
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||||
|
<span class="url">file:///beispiel/combinators.html</span>
|
||||||
|
</div>
|
||||||
|
<iframe src="./css-combinators.html"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
25
slides/223015c/assets/demos/css-combinators.html
Normal file
25
slides/223015c/assets/demos/css-combinators.html
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Kombinatoren</title>
|
||||||
|
<style>
|
||||||
|
body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
|
||||||
|
article p { line-height: 1.6; background: #fef3c7; padding: 4px; }
|
||||||
|
nav > a { text-decoration: none; color: #d63384; margin-right: 10px; font-weight: 600; }
|
||||||
|
h2 + p { font-size: 1.2em; color: #065f46; }
|
||||||
|
p.wichtig { color: red; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav>
|
||||||
|
<a href="#">Link</a><a href="#">Link</a>
|
||||||
|
</nav>
|
||||||
|
<article>
|
||||||
|
<h2>Artikel-Überschrift</h2>
|
||||||
|
<p>Direkt nach h2 (größer, grün).</p>
|
||||||
|
<p>Normaler Absatz im article (gelb).</p>
|
||||||
|
<p class="wichtig">Wichtig (rot).</p>
|
||||||
|
</article>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
slides/223015c/assets/demos/css-combinators.png
Normal file
BIN
slides/223015c/assets/demos/css-combinators.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
34
slides/223015c/assets/demos/css-pseudo-classes-frame.html
Normal file
34
slides/223015c/assets/demos/css-pseudo-classes-frame.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Preview: css-pseudo-classes</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hl: #d63384;
|
||||||
|
--dark: #0f0f23;
|
||||||
|
--chrome: #1a1a2e;
|
||||||
|
--muted: #4a4a6a;
|
||||||
|
}
|
||||||
|
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||||
|
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||||
|
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||||
|
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||||
|
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||||
|
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||||
|
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="browser">
|
||||||
|
<div class="window">
|
||||||
|
<div class="chrome">
|
||||||
|
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||||
|
<span class="url">file:///beispiel/pseudo-classes.html</span>
|
||||||
|
</div>
|
||||||
|
<iframe src="./css-pseudo-classes.html"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
37
slides/223015c/assets/demos/css-pseudo-classes.html
Normal file
37
slides/223015c/assets/demos/css-pseudo-classes.html
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Pseudo-Klassen</title>
|
||||||
|
<style>
|
||||||
|
body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
|
||||||
|
a { color: #2563eb; }
|
||||||
|
a:hover, a.is-hovered { color: red; text-decoration: underline; }
|
||||||
|
a:visited, a.is-visited { color: purple; }
|
||||||
|
input:focus, input.is-focused { border-color: blue; outline: 2px solid blue; }
|
||||||
|
input { padding: 4px 8px; border: 1px solid #9ca3af; border-radius: 3px; }
|
||||||
|
ul { list-style: none; padding: 0; }
|
||||||
|
li { padding: 6px 10px; }
|
||||||
|
li:first-child, li.is-first { font-weight: bold; }
|
||||||
|
li:nth-child(odd), li.is-odd { background: #eee; }
|
||||||
|
h3 { margin: 0.6rem 0 0.3rem; font-size: 0.95rem; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h3>:hover / :visited</h3>
|
||||||
|
<a href="#" class="is-hovered">Link mit Hover</a> ·
|
||||||
|
<a href="#" class="is-visited">Besuchter Link</a>
|
||||||
|
|
||||||
|
<h3>:focus</h3>
|
||||||
|
<input class="is-focused" value="fokussiert">
|
||||||
|
|
||||||
|
<h3>:first-child, :nth-child(odd)</h3>
|
||||||
|
<ul>
|
||||||
|
<li class="is-first is-odd">Erster (bold, zebra)</li>
|
||||||
|
<li>Zweiter</li>
|
||||||
|
<li class="is-odd">Dritter (zebra)</li>
|
||||||
|
<li>Vierter</li>
|
||||||
|
<li class="is-odd">Fünfter (zebra)</li>
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
slides/223015c/assets/demos/css-pseudo-classes.png
Normal file
BIN
slides/223015c/assets/demos/css-pseudo-classes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
34
slides/223015c/assets/demos/css-pseudo-elements-frame.html
Normal file
34
slides/223015c/assets/demos/css-pseudo-elements-frame.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Preview: css-pseudo-elements</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hl: #d63384;
|
||||||
|
--dark: #0f0f23;
|
||||||
|
--chrome: #1a1a2e;
|
||||||
|
--muted: #4a4a6a;
|
||||||
|
}
|
||||||
|
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||||
|
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||||
|
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||||
|
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||||
|
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||||
|
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||||
|
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="browser">
|
||||||
|
<div class="window">
|
||||||
|
<div class="chrome">
|
||||||
|
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||||
|
<span class="url">file:///beispiel/pseudo-elements.html</span>
|
||||||
|
</div>
|
||||||
|
<iframe src="./css-pseudo-elements.html"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
33
slides/223015c/assets/demos/css-pseudo-elements.html
Normal file
33
slides/223015c/assets/demos/css-pseudo-elements.html
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Pseudo-Elemente</title>
|
||||||
|
<style>
|
||||||
|
body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
|
||||||
|
.required::before {
|
||||||
|
content: "* ";
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
p.drop::first-letter {
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #d63384;
|
||||||
|
float: left;
|
||||||
|
line-height: 1;
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
label { display: block; margin-top: 10px; }
|
||||||
|
input { padding: 4px 8px; border: 1px solid #9ca3af; border-radius: 3px; margin-top: 3px; }
|
||||||
|
h3 { margin: 0.6rem 0 0.3rem; font-size: 0.95rem; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h3>::before (Pflichtfeld-Sternchen)</h3>
|
||||||
|
<label class="required">E-Mail-Adresse</label>
|
||||||
|
<input type="email">
|
||||||
|
|
||||||
|
<h3>::first-letter (Initial-Buchstabe)</h3>
|
||||||
|
<p class="drop">Lorem ipsum dolor sit amet. Der erste Buchstabe wird per CSS hervorgehoben – kein extra HTML nötig.</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
slides/223015c/assets/demos/css-pseudo-elements.png
Normal file
BIN
slides/223015c/assets/demos/css-pseudo-elements.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
30
slides/223015c/assets/demos/css-responsive-container.html
Normal file
30
slides/223015c/assets/demos/css-responsive-container.html
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Responsive Container</title>
|
||||||
|
<style>
|
||||||
|
body { padding: 0; margin: 0; font-family: system-ui, sans-serif; background: #fff; }
|
||||||
|
.container {
|
||||||
|
padding: 1rem;
|
||||||
|
background: white;
|
||||||
|
color: #111;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: 600;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
}
|
||||||
|
.container::before { content: "< 768px — weiß, padding 1rem"; }
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.container { padding: 2rem; background: red; color: white; border: none; }
|
||||||
|
.container::before { content: "≥ 768px — rot, padding 2rem"; }
|
||||||
|
}
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.container { background: green; }
|
||||||
|
.container::before { content: "≥ 1024px — grün"; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
34
slides/223015c/assets/demos/css-responsive-frame.html
Normal file
34
slides/223015c/assets/demos/css-responsive-frame.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Preview: css-responsive</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hl: #d63384;
|
||||||
|
--dark: #0f0f23;
|
||||||
|
--chrome: #1a1a2e;
|
||||||
|
--muted: #4a4a6a;
|
||||||
|
}
|
||||||
|
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||||
|
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||||
|
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||||
|
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||||
|
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||||
|
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||||
|
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="browser">
|
||||||
|
<div class="window">
|
||||||
|
<div class="chrome">
|
||||||
|
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||||
|
<span class="url">file:///beispiel/responsive.html</span>
|
||||||
|
</div>
|
||||||
|
<iframe src="./css-responsive.html"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
45
slides/223015c/assets/demos/css-responsive.html
Normal file
45
slides/223015c/assets/demos/css-responsive.html
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Responsive Design – 3 Viewports</title>
|
||||||
|
<style>
|
||||||
|
html, body { margin: 0; padding: 0; font-family: system-ui, sans-serif; background: #fff; }
|
||||||
|
body { padding: 1rem; }
|
||||||
|
.viewport {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
border: 1px solid #9ca3af;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.bar {
|
||||||
|
background: #e5e7eb;
|
||||||
|
padding: 4px 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #374151;
|
||||||
|
font-family: ui-monospace, monospace;
|
||||||
|
border-bottom: 1px solid #9ca3af;
|
||||||
|
}
|
||||||
|
iframe { display: block; width: 100%; border: 0; }
|
||||||
|
.vp-mobile iframe { width: 360px; }
|
||||||
|
.vp-tablet iframe { width: 800px; }
|
||||||
|
.vp-desktop iframe { width: 1100px; }
|
||||||
|
.vp-mobile { width: 362px; }
|
||||||
|
.scroll { overflow: hidden; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="viewport vp-mobile">
|
||||||
|
<div class="bar">Mobile @ 360px</div>
|
||||||
|
<div class="scroll"><iframe src="./css-responsive-container.html" height="80"></iframe></div>
|
||||||
|
</div>
|
||||||
|
<div class="viewport vp-tablet">
|
||||||
|
<div class="bar">Tablet @ 800px</div>
|
||||||
|
<div class="scroll" style="overflow-x: auto;"><iframe src="./css-responsive-container.html" height="100"></iframe></div>
|
||||||
|
</div>
|
||||||
|
<div class="viewport vp-desktop">
|
||||||
|
<div class="bar">Desktop @ 1100px</div>
|
||||||
|
<div class="scroll" style="overflow-x: auto;"><iframe src="./css-responsive-container.html" height="100"></iframe></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
slides/223015c/assets/demos/css-responsive.png
Normal file
BIN
slides/223015c/assets/demos/css-responsive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
34
slides/223015c/assets/demos/css-selector-class-frame.html
Normal file
34
slides/223015c/assets/demos/css-selector-class-frame.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Preview: css-selector-class</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hl: #d63384;
|
||||||
|
--dark: #0f0f23;
|
||||||
|
--chrome: #1a1a2e;
|
||||||
|
--muted: #4a4a6a;
|
||||||
|
}
|
||||||
|
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||||
|
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||||
|
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||||
|
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||||
|
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||||
|
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||||
|
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="browser">
|
||||||
|
<div class="window">
|
||||||
|
<div class="chrome">
|
||||||
|
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||||
|
<span class="url">file:///beispiel/selector-class.html</span>
|
||||||
|
</div>
|
||||||
|
<iframe src="./css-selector-class.html"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
slides/223015c/assets/demos/css-selector-class.html
Normal file
15
slides/223015c/assets/demos/css-selector-class.html
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Klassen-Selektor</title>
|
||||||
|
<style>
|
||||||
|
body { padding: 1.2rem; font-family: system-ui, sans-serif; }
|
||||||
|
.wichtig { color: red; font-weight: bold; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p class="wichtig">Dieser Text ist wichtig.</p>
|
||||||
|
<p>Dieser nicht.</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
slides/223015c/assets/demos/css-selector-class.png
Normal file
BIN
slides/223015c/assets/demos/css-selector-class.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
34
slides/223015c/assets/demos/css-selector-element-frame.html
Normal file
34
slides/223015c/assets/demos/css-selector-element-frame.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Preview: css-selector-element</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hl: #d63384;
|
||||||
|
--dark: #0f0f23;
|
||||||
|
--chrome: #1a1a2e;
|
||||||
|
--muted: #4a4a6a;
|
||||||
|
}
|
||||||
|
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||||
|
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||||
|
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||||
|
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||||
|
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||||
|
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||||
|
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="browser">
|
||||||
|
<div class="window">
|
||||||
|
<div class="chrome">
|
||||||
|
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||||
|
<span class="url">file:///beispiel/selector-element.html</span>
|
||||||
|
</div>
|
||||||
|
<iframe src="./css-selector-element.html"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
18
slides/223015c/assets/demos/css-selector-element.html
Normal file
18
slides/223015c/assets/demos/css-selector-element.html
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Element-Selektor</title>
|
||||||
|
<style>
|
||||||
|
body { padding: 1.2rem; }
|
||||||
|
p { color: gray; font-family: Georgia, serif; }
|
||||||
|
h1, h2, h3 { font-family: sans-serif; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Überschrift (sans-serif)</h1>
|
||||||
|
<p>Absatz: grau, Georgia (serif).</p>
|
||||||
|
<h2>Untertitel (sans-serif)</h2>
|
||||||
|
<p>Noch ein grauer Absatz.</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
slides/223015c/assets/demos/css-selector-element.png
Normal file
BIN
slides/223015c/assets/demos/css-selector-element.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
34
slides/223015c/assets/demos/css-selector-id-frame.html
Normal file
34
slides/223015c/assets/demos/css-selector-id-frame.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Preview: css-selector-id</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hl: #d63384;
|
||||||
|
--dark: #0f0f23;
|
||||||
|
--chrome: #1a1a2e;
|
||||||
|
--muted: #4a4a6a;
|
||||||
|
}
|
||||||
|
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||||
|
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||||
|
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||||
|
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||||
|
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||||
|
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||||
|
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="browser">
|
||||||
|
<div class="window">
|
||||||
|
<div class="chrome">
|
||||||
|
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||||
|
<span class="url">file:///beispiel/selector-id.html</span>
|
||||||
|
</div>
|
||||||
|
<iframe src="./css-selector-id.html"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
24
slides/223015c/assets/demos/css-selector-id.html
Normal file
24
slides/223015c/assets/demos/css-selector-id.html
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>ID-Selektor</title>
|
||||||
|
<style>
|
||||||
|
body { padding: 0; margin: 0; font-family: system-ui, sans-serif; }
|
||||||
|
#hauptnavigation {
|
||||||
|
background: #333;
|
||||||
|
padding: 1rem;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
#hauptnavigation a { color: #fff; margin-right: 1rem; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav id="hauptnavigation">
|
||||||
|
<a href="#">Home</a>
|
||||||
|
<a href="#">Kurse</a>
|
||||||
|
<a href="#">Kontakt</a>
|
||||||
|
</nav>
|
||||||
|
<p style="padding: 1rem;">Rest der Seite.</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
slides/223015c/assets/demos/css-selector-id.png
Normal file
BIN
slides/223015c/assets/demos/css-selector-id.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
34
slides/223015c/assets/demos/css-specificity-frame.html
Normal file
34
slides/223015c/assets/demos/css-specificity-frame.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Preview: css-specificity</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hl: #d63384;
|
||||||
|
--dark: #0f0f23;
|
||||||
|
--chrome: #1a1a2e;
|
||||||
|
--muted: #4a4a6a;
|
||||||
|
}
|
||||||
|
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||||
|
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||||
|
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||||
|
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||||
|
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||||
|
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||||
|
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="browser">
|
||||||
|
<div class="window">
|
||||||
|
<div class="chrome">
|
||||||
|
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||||
|
<span class="url">file:///beispiel/specificity.html</span>
|
||||||
|
</div>
|
||||||
|
<iframe src="./css-specificity.html"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
30
slides/223015c/assets/demos/css-specificity.html
Normal file
30
slides/223015c/assets/demos/css-specificity.html
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Spezifität</title>
|
||||||
|
<style>
|
||||||
|
body { padding: 1.2rem; font-family: system-ui, sans-serif; }
|
||||||
|
p { color: blue; } /* 0,0,0,1 */
|
||||||
|
.text { color: green; } /* 0,0,1,0 */
|
||||||
|
#intro { color: red; } /* 0,1,0,0 */
|
||||||
|
code { background: #f3f4f6; padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }
|
||||||
|
.row { margin-bottom: 10px; }
|
||||||
|
.label { color: #6b7280; font-size: 0.85em; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="row">
|
||||||
|
<p>Nur <code>p</code>: <strong>blau</strong></p>
|
||||||
|
<span class="label">0,0,0,1</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<p class="text">Nur <code>.text</code>: <strong>grün</strong> schlägt p</p>
|
||||||
|
<span class="label">0,0,1,0 > 0,0,0,1</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<p id="intro" class="text">ID <code>#intro</code>: <strong>rot</strong> schlägt alles</p>
|
||||||
|
<span class="label">0,1,0,0 > 0,0,1,0</span>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
slides/223015c/assets/demos/css-specificity.png
Normal file
BIN
slides/223015c/assets/demos/css-specificity.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Reference in New Issue
Block a user