CSS lernen - Das große CSS-Tutorial

Was ist CSS

CSS steht für Cascading Stylesheets. CSS ist eine Standard-Stylesheet-Sprache, die zur Beschreibung der Darstellung (dh des Layouts und der Formatierung) von Webseiten verwendet wird.

Vor CSS waren fast alle Präsentationsattribute von HTML-Dokumenten im HTML-Markup enthalten (insbesondere in den HTML-Tags); alle Schriftfarben, Hintergrundstile, Elementausrichtungen, Rahmen und Größen mussten im HTML explizit beschrieben werden.

Infolgedessen wurde die Entwicklung der großen Websites zu einem langen und teuren Prozess, da die Stilinformationen auf jeder einzelnen Seite der Website immer wieder hinzugefügt wurden.

Zur Lösung dieses Problems wurde CSS 1996 vom World Wide Web Consortium (W3C) eingeführt, das seinen Standard auch beibehält. CSS wurde entwickelt, um die Trennung von Präsentation und Inhalt zu ermöglichen. Jetzt können Webdesigner die Formatierungsinformationen der Webseiten in ein separates Stylesheet verschieben, was zu erheblich einfacherem HTML-Markup und besserer Wartbarkeit führt.

CSS3 ist die neueste Version der CSS-Spezifikation. CSS3 fügt mehrere neue Styling-Features und Verbesserungen hinzu, um die Web-Präsentationsfunktionen zu verbessern.

Was ist mit CSS möglich?

Der Funktionsumfang von CSS ist extrem groß. Es gibt theoretisch nichts mehr, was Sie mit CSS nicht umsetzen können. Hier eine Liste der Dinge, die mit CSS möglich sind:

• Sie können dieselben Stilregeln problemlos auf mehrere Elemente anwenden.
• Sie können die Darstellung mehrerer Seiten einer Website mit einem einzigen Stylesheet steuern.
• Sie können dieselbe Seite auf verschiedenen Geräten unterschiedlich darstellen.
• Sie können dynamische Änderung durch Nutzerinteraktion schaffen (z.B. Hovereffekte)
• Sie können die Position eines Elements auf Ihrer Webseite ändern, ohne das HTML-Gerüst zu ändern.
• Sie können die Anzeige vorhandener HTML-Elemente ändern.
• Sie können Elemente bearbeiten (skalieren, drehen, neigen, transformieren)
• Sie können Animationen und Übergangseffekte erstellen, ohne JavaScript zu verwenden.
• Sie können eine druckfreundliche Version Ihrer Webseiten erstellen.

Diese Liste kann unendlich weitergeführt werden. Es gibt noch viele andere interessante Dinge, die mit CSS umgesetzt werden können. Alles das können Sie in den kommenden Kapiteln erfahren.

Vorteile der Verwendung von CSS

Der größte Vorteil von CSS besteht darin, dass es die Trennung von Stil und Layout vom Inhalt des Dokuments ermöglicht. Hier sind einige weitere Vorteile, warum Sie CSS verwenden sollten

• CSS spart viel Zeit - CSS bietet viel Flexibilität beim Festlegen der Stileigenschaften eines Elements. Sie können CSS einmal schreiben und dann kann derselbe Code auf die Gruppen von HTML-Elementen angewendet werden.
• Einfache Wartung - CSS bietet eine einfache Möglichkeit, die Formatierung der Dokumente zu aktualisieren um die Konsistenz über mehrere Dokumente hinweg aufrechtzuerhalten. Denn das gesamte Design lässt sich einfach über ein oder mehrere Stylesheets steuern.
• Webseitengeschwindigkeit - CSS ermöglicht es mehreren Seiten, die Formatierungsinformationen gemeinsam zu nutzen, wodurch die Komplexität und Wiederholung des strukturellen Inhalts der Dokumente reduziert wird. Es reduziert die Dateiübertragungsgröße erheblich, was zu einem schnelleren Laden der Seite führt.
• Besseres Aussehen - CSS hat viel breitere Darstellungsmöglichkeiten als HTML und bietet eine viel bessere Kontrolle über das Layout Ihrer Webseiten. So können Sie Ihren Webseiten im Vergleich zu den HTML-Präsentationselementen und -attributen ein weitaus besseres Aussehen verleihen.
• Kompatibilität - CSS ermöglicht auch die Optimierung von Webseiten für mehr als einen Geräte- oder Medientyp. Mithilfe von CSS kann dasselbe HTML-Dokument in verschiedenen Anzeigestilen für verschiedene Rendering-Geräte wie Desktop, Mobiltelefone usw. dargestellt werden.

Was dieses Tutorial behandelt

Diese CSS-Tutorialserie beinhaltet alle Grundlagen von CSS, einschließlich der Funktion von Selektoren, Methoden zum Festlegen von Farben und Hintergründen, Formatierung von Schriftarten und Text, Gestaltung von UI-Elementen wie Hyperlinks, Listen, Tabellen usw. sowie das Konzept von CSS-Box-Modell.

Sobald Sie sich mit den Grundlagen vertraut gemacht haben, fahren Sie mit dem nächsten Kapitel fort, welches das Festlegen der Dimension und Ausrichtung von Elementen behandelt. Danach gehen wir auf die Methoden zum Positionieren von Elementen auf einer Webseite, die Verwendung von Bild-Sprites sowie das Konzept der relativen und absolute Einheiten ein. Später beschäftigen wir uns mit dem visuellen Formatierungsmodell, der Anzeige und Sichtbarkeit und den Ebenen. Es folgen die Pseudoklassen und -elemente, medienabhängige Stylesheets.

Schließlich lernen Sie einige erweiterte Funktionen kennen, die in CSS3 eingeführt wurden. Dazu zählen Verlaufsfarben, Schlagschatteneffekt, 2D- und 3D-Transformationen, Alpha-Transparenz sowie die Methode zum Erstellen von Übergangs- und Animationseffekten. Zum Schluss gehen wir noch auf das Prinzip der Flex-Box ein, schauen uns die Filter-Effekte an und beschäftigen uns mit Media-Querys.