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
Bild: 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.