Was bedeuten die wichtigsten CSS-Begriffe?

mit Keine Kommentare

Definition der Cascading Stylesheets Fachbegriffe

Ohne Cascading Stylesheets (CSS) geht auf modernen Websites nichts, gar nichts. Lernen wir deshalb die wichtigsten Begriffe zu CSS kennen.

Informationen gemäss Stand vom 25.1.2024

Vokabular, Glossar, FachwörterBild: Pixabay / geralt / Pixabay-Lizenz

Cascading Stylesheets Vokabular / Glossar

  • Animations
    Transitions bewegen ein Objekt von einem Zustand zum nächsten. Mit diesen Animationen führen wir ein Objekt durch mehrere Stufen und erzielen komplexere Effekte. Ein Beispiel.
  • Border
    Border ist der Rahmen um eine Box. Border darf keine negativen Werte besitzen.
  • Deklaration
    Die Deklaration besteht immer aus einer Eigenschaft und einem Eigenschaftswert, zum Beispiel font-size: 150%. In einer Deklaration muss hinter der Eigenschaft ein Doppelpunkt gesetzt verwendet werden.
  • Eigenschaft
    Mit der Property wird die Eigenschaft eines html-Elements bestimmt. Zum Beispiel color.
  • Eigenschaftswert
    Zur Eigenschaft gehört der Eigenschaftswert, zum Beispiel blue, green. Nach dem Eigenschaftswert folgt ein Semikolon.
  • Float
    Float ermöglicht es, dass Text um Text oder um eine Grafik fliesst.
    Die Eigenschaft beschreibt, ob ein Element fliessend sein 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 öfter 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 vorkommen. 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, automatisierte 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 zwischen 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 negativen Werte enthalten.
  • Pseudoklassen
    Eine Pseudoklasse wie 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 innerhalb von geschwungenen Klammern stehen.
  • Transitions
    CSS-Transition erlaubt das Ändern einer Eigenschaft über einen Zeitraum hinweg. Eine Transition hat jeweils einen Start- und Endzustand. Eine Transition benötigt einen Auslöser, einen Trigger.

    Berühren
  • Universalselektor
    Das Sternchen * ist ein Universalselektor. Der Style * {padding: 0; margin: 0;} definiert die Abstände für alle HTML-Elemente auf einer Seite.
  • Word-Spacing
    Steuert den Abstand zwischen den einzelnen Wörtern.