CSS-Tutorial
-
CSS steht für „Cascading Style Sheets“ und ist eine sog. Stylesheet-Sprache
- CSS ermöglicht die Trennung von Inhalt und Aussehen bei der Gestaltung von Webseiten
- ...mehr lesen...
- Mit CSS-Anweisungen werden beim Webdesign HTML-Elemente formatiert
- CSS-Anweisungen bestehen aus einem oder mehreren Selektoren und aus einem Anweisungsblock, der aus einer oder mehreren Anweisungen besteht
- ...mehr lesen...
-
CSS kann auf drei verschiedene Arten genutzt werden:
-
External Style-Sheets
-
Internal Style-Sheets
-
Inline-Styles
-
- Die gebräuchlichste Form sind die „External Style-Sheets“, bei der die CSS-Anweisungen in externen Dateien definiert und mit „link“-Elementen mit HTML-Dateien verknüpft werden
- ...mehr lesen...
- Mit der CSS-Eigenschaft „background-color“ kann die Hintergrundfarbe von Elementen definiert werden
- Mit der CSS-Eigenschaft „background-image“ können Bilder als Hintergrund für Elemente verwendet werden
- Mit den Eigenschaften „background-repeat“, „background-position“, „background- attachement“ und „background-size“ können Hintergrundbilder weiter spezifiziert werden
- ...mehr lesen...
- Mit der CSS-Eigenschaft „color“ kann die Textfarbe von Elementen definiert werden
- Weitere in diesem Kapitel behandelten Elemente sind „text-align“ (horizontale Ausrichtung), „text-decoration“ (über-, unter- oder durchgestrichen), „text-transform“ (Groß-/Kleinschreibung), „text-indent“ (Texteinrückung), „letter-spacing“ (Zeichenabstand), „line-height“ (Zeilenabstand), „word-spacing“ (Breite des Leerzeichens), „white-space“ (Zeilenumbruch verhindern) und „vertical-align“ (Ausrichtung Blider zu Text)
- ...mehr lesen...
- Mit der CSS-Eigenschaft „font-family“ können Schrifttypen und Schriftarten definiert werden
- Weitere CSS-Eigenschaften zur Definition von Schrift sind „font-size“ (Schriftgröße), „font-weight“ (Schriftstärke), „font-style“ (Schriftstil) und „font-variant“ (Schriftvariante)
- Die Shorthand-Property zur Definition von Schrift ist „font“
- ...mehr lesen...
- Mit der CSS-„@font-face“-Regel können Schriftarten verwendet werden, die nicht vorinstalliert sind
- Dazu werden die entsprechenden Schriftarten auf den Webserver gespeichert und mit dem „src“-Attribut der „@font-face“-Regel darauf verwiesen
- Mit den CSS-Eigenschaften „font-weight“ und „font-style“ kann die entsprechende Schriftvariante definiert werden
- ...mehr lesen...
- Für Links können u. a. CSS-Eigenschaften für Hintergrund, Text und Schrift, wie z. B. „background-color“, „color“ oder „font-family“, verwendet werden
- Links können in Abhängigkeit ihres Zustands (noch nicht angeklickt, angeklickt, Mauszeiger über Link, beim Anklicken) gestylt werden
- ...mehr lesen...
- Mit der CSS-Eigenschaft „list-style-type“ können die Aufzählungszeichen von Listen definiert werden
- Mit der CSS-Eigenschaft „list-style-image“ können Bilder als Aufzählungszeichen verwendet werden
- ...mehr lesen...
- Alle HTML-Elemente haben eine Box bestehend aus verschiedenen verschachtelten Box-Elementen, die mit den CSS-Eigenschaften „padding“, „border“, „outline“ und „margin“ definiert werden
- Die Abmessungen von HTML-Elementen werden mit den CSS-Eigenschaften „height“ und „width“, sowie „max-height“, „max-width“, „min-height“ und „min-width“ definiert
- Mit der CSS-Eigenschaft „box-sizing“ kann definiert werden ob sich die Eigenschaften „height“ und „width“ nur auf den Inhalt oder auf die Box einschließlich Rahmen („border“) beziehen sollen
- ...mehr lesen...
- Mit den CSS-Eigenschaften „border-style“ (Rahmenstil), „border-width“ (Rahmen-Breite) und „border-color“ (Rahmenfarbe) können Rahmen für HTML-Element definiert werden
- Mit der CSS-Eigenschaft „border-radius“ können abgerundete Rahmen und mit „border-image“ Rahmen aus Bildern erstellt werden
- ...mehr lesen...
- Mit der CSS-Eigenschaft „padding“ kann der Abstand zwischen Inhalt und Rahmen von HTML-Elementen definiert werden
- Für die einzelnen Seiten gibt es die CSS-Eigenschaften „padding-top“, „padding-right“, „padding-bottom“ und „padding-left“
- ...mehr lesen...
- Mit der CSS-Eigenschaft „margin“ kann der Abstand eines Elements zu benachbarten Elementen bzw. zum Rand des sichtbaren Bereichs des Browsers definiert werden
- Für die einzelnen Seiten gibt es die CSS-Eigenschaften „margin-top“, „margin-right“, „margin-bottom“ und „margin-left“
- ...mehr lesen...
- Mit den CSS-Eigenschaften „outline-style“ (Stil der Umrandung), „outline-width“ (Breite der Umrandung) und „outline-color“ (Farbe der Umrandung) können Umrandungen für HTML-Element definiert werden
- Mit der CSS-Eigenschaft „outline-offset“ kann ein Offset für die Umrandung definiert werden
- Mit der Shorthand-Property „outline“ können die drei Eigenschaften „outline-width“, „outline-style“ und „outline-color“ mit einer Eigenschaft definiert werden
- ...mehr lesen...
- Mit der CSS-Eigenschaft „box-shadow“ kann ein HTML-Element mit einem Schatten versehen werden
- Mit der CSS-Eigenschaft „text-shadow“ kann Text mit Schatten versehen werden
- ...mehr lesen...
- Mit der CSS-Eigenschaft „opacity“ können HTML-Elemente transparent dargestellt werden
- Mit RGBA-Werten können einzelne Bereiche des Box-Model, d. h. Inhalt (Hintergrund und Schrift), Rahmen und Umrandung, transparent dargestellt werden
- ...mehr lesen...
- Mit den CSS-Eigenschaften „border-width“, „border-style“ und „border-color“ kann der Rahmen von Tabellen und Tabellenfeldern definiert werden
- Mit der CSS-Eigenschaft „border-collapse“ kann definiert werden, ob die Rahmen von Tabelle und Tabellenfelder ineinander oder getrennt dargestellt werden
- ...mehr lesen...
- Mit der CSS-Eigenschaft „display“ kann definiert werden ob und wie ein Element angezeigt wird
- Dabei sind die Werte „non“ (nicht anzeigen), „block“ (wie ein Block-Element), „inline“ (wie ein Inline-Element) und „inline-block“ (wie ein Inline-Element mit Abmessunen)
- Mit der CSS-Eigenschaft „visibility“ können Elemente angezeigt („visible“) oder versteckt („hidden“) werden
- ...mehr lesen...
- Mit der CSS-Eigenschaft „position“ kann die Art und Weise definiert werden, wie HTML-Elemente auf einer Webseite positioniert werden
- Für die eigentliche Positionierung werden die CSS-Eigenschaften „top“, „right“, „bottom“ und „left“ verwendet
- Mit der CSS-Eigenschaft „z-index“ kann bei überlappenden Elementen die Darstellungs-Reihenfolge festgelegt werden
- ...mehr lesen...
- Mit der CSS-Eigenschaft „overflow“ kann definiert werden, wie der überstehende Inhalt eines Elements behandelt wird
- Mit den CSS-Eigenschaften „overflow-x“ und „overflow-y“ kann der Überlauf in horizontaler („x“) und vertikaler („y“) Richtung getrennt definiert werden
- ...mehr lesen...
- Mit der CSS-Eigenschaft „float“ können Elemente auf die rechte oder linke Seite ihres Container-Elements angeordnet werden
- Mit der CSS-Eigenschaft „clear“ kann der normale Elementfluss wieder hergestellt werden
- ...mehr lesen...
- Mit der CSS-Eigenschaft „column-count“ kann die Anzahl an Spalten und mit der CSS-Eigenschaft „column-gap“ der Abstand zwischen den Spalten definiert werden
- Mit der CSS-Eigenschaft „column-rule“ kann ein Trennstrich zwischen den Spalten eingefügt und gestaltet werden
- Weitere Spalteneigenschaften sind „column-span“ (über wieviele Spalten ein Element gehen soll) und „column-width“ (Breite, die einer Spalte mindestens zur Verfügung stehen muss)
- ...mehr lesen...
- Sollen für mehrere Selektoren die selben Deklarationen verwendet werden, so diese Selektoren durch Komma getrennt vor den Deklarationsblock geschrieben werden
- Mit Hilfe von Kombinatoren (Leerzeichen, „>“, „~“, „+“) können Deklarationen für Elemente definiert werden, die in einer bestimmten Beziehung zu anderen Elementen stehen
- ...mehr lesen...
- Mit Pseudo-Klassen können Elemente in Abhängigkeit ihres Zustandes formatiert werden
- Mit „Dynamischen Pseudoklassen“ können Elemente in Abhängigkeit ihres sich ändernden Zustands formatiert werden (z. B. „:link“, „:hover“, „:active“, „:visited“)
- Mit „Strukturellen Pseudoklassen“ können Elemente in Abhängigkeit ihrer Position im HTML-Dokument formatiert werden (z. B. „:first-child“, „:last-child“, „:first-of-type“, „:last-of-type“)
- ...mehr lesen...
- Mit Pseudo-Elementen werden bestimmte Element-bereiche angesprochen (z. B. „::first-line“, „::first-letter“) bzw. erzeugt (z. B. „::before“, „::after“)
- Mit „::first-line“ kann die erste Zeile und mit „::first-letter“ der erste Buchstabe in einem Element angesprochen werden
- Mit „::before“ kann direkt vor und mit „::after“ direkt nach einem Element Inhalt eingefügt werden
- ...mehr lesen...
- Attribut-Selektoren sind Selektoren, die HTML-Elemente anhand von Attributen oder von Attributwerten ansprechen
- Mit dem „[Attribut]“-Selektor können Elemente angesprochen werden, die ein bestimmtes Attribut verwenden, unabhängig davon, welcher Wert für das Attribut verwendet wird
- Mit dem „[Attribut=“Wert“]“-Selektor können Elemente angesprochen werden, die ein bestimmtes Attribut mit einem bestimmten Wert verwenden
- ...mehr lesen...
- Mit CSS-Transformationen können Elemente in ihrer Form verändert, d. h. transformiert werden
- Mit den 2D-Transformationen könne Elemente zweidimensional verschoben („translate()“), gedreht („rotate()“), skaliert („scale()“) und windschief verzerrt („skew()“) werden
- Die CSS-Methode „matrix()“ ist eine Kombination der Methoden „scale()“, „skew()“ und „transform()“
- ...mehr lesen...
- Mit CSS-Transformationen können Elemente in ihrer Form verändert, d. h. transformiert werden
- Mit 3D-Transformationen können Elemente um ihre X-, Y- und Z-Achse dreidimensional rotiert werden
- Die CSS-Methode „rotate3d()“ ist eine Kombination der drei Methoden „rotateX()“, „rotateY()“ und „rotateZ()“
- ...mehr lesen...
- Mit CSS-Transitions (Übergängen) können Eigenschaften von Elementen von einem Wert zu einem anderen Wert, mit einem stetigen Übergang, geändert werden
- Mit „transition-property“ können die Eigenschaften für den Übergang, mit „transition-duration“ die Dauer, mit „transition-timing-function“ die Übergangsfunktion und mit „transition-delay“ die Verzögerung angegeben werden
- Mit der Shorthand-Property „transition“ können alle „transition“-Eigenschaften gleichzeitig definiert werden
- ...mehr lesen...
- Mit CSS-Animationen können mehrstufige Übergänge definiert werden
- Mit der „@keyframes“-Regel wird definiert, welche Eigenschaften wann welche Werte annehmen sollen
- Mit der CSS-Eigenschaft „animation-name“ wird auf eine „@keyframes-Regel“ verwiesen
- Weitere CSS-Animations-Eigenschaften sind „animation-duration“ (Dauer), „animation-delay“ (Verzögerung), „animation-iteration-count“ (Wiederholungen), „animation-direction“ (Richtung) und „animation-timing-function“ (Verlaufsfunktion)
- Mit der Shorthand-Property „animation“ können alle sechs Eigenschaften mit einer Eigenschaft definiert werden
- ...mehr lesen...
- Mit Media-Queries können CSS-Deklarationen in Abhängigkeit von Medientypen (Typen von Endgeräten, wie z. B. Drucker oder Bildschirme) und Medienmerkmalen (Darstellungs-Charakteristika, wie z. B. maximale sichtbare Breite und Höhe) definiert werden
- Gängige Medienmerkmale sind „max-width“, „min-width“, „max-height“, „min-height“, „max-device-width“, „min-device-width“, „max-device-height“, „min-device-height“ und „orientation“
- ...mehr lesen...
- Mit Hilfe von Icon-Bibliotheken können sehr einfach Icons auf Webseiten verwendet werden
- Bei Image-Sprites werden mehrere Bilder zu einem zusammengefasst, was Zeit und Datenvolumen beim Seitenaufbau spart
- Mit der CSS-Eigenschaft „clip“ können Bildausschnitte angezeigt werden
- Mit Hilfe von CSS-Zählern können Elemente automatisch durchnummeriert werden
- Mit der CSS-Eigenschaft „cursor“ kann die Form des Cursors über einem Element geändert werden
- ...mehr lesen...