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

mit Keine Kommentare

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

Vokabular, Glossar, Fachwörter
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.