Laptop und Laube
root/ für alles rund um den Computer
CSS Grid ist ein zweidimensionales Layout-System für das Web — es erlaubt das gleichzeitige Layout in Zeilen und Spalten. Du definierst einen Grid-Container (das Elternelement) und darin werden Grid-Items positioniert. Grid ist ideal für komplexe Seiten- oder Komponentenlayouts und arbeitet gut mit anderen Modulen (z. B. Flexbox). MDN Web Docs 1. Grundprinzip von CSS Grid … Weiterlesen
Media Queries ermöglichen es dir, CSS-Regeln abhängig von bestimmten Geräte- oder Viewport-Eigenschaften (z. B. Breite, Höhe, Auflösung) anzuwenden. Auch HTML und JS unterstützen Media-Queries. Im Folgenden wird die Einrichtung im CSS beschrieben. 1. Grundsyntax Beispiele: 2. Typische Breakpoints (nach Geräten) Gerätetyp Breite (ca.) Beispiel-Media Query 📞 Smartphone (klein) bis 480 px @media (max-width: 480px) 📱 … Weiterlesen
Brown Chocolate SandyBrown PapayaWhip Moccasin PeachPuff Maroon DarkRed FireBrick IndianRed LightCoral Salmon DarkSalmon LightSalmon Coral Tomato Red OrangeRed DarkOrange Orange Gold Yellow LightYellow LemonChiffon LightGoldenRodYellow PaleGoldenRod Khaki DarkKhaki Olive Beige HoneyDew MintCream YellowGreen LawnGreen Chartreuse GreenYellow Lime LimeGreen PaleGreen LightGreen MediumSpringGreen SpringGreen MediumSeaGreen SeaGreen ForestGreen Green DarkGreen MediumAquamarine Aquamarine LightCyan Azure PaleTurquoise Turquoise MediumTurquoise DarkTurquoise … Weiterlesen
Die Flexbox (Flexible Box Layout) ist ein CSS-Modul, das für einfaches, dynamisches Anordnen von Elementen in Zeilen oder Spalten entwickelt wurde.Sie erleichtert die Erstellung von zentrierten, responsiven und gleichmäßig verteilten Layouts. 1. Grundstruktur HTML CSS 2. Hauptbegriffe Begriff Beschreibung Flex Container Das übergeordnete Element mit display: flex Flex Items Die direkten Kindelemente im Container Main … Weiterlesen
Das Box Model beschreibt, wie Browser jedes HTML-Element als rechteckige Box behandeln und Größe, Abstände und Rahmen berechnen. box-sizing: 🟦 content-box → „Breite gilt nur für den blauen Inhalt.“ 🟥 border-box → „Breite gilt blaue, grünen und orangen Bereich.“ 1. Aufbau einer Box Jedes Element besteht (von innen nach außen) aus vier Bereichen: Ebene CSS-Eigenschaft(en) … Weiterlesen
Das <dialog>-Element stellt ein modales oder nicht-modales Dialogfenster dar (z. B. Bestätigungsdialog, Formular, Hinweis). Es bietet native Methoden (show(), showModal(), close()), ein ::backdrop-Pseudo-Element und vereinfacht zugängliche Modals, wenn richtig eingesetzt. MDN Web Docs 1. Definition & Zweck 2. Grundsyntax & Attribute Attribut / Eigenschaft Bedeutung open HTML-Attribut. Wenn gesetzt, ist der Dialog sichtbar (nicht unbedingt … Weiterlesen