Was be­deu­ten die wich­tigs­ten CSS-Be­griffe?

Definition der Casca­ding Style Sheets Fach­be­griffe

Ohne Cascading Style Sheets (CSS) geht auf modernen Web­sites gar nichts. Lernen wir des­halb die wich­tigsten Be­griffe zu CSS ken­nen.

Informationen gemäss Stand vom 7.5.2022

Quelle: Pixabay / geralt / Pixabay-Lizenz

Cascading Style Sheets Vokabular / Glossar

• Animations
  Transitions bewegen ein Objekt von einem Zustand zum nächsten. Mit diesen Anima­tionen führen wir ein Ob­jekt durch mehrere Stufen und er­zielen komplexere Effekte. Ein Beispiel.
• Border
  Border ist der Rahmen um eine Box. Border darf keine nega­tiven Werte besitzen.
• Deklaration
  Die Deklaration besteht immer aus einer Eigenschaft und einem Ei­gen­schafts­wert, zum Beispiel font-size: 150%. In einer Dek­la­ra­tion muss hinter der Eigenschaft ein Doppelpunkt gesetzt verwendet werden.
• Eigenschaft
  Mit der Property wird die Ei­gen­schaft eines html-Ele­ments bestimmt. Zum Beispiel color.
• Eigenschaftswert
  Zur Eigenschaft gehört der Eigen­schafts­wert, zum Beispiel blue, green. Nach dem Eigen­schaftswert folgt ein Se­mi­ko­lon.
• Float
  Float ermöglicht es, dass Text um Text oder um eine Grafik fliesst.
  Die Eigenschaft beschreibt, ob ein Element fliessend sein soll und wo es fliessen soll.
  Die linke kleine Grafik arbeitet mit einem float:left
• Formatklassen respektive Klassen
  Klassen erkennt man am Punkt. Klassen dürfen auf einer Seite öfters vorkommen.
  Beispiel: .bild{margin-right:20px}
• Hover
  Der Hover-Effekt sieht man, wenn ein Benutzer mit einem Element auf der Webseite interagiert, indem er mit der Maus darüber fährt.
• Kommentar
  Ein Kommentar muss zwischen /* sowie */ geschrieben werden.
• IDs
  IDs erkannt man am # und dürfen auf einer Seite nur einmal vor­kommen. Angesprochen werden sie über <div id=”idname”>.
• Hacks/Patches
  Spezielle Codierungen in der CSS-Datei für Browser, die sich nicht an den Standard halten.
• Hyphens
  Mit Hyphens ist es möglich, auto­ma­tisier­te Silbentrennung und Zeilenumbrüche zu realisieren.
• Letter-Spacing
  Steuert den Abstand zwischen einzelnen Zeichen. Ein Beispiel:
  p {letter-spacing: 2px}
• Margin
  Margin definiert den Abstand zwi­schen dem Aussenrand und der Box. Margin darf negative Werte enthalten.
• Opacity
  Mit Opacity erzeugen Sie eine Transparenz.
• Padding
  Padding definiert den Abstand zwischen dem Inhaltsbereich und der Box. Padding darf keine nega­tiven Werte enthalten.
• Pseudoklassen
  Eine Pseudoklasse wie zum Beispiel a:hover darf nach dem Doppelpunkt keine Leerstelle haben.
• Section
  Eine Section bezeichnet einen Abschnitt eines durchgängigen Textes.
• Selektor
  Der Selektor wird oft Stylename genannt, zum Beispiel h2, h3, etc. Selektoren sind entweder
  ➤ der Name eines HTML-Elements (Typselektor)
  ➤ eine ID
  ➤ eine Klasse (class)
  Beachten Sie, dass hinter dem Selektor die Regeln inner­halb von geschwun­genen Klammern ste­hen.
• Transitions
  CSS-Transition erlaubt das Ändern einer Eigenschaft über einen Zeit­raum hinweg. Eine Transition hat jeweils einen Start- und End­zu­stand. Eine Transition braucht einen Auslöser, einen Trigger.
  Berühren
• Universalselektor
  Das Sternchen * ist ein Uni­versalselektor. Der Style * {padding: 0; margin: 0;} definiert die Abstände für alle HTML-Ele­mente auf einer Seite.
• Word-Spacing
  Steuert den Abstand zwischen den einzelnen Wörtern.