CSS -Tutorial

CSS-Startseite CSS-Einführung CSS-Syntax CSS-Selektoren CSS-Anleitung CSS-Kommentare CSS-Farben CSS-Hintergründe CSS-Grenzen CSS-Ränder CSS-Padding CSS-Höhe/Breite CSS-Box-Modell CSS-Gliederung CSS-Text CSS-Schriftarten CSS-Icons CSS-Links CSS-Listen CSS-Tabellen CSS-Anzeige CSS Max-Breite CSS-Position CSS Z-Index CSS-Überlauf CSS-Float CSS Inline-Block CSS-Ausrichtung CSS-Kombinatoren CSS Pseudo-Klasse CSS Pseudo-Element CSS-Opazität CSS-Navigationsleiste CSS-Dropdowns CSS-Bildergalerie CSS-Bild-Sprites CSS-Attribut-Selektoren CSS-Formulare CSS-Zähler CSS-Website-Layout CSS-Einheiten CSS-Spezifität CSS !wichtig CSS-Mathematikfunktionen

CSS-Erweitert

Abgerundete CSS-Ecken CSS-Randbilder CSS-Hintergründe CSS-Farben CSS-Farbschlüsselwörter CSS-Verläufe CSS-Schatten CSS-Texteffekte CSS-Webfonts CSS-2D-Transformationen CSS-3D-Transformationen CSS-Übergänge CSS-Animationen CSS-Tooltips Bilder im CSS-Stil CSS-Bildreflexion CSS-Objektanpassung CSS-Objektposition CSS-Maskierung CSS-Schaltflächen CSS-Paginierung CSS mehrere Spalten CSS-Benutzeroberfläche CSS-Variablen Größe von CSS-Boxen CSS-Medienabfragen CSS MQ-Beispiele CSS-Flexbox

CSS- responsiv

RWD-Einführung RWD-Ansichtsfenster RWD-Rasteransicht RWD-Medienabfragen RWD-Bilder RWD-Videos RWD-Frameworks RWD-Vorlagen

CSS -Raster

Grid-Einführung Grid-Container Rasterelement

CSS -SASS

SASS-Tutorial

CSS- Beispiele

CSS-Vorlagen CSS-Beispiele CSS-Quiz CSS-Übungen CSS-Zertifikat

CSS- Referenzen

CSS-Referenz CSS-Selektoren CSS-Funktionen CSS-Referenz Aural CSS-websichere Schriftarten CSS animierbar CSS-Einheiten CSS PX-EM-Konverter CSS-Farben CSS-Farbwerte CSS-Standardwerte CSS-Browser-Unterstützung

CSS- Einführung


CSS ist die Sprache, die wir verwenden, um eine Webseite zu gestalten.


Was ist CSS?

  • CSS steht für Cascading Style Sheets
  • CSS beschreibt, wie HTML-Elemente auf dem Bildschirm, Papier oder in anderen Medien dargestellt werden sollen
  • CSS spart viel Arbeit. Es kann das Layout mehrerer Webseiten gleichzeitig steuern
  • Externe Stylesheets werden in CSS-Dateien gespeichert

CSS-Demo - Eine HTML-Seite - Mehrere Stile!

Hier zeigen wir eine HTML-Seite, die mit vier verschiedenen Stylesheets angezeigt wird. Klicken Sie unten auf die Links "Stylesheet 1", "Stylesheet 2", "Stylesheet 3", "Stylesheet 4", um die verschiedenen Stile anzuzeigen:



Warum CSS verwenden?

CSS wird verwendet, um Stile für Ihre Webseiten zu definieren, einschließlich Design, Layout und Variationen in der Anzeige für verschiedene Geräte und Bildschirmgrößen.

CSS-Beispiel

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS hat ein großes Problem gelöst

HTML sollte NIEMALS Tags zum Formatieren einer Webseite enthalten!

HTML wurde erstellt, um den Inhalt einer Webseite zu beschreiben, wie zum Beispiel:

<h1>Dies ist eine Überschrift</h1>

<p>Dies ist ein Absatz.</p>

Als Tags wie <font> und Farbattribute zur HTML 3.2-Spezifikation hinzugefügt wurden, begann ein Albtraum für Webentwickler. Die Entwicklung großer Websites, bei denen Schriftarten und Farbinformationen zu jeder einzelnen Seite hinzugefügt wurden, wurde zu einem langen und teuren Prozess.

Um dieses Problem zu lösen, hat das World Wide Web Consortium (W3C) CSS entwickelt.

CSS hat die Stilformatierung von der HTML-Seite entfernt!

Wenn Sie nicht wissen, was HTML ist, empfehlen wir Ihnen, unser HTML-Tutorial zu lesen .


CSS spart viel Arbeit!

Die Stildefinitionen werden normalerweise in externen .css-Dateien gespeichert.

Mit einer externen Stylesheet-Datei können Sie das Aussehen einer gesamten Website ändern, indem Sie nur eine Datei ändern!