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
---
assets/images/css-display-block.svg | 4 +
assets/drawio/css-position-relative.drawio | 1
assets/drawio/css-display-block.drawio | 1
assets/drawio/css-position-absolute.drawio | 1
assets/images/css-display-inline-block.svg | 4 +
assets/drawio/css-position-static.drawio | 1
assets/images/css-position-static.svg | 4 +
assets/drawio/css-display-inline-block.drawio | 1
assets/images/css-position-relative.svg | 4 +
index.html | 205 +++++++++++++++++++++++++++++++++++++++++++++++++++
assets/images/css-position-absolute.svg | 4 +
assets/drawio/css-display-inline.drawio | 1
assets/images/css-display-inline.svg | 4 +
13 files changed, 235 insertions(+), 0 deletions(-)
diff --git a/assets/drawio/css-display-block.drawio b/assets/drawio/css-display-block.drawio
new file mode 100644
index 0000000..4979745
--- /dev/null
+++ b/assets/drawio/css-display-block.drawio
@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2023-08-29T12:21:18.014Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="DPWw0AALEGWy5TgxIzfN" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">3ZVRT4MwEMc/DY9LoN3Y9uhwzpgYH2Y0PlZ60maF1tIJ89NbpB2QbYkmmiV74vjfv3fXXxsIcJLXK00Uu5cURIBCWgf4OkAIzcfIPhpl5xQ8xa2SaU5bLeqENf8EJ4ZO3XIK5cBopBSGq6GYyqKA1Aw0orWshrY3KYZdFcngQFinRByqz5wa1qozNO30W+AZ852jeN5mcuLNbiclI1RWPQkvA5xoKU0b5XUCoqHnubTrbk5k94NpKMxPFsyfVkiK9zv1WE1nL/whQclmNG6rfBCxdRt2w5qdJ6DltqDQFAkDvKgYN7BWJG2ylT10qzGTC/sW2dCVA22gPjlntN+9vTcgczB6Zy3uiow6hlVHfBI7jKxPe+KMxJ1ytq/WgbCBY/ELLvgIl1jYtotSkcLGWRNTXipB7NxX1vsqZLrxLtu0bzwfVL/A0esxDg8Zj48w9tqfI55cPOLo3IjjS0cc/uMttq/dx/k71/vH4eUX</diagram></mxfile>
\ No newline at end of file
diff --git a/assets/drawio/css-display-inline-block.drawio b/assets/drawio/css-display-inline-block.drawio
new file mode 100644
index 0000000..1979ae0
--- /dev/null
+++ b/assets/drawio/css-display-inline-block.drawio
@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2023-08-29T12:57:48.488Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="AnwePxmuu2hy53zhMpJs" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">jZJNT8MwDIZ/TY+T2gRt6xHKGEJCHIZAHKPGNBFpHVJv7fj1pDT90jSJU5zHjh2/dsSzst07YdUzSjARi2Ub8fuIMRaz1B8dOfckSdNACqdlYBM46B8IMA70qCXUi0BCNKTtEuZYVZDTggnnsFmGfaJZVrWigAtwyIW5pO9akurplm0m/gi6UEPlZB36K8UQHDqplZDYzBDfRTxziNRbZZuB6dQbdOnfPVzxjh9zUNF/HqRve4bm+8m+Npvth37JWPa14n2WkzDH0HDE1sbnu6utqLxddLbFWpPGKuK3XSMkSOdDnC84Dw290nkQ0OGxktD9IfbuRmmCgxV55238znimqDT+loyvT+AI2qttJqN4fu0ASyB39iFhw1bTCJppYMkmTEHNhnUTmAg7UozJJhm9EZQcrtPE/nyzxee7Xw==</diagram></mxfile>
\ No newline at end of file
diff --git a/assets/drawio/css-display-inline.drawio b/assets/drawio/css-display-inline.drawio
new file mode 100644
index 0000000..78ed69d
--- /dev/null
+++ b/assets/drawio/css-display-inline.drawio
@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2023-08-29T12:23:16.359Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="O3r_fg3Z8A-NHZnA0_VS" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">3ZVdT4MwFIZ/DZcz0I4Blw7njInxYkbjZUOP0Fgolk6Yv94i7YCwJTPxI9kVp29Pz8fTE+rgOG/WkpTZnaDAHeTSxsFXDkLIRZH+tMquU7woMkoqGTVaL2zYBxjRNeqWUahGjkoIrlg5FhNRFJCokUakFPXY7UXwcdaSpDARNgnhU/WJUZV1aoiCXr8BlmY2s7cw/eXEOptOqoxQUQ8kvHJwLIVQnZU3MfCWnuXSnbs+srsvTEKhTjkQPa6R4G+35UMdhM/sPkbx62zeRXknfGsaNsWqnSUgxbag0AZxHbysM6ZgU5Kk3a31pWstUznXK0+bJhxIBc3ROr1993puQOSg5E67mBGZ9Qzrnri/MBizAW3f+BFzyek+WM9BGwbFN7DgA1gWXGddViUptJ22NmVVyYku+7KNV3BWgHXTWYee/wfVHjD0esZ+dOFPKHvBAcpz95coB2dHOZpgtmM7hBz+JeTw3CDj8CTIPzTJetn/or/2Bi8dXn0C</diagram></mxfile>
\ No newline at end of file
diff --git a/assets/drawio/css-position-absolute.drawio b/assets/drawio/css-position-absolute.drawio
new file mode 100644
index 0000000..5497c3e
--- /dev/null
+++ b/assets/drawio/css-position-absolute.drawio
@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2023-08-29T15:39:42.353Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="8Abe0gdre3hiula6WsDI" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">5VZRb5swEP41PEYCnJL0MaVdp0nTJmXa1kcXX8Cqwcw4hezX76hNwDGttlVVNO0J3+fz2ffddzYBScvuVtG6+CgZiCAOWReQ6yCO43W4xk+PHAxCosQiueLMYNEIbPlPsGBo0T1n0DiOWkqhee2CmawqyLSDUaVk67rtpHB3rWkOHrDNqPDRb5zpwqDreDXi74HnxbBzlFyamZIOzjaTpqBMthOI3AQkVVJqMyq7FETP3sCLWffumdnjwRRU+ncWXH69jaX48aH+0q7Wd/xTGqcPC2KiPFKxtwnXsuGayyogG5xQIKjmj2BT0IeBFyX3FYM+dBiQq7bgGrY1zfrZFqWAWKFLgVaEQ7sJKA3ds6ePjpygmkCWoNUBXaxwFiOz7ViHaGXJLSY1WFqM2tLnx2AjOziwBP0BWVHkseXxAhXb9LJDKxO0aXjmUuHyhsmrw/epcTc1rjvHOljLbArMU+4JmdgqVOWgX0opmWd9wvHFDMUDdpSH03YzvNsdPkuOJ5wr6rCokXuVgfWbqnlY2rlFHiPFJ5FM7l6kp8ofM32FGPzWEbDTpm2isO48aaD4tSuGRiv5AKkUUiFSyQo9r3ZciBOICp5XvaKwvoD4Vd9KHC+pjZ0oOWP9NrON6EqO0aZ4Ml7bmHbBYuVVIll6jZrMiIi8WZ8uvdJoWZvKkP+6MuTizJUJZ27QRPTkNzWtcJz3Y/cNajTeMdngd68GrwHBk0wXn++p6lz2RtqHy+p8L1fyF7zT+0aKvYZ/h/nYYz56O+bRHH/ezKsy/gOTm18=</diagram></mxfile>
\ No newline at end of file
diff --git a/assets/drawio/css-position-relative.drawio b/assets/drawio/css-position-relative.drawio
new file mode 100644
index 0000000..5e35517
--- /dev/null
+++ b/assets/drawio/css-position-relative.drawio
@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2023-08-29T13:03:52.435Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="LDoKMm7A0thygrm6bKuW" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">zZXbbtswDIafxpcFfFhzuEzcrsOAYQUybNilYDG2UFn0ZKV2+vSjavmgOEFbBAN2ZekXRUofSTlI0rJ90KwqviEHGcQhb4PkLojjeBWu6GOVY6dE6/W6U3ItuNNGYSdewImhUw+CQ+0ZGkRpROWLGSoFmfE0pjU2vtkepR+1YjnMhF3G5Fz9JbgpOnUVL0f9C4i86CNHC3e/kvXG7iZ1wTg2Eym5D5JUI5puVLYpSEuv59Lt+3xhdTiYBmXes2H98yFG+edr9aNZrn6L72mcPt0knZdnJg/uwu6w5tgT0HhQHKyTMEi2TSEM7CqW2dWGkk5aYUpJs4iGnNXFq62dON+gDbQXDx0NKKiIAEsw+kgmrl5uRqDNiD9aOqbFBP0npzGX8XxwNkKhgePyAUZ9KXqQFpLCbuuKKRrndlxhLYxAFSQbMtYgmRHP0FtS5KnxdZSvAdv6tP4nztHbxQiKb2xX0yyTrK5F5pPxMXbbgc9a/E1KEwi3Zxj02pBl79k5A8ZFeERBgafUoxOaNR50Bs5u2s391ov5O/VkmM7BzDy9pma46RXZmj8dEvamq35i3M5yR8Vq/GzVRuMTpChRk6JQkeV2L6Q8kZgUubIpp7QB6Vtb+oIe6Y1bKAXnNszZxvFr4h+8UGE465zFmaJJPt44NB1/EF3mxv9scv8X</diagram></mxfile>
\ No newline at end of file
diff --git a/assets/drawio/css-position-static.drawio b/assets/drawio/css-position-static.drawio
new file mode 100644
index 0000000..fb41348
--- /dev/null
+++ b/assets/drawio/css-position-static.drawio
@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2023-08-29T13:01:42.314Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="qFVua-Gj_dB85dpMiA_l" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">jZJNT8MwDIZ/TY6T1gSt6xHKGEJCHIZAHKPGNBFpHdJs7fj1pDTph6ZJnOI8duz4tQnLq25vuZHPKEATuhYdYfeE0iTbJv7oyTmSLBtIaZUIbAIH9QMBrgM9KgHNItAhaqfMEhZY11C4BePWYrsM+0S9rGp4CRfgUHB9Sd+VcHKgW5pO/BFUKWPlZBP6q3gMDp00kgtsZ4jtCMstohusqstB9+pFXYZ3D1e848cs1O4/D7K3PUX9/WRe23T7oV5ymn+t2JDlxPUxNEzoRvt8d43htbfL3jbYKKewJuy2b8Rxp4oY5wvOQ0Ov7hwFtHisBfR/WHt3K5WDg+FF7239zngmXaX9LRlfn8A66K62mYzi+bUDrMDZsw8JG7aaRtBOA0vSMAU5G9ZNYDzsSDkmm2T0RlAyXqeJ/flmi892vw==</diagram></mxfile>
\ No newline at end of file
diff --git a/assets/images/css-display-block.svg b/assets/images/css-display-block.svg
new file mode 100644
index 0000000..c3c9261
--- /dev/null
+++ b/assets/images/css-display-block.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Do not edit this file with editors other than diagrams.net -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="601px" height="200px" viewBox="-0.5 -0.5 601 200" content="<mxfile host="Electron" modified="2023-08-29T12:21:51.421Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="VxGXzOKg4UfxLWPBsm4U" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">3ZVRT4MwEMc/DY9LoN3Y9uhwzpgYH2Y0PlZ60maF1tIJ89NbpB2QbYkmmiV74vjfv3fXXxsIcJLXK00Uu5cURIBCWgf4OkAIzcfIPhpl5xQ8xa2SaU5bLeqENf8EJ4ZO3XIK5cBopBSGq6GYyqKA1Aw0orWshrY3KYZdFcngQFinRByqz5wa1qozNO30W+AZ852jeN5mcuLNbiclI1RWPQkvA5xoKU0b5XUCoqHnubTrbk5k94NpKMxPFsyfVkiK9zv1WE1nL/whQclmNG6rfBCxdRt2w5qdJ6DltqDQFAkDvKgYN7BWJG2ylT10qzGTC/sW2dCVA22gPjlntN+9vTcgczB6Zy3uiow6hlVHfBI7jKxPe+KMxJ1ytq/WgbCBY/ELLvgIl1jYtotSkcLGWRNTXipB7NxX1vsqZLrxLtu0bzwfVL/A0esxDg8Zj48w9tqfI55cPOLo3IjjS0cc/uMttq/dx/k71/vH4eUX</diagram></mxfile>"><defs/><g><rect x="20" y="20" width="560" height="159" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="30" y="29" width="540" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 538px; height: 1px; padding-top: 49px; margin-left: 31px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: block</span></div></div></div></foreignObject><text x="300" y="53" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: block</text></switch></g><rect x="30" y="79" width="540" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 538px; height: 1px; padding-top: 99px; margin-left: 31px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: block</span></div></div></div></foreignObject><text x="300" y="103" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: block</text></switch></g><rect x="30" y="129" width="540" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 538px; height: 1px; padding-top: 149px; margin-left: 31px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: block</span></div></div></div></foreignObject><text x="300" y="153" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: block</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
\ No newline at end of file
diff --git a/assets/images/css-display-inline-block.svg b/assets/images/css-display-inline-block.svg
new file mode 100644
index 0000000..e46c48c
--- /dev/null
+++ b/assets/images/css-display-inline-block.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Do not edit this file with editors other than diagrams.net -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="601px" height="101px" viewBox="-0.5 -0.5 601 101" content="<mxfile host="Electron" modified="2023-08-29T12:47:20.803Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="EFHDFcC-lXVga_wXoOKl" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">1ZVdT4MwFIZ/DZcz0I4Blw7njInxYkbjZaUVmhWKpRPmr7fIYUDYlpmoi1ecvj09H09PqIXDtFoqkid3kjJhIZtWFr6yEEI2CsynVraN4gQBKLHiFLROWPEPBqIN6oZTVgwctZRC83woRjLLWKQHGlFKlkO3VymGWXMSs5GwiogYq0+c6qRRfeR1+g3jcdJmdmbQX0paZ+ikSAiVZU/CCwuHSkrdWGkVMlHTa7k0564P7O4KUyzTpxwIHpdIirfb/KH0/Gd+H6JwPZk2Ud6J2EDDUKzetgSU3GSU1UFsC8/LhGu2yklU75bm0o2W6FSYlWNMCMeUZtXBOp1d92ZumEyZVlvjAiMy6RiWHXF3BhiTHm0X/AhccrwL1nEwBqD4Bha8B8tMmKzzIieZsePaprzIBTFlX9bxMsEzNnkRMlq3ziZ33/98aNsDwLAj7QYX7oi14+1hPbV/ibU3Yn2E67kBBiOC7Vz2+fl/yc//R/ywfxK/H5o/s+x+r197vVcKLz4B</diagram></mxfile>" style="background-color: rgb(42, 42, 42);"><defs/><g><rect x="20" y="20" width="560" height="59" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="30" y="29.5" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 49px; margin-left: 31px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: inline-block</span></div></div></div></foreignObject><text x="115" y="53" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline-block</text></switch></g><rect x="210" y="29" width="180" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 178px; height: 1px; padding-top: 49px; margin-left: 211px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">display: inline-block</div></div></div></foreignObject><text x="300" y="53" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline-block</text></switch></g><rect x="400" y="29" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 49px; margin-left: 401px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">display: inline-block</div></div></div></foreignObject><text x="485" y="53" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline-block</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
\ No newline at end of file
diff --git a/assets/images/css-display-inline.svg b/assets/images/css-display-inline.svg
new file mode 100644
index 0000000..72a23f3
--- /dev/null
+++ b/assets/images/css-display-inline.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Do not edit this file with editors other than diagrams.net -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="601px" height="101px" viewBox="-0.5 -0.5 601 101" content="<mxfile host="Electron" modified="2023-08-29T12:23:26.685Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="skcvZPTlOynlrjnsL0HU" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">3ZVdT4MwFIZ/DZcz0I4Blw7njInxYkbjZUOP0Fgolk6Yv94i7YCwJTPxI9kVp29Pz8fTE+rgOG/WkpTZnaDAHeTSxsFXDkLIRZH+tMquU7woMkoqGTVaL2zYBxjRNeqWUahGjkoIrlg5FhNRFJCokUakFPXY7UXwcdaSpDARNgnhU/WJUZV1aoiCXr8BlmY2s7cw/eXEOptOqoxQUQ8kvHJwLIVQnZU3MfCWnuXSnbs+srsvTEKhTjkQPa6R4G+35UMdhM/sPkbx62zeRXknfGsaNsWqnSUgxbag0AZxHbysM6ZgU5Kk3a31pWstUznXK0+bJhxIBc3ROr1993puQOSg5E67mBGZ9Qzrnri/MBizAW3f+BFzyek+WM9BGwbFN7DgA1gWXGddViUptJ22NmVVyYku+7KNV3BWgHXTWYee/wfVHjD0esZ+dOFPKHvBAcpz95coB2dHOZpgtmM7hBz+JeTw3CDj8CTIPzTJetn/or/2Bi8dXn0C</diagram></mxfile>" style="background-color: rgb(42, 42, 42);"><defs/><g><rect x="20" y="20" width="560" height="59" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="30" y="29.5" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 49px; margin-left: 31px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: inline</span></div></div></div></foreignObject><text x="115" y="53" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline</text></switch></g><rect x="210" y="29" width="180" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 178px; height: 1px; padding-top: 49px; margin-left: 211px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: inline</span></div></div></div></foreignObject><text x="300" y="53" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline</text></switch></g><rect x="400" y="29" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 49px; margin-left: 401px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: inline</span></div></div></div></foreignObject><text x="485" y="53" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
\ No newline at end of file
diff --git a/assets/images/css-position-absolute.svg b/assets/images/css-position-absolute.svg
new file mode 100644
index 0000000..2220946
--- /dev/null
+++ b/assets/images/css-position-absolute.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Do not edit this file with editors other than diagrams.net -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="311px" height="148px" viewBox="-0.5 -0.5 311 148" content="<mxfile host="Electron" modified="2023-08-29T15:39:46.837Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="PeUxOrFBqwBmuO2_eTbH" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">5VZRb5swEP41PEYCnJL0MaVdp0nTJmXa1kcXX8Cqwcw4hezX76hNwDGttlVVNO0J3+fz2ffddzYBScvuVtG6+CgZiCAOWReQ6yCO43W4xk+PHAxCosQiueLMYNEIbPlPsGBo0T1n0DiOWkqhee2CmawqyLSDUaVk67rtpHB3rWkOHrDNqPDRb5zpwqDreDXi74HnxbBzlFyamZIOzjaTpqBMthOI3AQkVVJqMyq7FETP3sCLWffumdnjwRRU+ncWXH69jaX48aH+0q7Wd/xTGqcPC2KiPFKxtwnXsuGayyogG5xQIKjmj2BT0IeBFyX3FYM+dBiQq7bgGrY1zfrZFqWAWKFLgVaEQ7sJKA3ds6ePjpygmkCWoNUBXaxwFiOz7ViHaGXJLSY1WFqM2tLnx2AjOziwBP0BWVHkseXxAhXb9LJDKxO0aXjmUuHyhsmrw/epcTc1rjvHOljLbArMU+4JmdgqVOWgX0opmWd9wvHFDMUDdpSH03YzvNsdPkuOJ5wr6rCokXuVgfWbqnlY2rlFHiPFJ5FM7l6kp8ofM32FGPzWEbDTpm2isO48aaD4tSuGRiv5AKkUUiFSyQo9r3ZciBOICp5XvaKwvoD4Vd9KHC+pjZ0oOWP9NrON6EqO0aZ4Ml7bmHbBYuVVIll6jZrMiIi8WZ8uvdJoWZvKkP+6MuTizJUJZ27QRPTkNzWtcJz3Y/cNajTeMdngd68GrwHBk0wXn++p6lz2RtqHy+p8L1fyF7zT+0aKvYZ/h/nYYz56O+bRHH/ezKsy/gOTm18=</diagram></mxfile>" style="background-color: rgb(42, 42, 42);"><defs/><g><rect x="90" y="27" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 47px; margin-left: 91px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">position: relative</div></div></div></foreignObject><text x="175" y="51" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">position: relative</text></switch></g><path d="M 90 27 L 107.96 79.97" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 109.64 84.94 L 104.08 79.44 L 107.96 79.97 L 110.71 77.19 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><rect x="20" y="32" width="60" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 47px; margin-left: 21px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">left: 10px</div></div></div></foreignObject><text x="50" y="51" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">left: 10px</text></switch></g><rect x="20" y="61" width="60" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 76px; margin-left: 21px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">top: 30px</div></div></div></foreignObject><text x="50" y="80" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">top: 30px</text></switch></g><rect x="120" y="56" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 76px; margin-left: 121px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>position: static<br /></span></div></div></div></foreignObject><text x="205" y="80" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">position: static
</text></switch></g><rect x="110" y="86" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 106px; margin-left: 111px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>position: absolute<br /></span></div></div></div></foreignObject><text x="195" y="110" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">position: absolute
</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
\ No newline at end of file
diff --git a/assets/images/css-position-relative.svg b/assets/images/css-position-relative.svg
new file mode 100644
index 0000000..00a5a89
--- /dev/null
+++ b/assets/images/css-position-relative.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Do not edit this file with editors other than diagrams.net -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="258px" height="140px" viewBox="-0.5 -0.5 258 140" content="<mxfile host="Electron" modified="2023-08-29T13:03:58.749Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="oPm1Ld_MIQU0uvIAMbpw" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">zZXbbtswDIafxpcFfFhzuEzcrsOAYQUybNilYDG2UFn0ZKV2+vSjavmgOEFbBAN2ZekXRUofSTlI0rJ90KwqviEHGcQhb4PkLojjeBWu6GOVY6dE6/W6U3ItuNNGYSdewImhUw+CQ+0ZGkRpROWLGSoFmfE0pjU2vtkepR+1YjnMhF3G5Fz9JbgpOnUVL0f9C4i86CNHC3e/kvXG7iZ1wTg2Eym5D5JUI5puVLYpSEuv59Lt+3xhdTiYBmXes2H98yFG+edr9aNZrn6L72mcPt0knZdnJg/uwu6w5tgT0HhQHKyTMEi2TSEM7CqW2dWGkk5aYUpJs4iGnNXFq62dON+gDbQXDx0NKKiIAEsw+kgmrl5uRqDNiD9aOqbFBP0npzGX8XxwNkKhgePyAUZ9KXqQFpLCbuuKKRrndlxhLYxAFSQbMtYgmRHP0FtS5KnxdZSvAdv6tP4nztHbxQiKb2xX0yyTrK5F5pPxMXbbgc9a/E1KEwi3Zxj02pBl79k5A8ZFeERBgafUoxOaNR50Bs5u2s391ov5O/VkmM7BzDy9pma46RXZmj8dEvamq35i3M5yR8Vq/GzVRuMTpChRk6JQkeV2L6Q8kZgUubIpp7QB6Vtb+oIe6Y1bKAXnNszZxvFr4h+8UGE465zFmaJJPt44NB1/EF3mxv9scv8X</diagram></mxfile>" style="background-color: rgb(42, 42, 42);"><defs/><g><rect x="27" y="20" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-dasharray="3 3" pointer-events="all"/><rect x="67" y="20" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 40px; margin-left: 68px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>position: relative</span></div></div></div></foreignObject><text x="152" y="44" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">position: relative</text></switch></g><path d="M 27 79 L 60.63 79" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 65.88 79 L 58.88 82.5 L 60.63 79 L 58.88 75.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><rect x="27" y="89" width="60" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 104px; margin-left: 28px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">left: 20px</div></div></div></foreignObject><text x="57" y="108" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">left: 20px</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
\ No newline at end of file
diff --git a/assets/images/css-position-static.svg b/assets/images/css-position-static.svg
new file mode 100644
index 0000000..3e5c6f9
--- /dev/null
+++ b/assets/images/css-position-static.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Do not edit this file with editors other than diagrams.net -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="211px" height="82px" viewBox="-0.5 -0.5 211 82" content="<mxfile host="Electron" modified="2023-08-29T13:01:47.694Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="bTcQnLXnavKtkTCAtb4E" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">jZJNT8MwDIZ/TY6T1gSt6xHKGEJCHIZAHKPGNBFpHdJs7fj1pDTph6ZJnOI8duz4tQnLq25vuZHPKEATuhYdYfeE0iTbJv7oyTmSLBtIaZUIbAIH9QMBrgM9KgHNItAhaqfMEhZY11C4BePWYrsM+0S9rGp4CRfgUHB9Sd+VcHKgW5pO/BFUKWPlZBP6q3gMDp00kgtsZ4jtCMstohusqstB9+pFXYZ3D1e848cs1O4/D7K3PUX9/WRe23T7oV5ymn+t2JDlxPUxNEzoRvt8d43htbfL3jbYKKewJuy2b8Rxp4oY5wvOQ0Ov7hwFtHisBfR/WHt3K5WDg+FF7239zngmXaX9LRlfn8A66K62mYzi+bUDrMDZsw8JG7aaRtBOA0vSMAU5G9ZNYDzsSDkmm2T0RlAyXqeJ/flmi892vw==</diagram></mxfile>" style="background-color: rgb(42, 42, 42);"><defs/><g><rect x="20" y="20" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 40px; margin-left: 21px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>position: static</span></div></div></div></foreignObject><text x="105" y="44" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">position: static</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
\ No newline at end of file
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>
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <meta charset="utf-8"></meta>
+ <meta
+ name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+ >
+ </head>
+ <body>
+ ...
+ </body>
+ </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