Was bedeuten die wichtigsten CSS-Begriffe?

mit Keine Kommentare

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

Informationen gemäss Stand vom 26.4.2021

Ohne Cascading Style Sheets (CSS) geht auf modernen Web­sites gar nichts. Lernen wir deshalb die wich­tigsten Begriffe zu CSS kennen.

Vokabular, Glossar, Fachwörter

Bildquelle von 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 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 Eigen­schafts­wert, 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 Eigenschafts­wert, zum Beispiel blue, green. Nach dem Eigenschaftswert 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 resp. 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 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 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 stehen.
  • Transitions
    CSS-Transition erlaubt das Ändern einer Eigenschaft über einen Zeitraum hinweg. Eine Transition hat jeweils einen Start- und Endzustand. Eine Transition braucht 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.