CSS: Text

Nebst Farben kommt bei einer Website-Gestaltung auch verschiedene Text-Elemente vor. In dieser Aufgabe untersuchen wir die unterschiedlichen Deklarationen zum Thema «Text».

Ziel(e)

• Ich kann CSS-Deklarationen zum Thema «Text» einsetzen.

• Ich weiss, wie man eine eigene Schrift einsetzen kann.

• Ich weiss, was ein Pseudo-Element im CSS ist und warum es sinnvoll ist, dies einzusetzen.

Aufgabe

Text-CSS-Deklarationen

Recherchiere im Internet die folgenden «wichtigen» CSS-Deklarationen. Beantworte wo vorhanden zusätzlich die Fragen.

Eigenschaft	Mögliche Werte
font-family	Schriftname> Warum fügt man oft mehrere Schriftnamen kommagetrennt hintereinander auf?
font-size	Pixel>, Prozentwert>, EM> Was ist der Unterschied?
font-weight	normal, bold
font-style	normal, italic, oblique
text-transform	uppercase, lowercase, capitalize
text-decoration	none, underline, overline, line-through, blink
line-height	Pixel>, Prozentwert>, EM>, Zahl>, normal
text-align	left, right, center, justify
text-shadow	drei Längenangaben & eine Farbe»

Erstelle dir zusätzlich eine HTML + CSS-Datei und probiere die CSS-Deklaration aus oder arbeite mit Live-Beispielen im Internet. Entscheide dich für diese Variante, wo du mehr lernst.

Eigene Schrift

Wie kann man, neben den Standardschriften, die auf jedem PC installiert sind, eigene Schriften einsetzen?

Pseudo-Elemente

Finde heraus, was Pseudo-Elemente im CSS und informiere dich über folgende Pseudo-Elemente:

• :first-letter

• :visited

• :hover

• :active

Warum ist es sinnvoll, diese Elemente einzusetzen?

Halte alles wie gewohnt in deinem Projektjournal fest und arbeite mit Beispielen.