From e6906452d832bcea6b120854df306e6e41bde7fb Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Mi, 30 Aug 2023 12:31:18 +0200
Subject: [PATCH] start new css chapter with display, position and variables

---
 index.html |  205 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 205 insertions(+), 0 deletions(-)

diff --git a/index.html b/index.html
index c224439..5173b86 100644
--- a/index.html
+++ b/index.html
@@ -2797,6 +2797,211 @@
 						</pre>
 					</section>
 				</section>
+				<section>
+					<section>
+						<h2>CSS</h2>
+						<img data-src="/assets/images/css-sucks.png">
+					</section>
+					<section>
+						<h3>Warum CSS?</h3>
+						<ul>
+							<li>Erhöhte Zugänglichkeit des Inhalts</li>
+							<li>Wiederverwendbarkeit</li>
+						</ul>
+					</section>
+					<section>
+						<h3>Syntax</h3>
+						<pre>
+							<code class="css" data-trim data-line-numbers>
+								selector [, selector2, selector3, ...] {
+									property1: value;
+									property2: value;
+								}
+							</code>
+						</pre>
+					</section>
+					<section>
+						<h3>Beispiel</h3>
+						<pre>
+							<code class="css" data-trim data-line-numbers>
+								html, body {
+									width: 100%;
+									height: 100%;
+									margin: 0;
+								}
+							</code>
+						</pre>
+					</section>
+					<section>
+						<h3>Selektoren</h3>
+						<pre>
+							<code class="css" data-trim data-line-numbers>
+								/* Elemente */
+								html, body {...}
+								
+								/* IDs */
+								#my-id {...}
+								
+								/* Klassen */
+								.my-class {...}
+								
+								/* Pseudo-Klassen */
+								div:hover {...}
+								
+								/* Attribute */
+								div[my-attribut="abc"] {...}
+								
+								/* Kombinationen */
+								div.my-class#my-id {...}
+							</code>
+						</pre>
+					</section>
+					<section>
+						<h3>Variablen</h3>
+						<pre>
+							<code class="css" data-trim data-line-numbers>
+								html {
+									--my-background-color: #abcdef;
+								}
+								
+								html div {
+									background-color: var(--my-background-color, white);
+								}
+							</code>
+						</pre>
+					</section>
+					<section>
+						<h3>Das <code>display</code>-Attribut</h3>
+					</section>
+					<section>
+						<p>block</p>
+						<img data-src="/assets/images/css-display-block.svg">
+						<ul>
+							<li>untereinander angeordnet</li>
+							<li>nehmen sich die volle Breite</li>
+							<li><code>width</code> und <code>height</code> möglich</li>
+						</ul>
+					</section>
+					<section>
+						<p>inline</p>
+						<img data-src="/assets/images/css-display-inline.svg">
+						<ul>
+							<li>Standard bei <code>Custom Elements</code></li>
+							<li>nur so groß wie der content</li>
+							<li><code>width</code> und <code>height</code> nicht möglich</li>
+							<li>nebeneinander angeordnet</li>
+						</ul>
+					</section>
+					<section>
+						<p>inline-block</p>
+						<img data-src="/assets/images/css-display-inline-block.svg">
+						<ul>
+							<li>Mischform von <code>block</code> und <code>inline</code></li>
+							<li>nur so groß wie der content</li>
+							<li><code>width</code> und <code>height</code> möglich</li>
+							<li>nebeneinander angeordnet</li>
+						</ul>
+					</section>
+					<section>
+						<h3>Das <code>position</code>-Attribut</h3>
+					</section>
+					<section>
+						<p>static</p>
+						<img data-src="/assets/images/css-position-static.svg">
+						<ul>
+							<li>Standard</li>
+							<li>Element wird am Ort der Verankerung im HTML dargestellt</li>
+						</ul>
+					</section>
+					<section>
+						<p>relative</p>
+						<img data-src="/assets/images/css-position-relative.svg">
+						<ul>
+							<li>Verschiebung zur eigentlichen <code>static</code>-Position, z.B. mittels <code>left: 20px</code></li>
+						</ul>
+					</section>
+					<section>
+						<p>absolut</p>
+						<img data-src="/assets/images/css-position-absolute.svg">
+						<ul>
+							<li>relative Verschiebung zum nächsten nicht-<code>static</code>-Parent (sonst <code>window</code>)</li>
+						</ul>
+					</section>
+					<section>
+						<h3>Aufgabe</h3>
+						<p>Implementiere folgendes Beispiel-Menü</p>
+						<iframe data-src="/assets/html/css-menu.html"></iframe>
+					</section>
+					<section>
+						<h3>Lösung</h3>
+						<pre>
+							<code class="css" data-trim data-line-numbers>
+								.menu-item {
+									display: inline-block;
+
+									position: relative;
+								}
+
+								.menu-item .children {
+									display: none;
+
+									position: absolute;
+								}
+
+								.menu-item:hover .children {
+									display: block;
+								}
+							</code>
+						</pre>
+					</section>
+					<section>
+						<pre>
+							<code class="html" data-trim data-line-numbers>
+								<script type="text/template">
+									<div class="menu">
+										<div class="menu-item">Eins</div>
+										<div class="menu-item">
+											Hover Me!
+											<div class="children">
+												<div>Item 1</div>
+												<div>Item 2</div>
+											</div>
+										</div>
+										<div class="menu-item">Drei</div>
+									</div>
+								</script>
+							</code>
+						</pre>
+					</section>
+					<section>
+						<h3>Viewport</h3>
+						<pre>
+							<code class="html" data-trim data-line-numbers>
+								&lt;!DOCTYPE html>
+								&lt;html>
+									&lt;head>
+										&lt;meta charset="utf-8">&lt;/meta>
+										&lt;meta
+											name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+										>
+									&lt;/head>
+									&lt;body>
+										...
+									&lt;/body>
+								&lt;/html>
+							</code>
+						</pre>
+					</section>
+					<section>
+						<pre>
+							<code class="bash" data-trim data-line-numbers="">
+								npm install -g http-server
+								cd pfad/zum/projekt
+								http-server --port 8080
+							</code>
+						</pre>
+					</section>
+				</section>
 			</div>
 		</div>
 

--
Gitblit v1.9.3