Laptop und Laube
CSS-Framework, durch das man auf .css-Dateien verzichten kann. Es bietet, ähnlich wie Bootstrap, zahlreiche Klassen, die direkt ins HTML geschrieben werden. Allerdings standardmäßig weniger high-level. Während Bootstrap im Standard auch Optionen bietet um komplett fertige Elemente zu erstellen, z.B. ein Karussell, bietet Tailwind eher die einfachen Klassen um das Design und responsive Verhalten festzulegen, z.B. … 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
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
In Jahrzehnten der Webgestaltung haben sich viele Dinge weiterentwickelt, vor allem die Endgeräte auf denen Webseiten aufgerufen werden. Es gib viele unterschiedliche Displaygrössen und andere Anforderungen. Einige CSS-Werte, die zum Beginn der Entwicklung in als Standard gesetzt wurden, z.B. Margins und Paddings, sind heute, vor Allem mit Blick auf responsives Design, eher ungünstig. Dennoch sind … Weiterlesen