webmasters press Frank L. Schad CSS3 Grundlagen Autorisiertes Curriculum für das Webmasters Europe Ausbildungs- und Zertifizierungsprogramm

Transkript

1 webmasters press Frank L. Schad CSS3 Grundlagen Autorisiertes Curriculum für das Webmasters Europe Ausbildungs- und Zertifizierungsprogramm

2

3 webmasters press Frank L. Schad CSS3 Grundlagen Art.-Nr Version 4.0 vom Autor: Frank L. Schad webmasters akademie Nürnberg GmbH, Nürnberg, Germany Das vorliegende Schulungsskript ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne schriftliche Genehmigung der webmasters akademie Nürnberg GmbH urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder Verwendung in elektronischen Systemen sowie für die Verwendung in Schulungsveranstaltungen. Die Informationen in diesem Schulungsskript wurden mit größter Sorgfalt erarbeitet. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Autoren und Herausgeber übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene fehlerhafte Angaben und deren Folgen.

4

5 5 Inhalt Vorwort Teil 1: Grundlagen 1 Einführung CSS verwenden Einbinden von CSS-Vorgaben in den Dateikopf Allgemeine Syntax Maßeinheiten Kommentare Browserspezifische Eigenschaften mit Herstellerpräfix (Vendor Specific Prefix) Einbindung von CSS Auslagerung der CSS-Vorgaben in eine externe Datei Inline-Formatierungen Die Verwendung von Farben Das RGB-Farbmodell Hexadezimale Farbzuweisung Dezimale Farbzuweisung Allgemeine Vorgaben für Ihr Dokument Vererbung Hintergrundfarben definieren Die Maßeinheiten em und rem Überschriften formatieren Die Darstellung von strong, b, em und i definieren...40

6 6 5.6 Weitere Eigenschaften zur Textformatierung Hyperlinks formatieren Pseudoklassen und Pseudoelemente Pseudoklassen Verschiedene Zustände für Hyperlinks definieren Elemente automatisch durchzählen Überblick Pseudoklassen Pseudoelemente Initialen und andere typographische Effekte Pseudoelemente für automatisch erzeugten Inhalt Hintergründe, Konturen und Abstände Hintergrundfarben Innenabstände Einbinden von Hintergrundbildern Kachelmuster steuern Hintergrundbild positionieren Wasserzeicheneffekt Zusammenfassen der Eigenschaften Größenangaben für Hintergrundbilder Here Be Dragons: Farbverläufe in CSS Lineare Farbverläufe Radiale Farbverläufe Festlegen von Konturen Konturstärke Randstil Konturfarbe Alle Kontureigenschaften auf einmal definieren Außenabstände Klassen Textumfluss... 75

7 7 10 Größenangaben Angaben für Breite und Höhe Übersatz Mindest- und Maximalgrößen IDs und einfache Positionierung Positionierung von Elementen Statische Positionierung Relative Positionierung Absolute Positionierung Fixierte Positionierung Ändern der Anzeigeart und kontextbedingte Auswahl Ändern der Anzeigeart von Elementen Positionsbedingte Auswahlen Descendant Selector (Nachfahren-Selektor) Child Selector (Kind-Selektor) Adjacent Sibling Selector (Selektor für»benachbarte Geschwister«) General Sibling Selector (Selektor für alle nachfolgenden Geschwister) Attribut-Selektoren Einfacher Attribut-Selektor Tag mit Attribut-Selektor Wertabhängige Attribut-Selektoren Der Stern-Selektor Internet-Explorer-Optimierung Alternative CSS-Vorgaben für den IE mit Conditional Comments Seitenanzeige im Standardmodus HTML

8 8 Teil 2: Praxisbeispiele 15 Buttons mit Rollover-Effekt Der Klassiker: Pixelbilder als Buttons Allgemeine Formatierung Hintergrundbild und Größe definieren Ändern der Darstellungsart Linktext formatieren Rollover definieren Textschatten erzeugen Alternative: Sprites CSS-basierte Buttons ohne Grafik Kontur und Hintergrundfarbe hinzufügen Ecken abrunden Schatten hinzufügen Farbverlauf hinzufügen Rollover gestalten Wiederkehrende Layoutelemente und Textformatierung Projektvorgabe Allgemeine Formatierung und Layout Zentrierung des Inhalts Währungszeichen anhängen und Kodierungsmethode festlegen Pfeile Buttons gestalten Textfluss um Bilder und Clearfix Buttons positionieren Ein komplexes Layout mit HTML5- und CSS3-Elementen Projektvorgaben Allgemeine Formatierung Grundlayout

9 Formatierung der Hauptnavigation Entfernen der Listenpunkte Einrückung abschalten Horizontale Anordnung der Listenelemente Breiten- und Höhenangaben Konturen hinzufügen Farbverläufe einfügen und Links formatieren Formatierung der Subnavigation Gestaltung des Kopfbereichs Formatierung der Box Textformatierung Web Fonts Logo Gestaltung des Inhaltsbereichs Textformatierung Spaltensatz Automatische Silbentrennung Download-Links gestalten Gestaltung der rechten Spalte Schatten hinzufügen Ecken abrunden Anhang CSS-Farben Lösungen Index

10

11 Hintergrundfarben 57 Hintergründe, Konturen und Abstände In dieser Lektion lernen Sie: hh hh hh Hintergrundfarben und -bilder zu definieren. Farbverläufe mit CSS zu erzeugen. einem Element eine Kontur hinzuzufügen und Abstände festzulegen. 7.1 Hintergrundfarben Sie können mit CSS für jedes beliebige HTML-Element eine Hintergrundfarbe definieren. Das funktioniert sowohl für Blockelemente als auch für Inline-Elemente. Beispiele p { background-color: #d48e80; } a:hover { background-color: #3b8ed8; } Projekt»Nuraghen«(6) 10. Vergeben Sie für alle Hauptüberschriften <h1> die Hintergrundfarbe #aa0000. Nun sehen Sie auch deutlich eine der Haupteigenschaften von Blockelementen: Sie nehmen immer die gesamte zur Verfügung stehende Breite in Anspruch, auch wenn der Text selbst wesentlich kürzer ist. 11. Da dadurch die Textfarbe nicht mehr passend erscheint, ändern Sie diese in Weiß.

12 58 Hintergründe, Konturen und Abstände Allerdings klebt der Text noch ziemlich am Rand des roten»streifens«. Dies können Sie mit einer weiteren Eigenschaft ändern: 7.2 Innenabstände Den Innenabstand eines Elements können Sie mit dem Attribut padding und der Angabe von numerischen Werten beeinflussen: padding: 15px; Auch diese Werte können Sie stattdessen relativ zur Schriftgröße angeben: padding: 1em; oder padding: 1rem; Sie können auch für jede Seite individuelle Innenabstände definieren. Notieren Sie dazu entweder die separaten Attribute padding-top: 0; padding-bottom: 0.3em; padding-left: 0.7em; padding-right: 1em; oder Sie geben alle vier Werte durch Leerzeichen getrennt im Attribut padding an. Die Reihenfolge hierbei ist im Uhrzeigersinn: oben, rechts, unten, links. padding: oben rechts unten links; padding: 0 1em 0.3em 0.7em; Werte für padding sind natürlich meist nur dann sinnvoll, wenn das Element eine sichtbare Kontur oder eine Hintergrundfarbe hat. Projekt»Nuraghen«(7) 12. Vergeben Sie für die Überschriften mit der roten Hintergrundfarbe einen gleichmäßigen Innenabstand vom 0,25-fachen der Grundschriftgröße. 7.3 Einbinden von Hintergrundbildern Ebenso universell wie Hintergrundfarben lassen sich für jedes Element Grafiken als Hintergrundbilder einbinden. Die Syntax dafür lautet

13 Einbinden von Hintergrundbildern 59 background-image: url(pfad/zur/grafik.jpg); Zuerst müssen Sie mit url angeben, dass es sich um einen Dateipfad handelt. Danach folgt ohne Leerzeichen! in runden Klammern der Pfad zur Grafik nach dem gleichen Prinzip wie in HTML. Als Dateiformate können Sie entweder Pixelgrafiken in den bekannten Formaten JPEG, PNG oder GIF oder Vektorgrafiken im SVG-Format verwenden Kachelmuster steuern Mit CSS lässt sich die Darstellung von Hintergrundbildern sehr flexibel steuern. So können Sie z. B. die automatische Wiederholung abschalten: p { } background-image: url(grafik.jpg); background-repeat: no-repeat; Wenn Sie zusätzlich auch eine Hintergrundfarbe vergeben haben, kommt diese nun hinter dem Bild zum Vorschein. Weitere mögliche Werte für background-repeat sind: background-repeat: repeat (wiederholen, Standardwert) repeat-x (nur waagrecht wiederholen) repeat-y (nur senkrecht wiederholen) no-repeat (nicht wiederholen) Hintergrundbild positionieren Mit background-position können Sie die exakte Position des Hintergrundbilds numerisch festlegen. Geben Sie dazu zwei Werte durch Leerzeichen getrennt ein. Der erste Wert ist der horizontale Abstand von links, der zweite ist der vertikale Abstand von oben: p { } background-image: url(grafik.jpg); background-repeat: no-repeat; background-position: 1.5em 3em; Andere mögliche Werte anstelle numerischer Werte sind: background-position: top (oben bündig) bottom (unten bündig) center (horizontal oder vertikal zentriert) left (linksbündig) right (rechtsbündig)

14 60 Hintergründe, Konturen und Abstände Wasserzeicheneffekt Mit dem Attribut background-attachment können Sie festlegen, dass das Hintergrundbild beim Scrollen der Seite stehenbleibt. Der Text scrollt also über das Bild hinweg: p { } background-image: url(grafik.jpg); background-repeat: no-repeat; background-position: 1.5em 3em; background-attachment: fixed; Mögliche Werte sind: background-attachment: scroll (mitscrollen, Standardeinstellung) fixed (Hintergrundbild bleibt stehen) Zusammenfassen der Eigenschaften Alle genannten Eigenschaften für Hintergründe können Sie auch im»sammelattribut«background nach folgendem Muster angeben. Die einzelnen Werte werden dabei durch Leerzeichen getrennt. Die Reihenfolge spielt bis auf die beiden Werte für background-position keine Rolle: background: color url repeat position-x position-y attachment; also z. B. background: #fff url(grafik.jpg) no-repeat 1.5em 3em fixed; Dabei müssen Sie nicht zwingend alle Werte angeben, z. B. sieht man häufig folgende Angabe: background: url(grafik.jpg) no-repeat; Größenangaben für Hintergrundbilder Seit CSS 3 können Sie auch endlich die Größe von Hintergrundbildern bestimmen. Das Attribut dafür ist background-size (zurzeit noch mit Vendor Specific Prefixes) und erwartet zwei Werte (Breite und Höhe) durch Leerzeichen getrennt: -webkit-background-size: breite höhe; -moz-background-size: breite höhe; background-size: breite höhe; z. B.

15 Einbinden von Hintergrundbildern 61 -webkit-background-size: 2em 1em; -moz-background-size: 2em 1em; background-size: 2em 1em; In den meisten Fällen sind hier wohl Prozentangaben am sinnvollsten (bezogen auf die Größe des Elements, das das Hintergrundbild enthält). Um das Seitenverhältnis beizubehalten und das Bild nicht zu verzerren, sollten Sie zudem einen der beiden Werte auf auto setzen: -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto; oder z. B. -webkit-background-size: auto 70%; -moz-background-size: auto 70%; background-size: auto 70%; Automatische Größenanpassung von Hintergrundbildern Im Zusammenhang mit flexiblen Layouts, deren Größe sich an das jeweilige Gerät anpasst, sind aber vor allem auch die beiden Schlüsselwörter contain und cover nützlich, die Sie der Eigenschaft backgroundsize alternativ zu numerischen Werten zuweisen können: background-size: contain passt das Hintergrundbild automatisch so in das Element ein, dass es immer vollständig sichtbar ist. U. U. entstehen dadurch auch Leerräume, an denen die Hintergrundfarbe durchscheint (hier grau dargestellt):

16 62 Hintergründe, Konturen und Abstände background-size: cover passt das Hintergrundbild so ein, dass es das Element auf jeden Fall vollständig ausfüllt. Ggf. werden dadurch Teile des Hintergrundbilds abgeschnitten (hier abgeblendet dargestellt). Welche Teile das sind, können Sie mit background-position (s.o.) steuern. Diese automatischen Einpassungen werden auch bei einer Größenänderung des Browserfensters dynamisch aktualisiert! f Die Eigenschaft background-size lässt sich zurzeit noch nicht verlässlich in das»sammelattribut«background integrieren und muss daher separat notiert werden. Projekt»Nuraghen«(8) 13. Legen Sie die Grafik nuraghe.jpg als Hintergrundbild für den body der Seite fest. Positionieren Sie sie oben links und sorgen Sie dafür, dass sie nicht kachelt. Beim Scrollen soll das Bild stehenbleiben, und es soll die Seite auf jeden Fall vollständig bedecken Here Be Dragons: Farbverläufe in CSS Eine der beeindruckendsten, gleichzeitig aber auch komplexesten Funktionen in CSS 3 sind wohl die Farbverläufe, die in früheren CSS-Versionen ebenfalls mit Pixelbildern realisiert werden mussten. Die Vorteile liegen auf der Hand: Im Gegensatz zu Pixelbildern haben in CSS definierte Farbverläufe keine feste Größe, d. h. sie passen ihre Größe ohne Interpolation automatisch an die Größe des Elements an. Außerdem muss bei einer Farbänderung nicht jedesmal die Pixelgrafik in Photoshop neu erzeugt und gespeichert werden, sondern es reicht eine kleine Änderung der Farbwerte in CSS. Einen Farbverlauf weisen Sie in CSS ebenfalls mit der Eigenschaft background-image zu. Als Wert folgt dann jedoch anstelle der bisher bekannten URL die Definition des Verlaufs. Wie in den meisten Grafikprogrammen haben Sie auch hier die Wahl zwischen einem linearen und einem radialen Verlauf: background-image: linear-gradient(); background-image: radial-gradient();

17 Here Be Dragons: Farbverläufe in CSS 63 In den runden Klammern folgen dann die Definitionen für Verlaufsrichtung, Farben usw. Ärgerlicherweise müssen auch Farbverläufe zurzeit noch mit Vendor Specific Prefixes versehen werden. Diesmal jedoch nicht für die Eigenschaft, sondern für den Wert: background-image: -webkit-linear-gradient(); background-image: -moz-linear-gradient(); background-image: linear-gradient(); background-image: -webkit-radial-gradient(); background-image: -moz-radial-gradient(); background-image: radial-gradient(); Ich empfehle Ihnen jedoch, zunächst nur die standardkonforme Variante des Verlaufs fertigzustellen, und erst am Ende die Varianten mit den Präfixen per Copy & Paste hinzuzufügen Lineare Farbverläufe Die grundlegende Syntax für lineare Farbverläufe sieht folgendermaßen aus (ist aber um zusätzliche Optionen erweiterbar): background-image: linear-gradient(winkel, Anfangsfarbe, Endfarbe); Die Angaben zum Verlaufswinkel werden in den browserspezifischen Varianten anders interpretiert als in der standardkonformen Variante! f Beispiele: background-image: -webkit-linear-gradient(0deg, red, blue); background-image: -moz-linear-gradient(0deg, red, blue); background-image: linear-gradient(90deg, red, blue); erzeugt einen horizontalen Verlauf von links (rot) nach rechts (blau). background-image: -webkit-linear-gradient(180deg, red, blue); background-image: -moz-linear-gradient(180deg, red, blue); background-image: linear-gradient(-90deg, red, blue); erzeugt einen horizontalen Verlauf von rechts (rot) nach links (blau).

18 64 Hintergründe, Konturen und Abstände background-image: -webkit-linear-gradient(90deg, red, blue); background-image: -moz-linear-gradient(90deg, red, blue); background-image: linear-gradient(0deg, red, blue); erzeugt einen vertikalen Verlauf von unten (rot) nach oben (blau). background-image: -webkit-linear-gradient(45deg, red, blue); background-image: -moz-linear-gradient(45deg, red, blue); background-image: linear-gradient(45deg, red, blue); erzeugt einen diagonalen Verlauf von unten links (rot) nach oben rechts (blau). background-image: -webkit-linear-gradient(-90deg, red, blue); background-image: -moz-linear-gradient(-90deg, red, blue); background-image: linear-gradient(180deg, red, blue); erzeugt einen vertikalen Verlauf von oben (rot) nach unten (blau). Dies ist in allen Varianten die Standardeinstellung, d. h. in diesem Fall kann die Angabe für den Winkel weggelassen werden: background-image: -webkit-linear-gradient(red, blue); background-image: -moz-linear-gradient(red, blue); background-image: linear-gradient(red, blue); f Anstelle des Winkels können auch Schlüsselwörter wie z. B. left, top oder auch bottom right verwendet werden. Aber auch diese verhalten sich in den unterschiedlichen Varianten inkonsistent. So heißt z. B.»von links nach rechts«in -webkit und -moz: left in der Standard-Syntax: to right Farbangaben Für die Farbwerte können Sie natürlich jede beliebige Notation verwenden. Am häufigsten sind wohl Hex-Werte, aber es sind sogar Alphatransparenzen mit RGBA-Werten möglich:

19 Here Be Dragons: Farbverläufe in CSS 65 background-image: linear-gradient(0deg, #fff, rgba(255, 255, 255, 0.5)); erzeugt einen vertikalen Verlauf von unten (weiß deckend) nach oben (weiß mit 50%-iger Deckkraft). Sie können natürlich auch mehr als zwei Farben angeben: background-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet); erzeugt einen horizontalen Verlauf von links nach rechts in Regenbogenfarben. Color Stops Und schließlich können Sie mit sogenannten Color Stops die Position der Farbübergänge verändern. Color Stops werden nach einem Leerzeichen als Prozentwerte hinter die betreffende Farbe geschrieben, z. B.: background-image: linear-gradient(90deg, red, blue 15%); erzeugt einen horizontalen Verlauf von links nach rechts, wobei der Übergang von Rot nach Blau bereits nach 15% des Verlaufs erfolgt, und nicht wie standardmäßig erst bei 50% Radiale Farbverläufe Die allgemeine, standardkonforme Syntax für radiale Verläufe lautet: background-image: radial-gradient(form at Position-x Position-y, Anfangsfarbe, Endfarbe); wobei hier die Optionen für Form und Position optional sind. Werden sie weggelassen, entsteht ein Verlauf, dessen Zentrum im Mittelpunkt des Elements steht, und der seine elliptische Form an die des Elements anpasst, z. B.: background-image: radial-gradient(red, blue);

20 66 Hintergründe, Konturen und Abstände Der Standardwert für die Form ist ellipse. Mit dem Wert circle lässt sich eine Kreisform erzwingen: background-image: radial-gradient(circle, red, blue); Zusätzlich können Sie mit der Option at Position-x Position-y den Mittelpunkt des Verlaufs verschieben, z. B.: background-image: radial-gradient(circle at 1em 1em, red, blue); background-image: radial-gradient(at right bottom, red, blue); Analog zum linearen Farbverlauf lassen sich natürlich auch hier die Anzahl der Farben sowie die Color Stops ändern.

21 Festlegen von Konturen 67 Auch beim radialen Verlauf hat das W3C zwischenzeitlich die Syntax geändert! Die browserspezifischen Angaben mit Präfix müssen Sie noch nach der alten Syntax notieren: f background-image: -webkit-radial-gradient(position-x Position-y, Form, Anfangsfarbe, Endfarbe); background-image: -moz-radial-gradient(position-x Position-y, Form, Anfangsfarbe, Endfarbe); Somit müsste die vollständige Angabe eines radialen Verlaufs z. B. so aussehen: background-image: -webkit-radial-gradient(1em 1em, circle, red, blue); background-image: -moz-radial-gradient(1em 1em, circle, red, blue); background-image: radial-gradient(circle at 1em 1em, red, blue); Zudem existiert noch eine weitere, völlig andere Syntax zur Erzeugung linearer und radialer Farbverläufe speziell für Webkit-basierte Browser, der Sie im Web vielleicht noch hier und da begegnen, z. B.: background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, red), color-stop(1, blue)); Diese experimentelle Syntax stammt noch aus den Anfangszeiten von CSS 3 und ist veraltet. Sie wird daher in diesem Buch nicht mehr besprochen. Zugegeben, durch die unterschiedliche Schreibweise für verschiedene Browser sind CSS-Verläufe relativ komplex und fehleranfällig, und es ist darüber hinaus möglich, dass sich die Syntax in nächster Zeit nochmals ändert. Aus diesem Grund gibt es im Web mittlerweile zahlreiche grafische Tools, mit denen Sie sich ähnlich wie in Photoshop den gewünschten Code automatisch erzeugen lassen können, z. B Festlegen von Konturen Sie können jedem beliebigen Objekt auf Ihrer Seite eine Kontur verleihen. Dazu stehen Ihnen drei Optionen zur Verfügung: border-width (Konturstärke), border-style (Randstil) und border-color (Konturfarbe). Um eine sichtbare Kontur zu erhalten, müssen Sie die drei Eigenschaften border-width, border-style und border-color immer gemeinsam notieren. f

22 170 Index Index bottom 88 box-shadow 115, 151 box-sizing 131 float 75 font-family 18 font-size 20 font-style 41 font-variant 42 font-weight 140 :after 54 :before 54 :first-child 50, 134 :first-letter 53 :first-line 53 :last-child 50, 134 :nth-child(n) 49 :nth-of-type(n) 50 :only-child 50 Child-Elemente 34 Child Selector 97 class (HTML-Attribut) 72 clear 75, 123 Clearfix 125 color 29 Color Stops 65 Siehe auch Farbverläufe Conditional Comments 103 Descendant-Elemente 34 Descendant Selector 95 display 94, 133, 148 div (HTML-Tag) 82 General Sibling Selector 99 Giant Font Size Bug 36 Größenangaben 77 height 77 Hintergrundbilder 58 Hintergrundfarben 34, 57 hyphens 144 Abgerundete Ecken 114, 152 absolute (position) 87, 88 Adjacent Sibling Selector 98 Ancestor-Elemente 34 Attribut-Selektoren 99 Außenabstand 69 background-attachment 60 background-color 34, 57 background-image 59 background-position 59 background-repeat 59 background-size 60 contain 61 cover 61 benannte Farben 31, 156 border 69 border-color 67, 69 border-radius 114, 152 border-style 67, 68 border-width 67, 68 ease-in-out (Timing Function) 149 ease-in (Timing Function) 149 ease-out (Timing Function) 149 ease (Timing Function) 149 Ebenen 88 Ebenenhierarchie 89 Einbindung von CSS 16, 24, 25 em (Maßeinheit) 21, 35, 42 Erstzeileneinzug 42 Farben 28 dezimal 31 hexadezimal 29 Farbverläufe 62 linear 63 radial 65 fixed (position) 87, 92 id (HTML-Attribut) 81 inherit 135 Initialen 53 Innenabstand 58 Internet-Explorer-Optimierung 103 Kapitälchen 42 Kind-Selektor Siehe Child Selector Klassen 72 mehrere zuweisen 126 Kommentare 21 Konturen 67 Laufweite 42 left 88 letter-spacing 42

23 Index 171 linear (Timing Function) 149 line-height 42 list-style-image 132 list-style-type 132 margin 69 Maßeinheiten 21 Mauszustände 46 max-height 80 max-width 80 min-height 80, 147 min-width 80, 119 Nachfahren-Selektor Siehe Descendant Selector resize 79 Responsive Webdesign 14, 35 RGB 28, 32 RGBA 32, 112 right 88 Rollover-Effekt 108 Schatten Box 115, 151 Text 111 Schriftarten 19 Schriftgröße 20 Selektoren 18 Silbentrennung 144 span (HTML-Tag) 147 Sprites 112 static (position) 87 Syntax 18 visibility 148 Web Fonts 136 width 77 word-spacing 42 Zebratabellen 50 Zeichenabstand 42 Zeilenabstand 42 Zentrierung des Inhalts im Browserfenster 119 z-index 89 opacity 148 overflow 78, 123 padding 58 Parent-Elemente 34 Polyfills 105 Positionierung 87 absolut 88 fixiert 92 relativ 88 statisch 87 Positionsbedingte Auswahlen 95 Pseudoelemente 53 Pseudoklassen 46 text-align 42 text-decoration 43 Textfarbe Siehe color text-shadow 111 Textumfluss 75 Timing Functions 149 top 88 transition 149 Übergänge Siehe transition Übersatz 78 relative (position) 87, 88 rem (Maßeinheit) 21, 38 Vendor Specific Prefixes 22 Vererbung 33 Verläufe Siehe Farbverläufe