E-Book Startseite Karteikarten-Programm
0
Inhalt dieser Seite
  1. Schrift und Text

Schrift und Text

Es gibt insgesamt 16 verschiedene Design-Möglichkeiten für Schrift und Text in CSS die wir Ihnen vorstellen wollen. In unseren Beispielen zeigen wir Ihnen wie man Eigenschaften an spezielle Gruppen von HTML-Tags übermittelt. Des Weiteren gibt es noch 2 andere Möglichkeiten wie Sie Elemente formatieren können (dies wurde ja bereits erklärt).
Die 1. Eigenschaft ist dafür gedacht um die Textfarbe bzw. Schriftfarbe festzulegen. Als Wert sind englische Farbangaben und HEX-Angaben erlaubt. Übrigens in den Anzeigebeispielen zeigen wir Ihnen, wie sich die Formatierungen auf die Texte auswirken. Nun wieder zurück zu dem Beispiel:

h1 {
    color: #FF0000;
}
 
p {
    color: blue;
}
Anzeigebeispiel
Anzeigebeispiel


Als 2. Schriftformatierung wollen wir Ihnen die Einstellung der Schriftart erklären. Dazu benötigen Sie die Eigenschaft "font-family". Als Wert sind die üblichen Schriftarten zu verwenden. Wichtig zu wissen: Verwenden Sie keine ausgewöhnlichen Schriftarten, wenn diese nicht auf jedem PC standarmäßig installier sind (verwenden Sie z. B. Arial, sans-serif oder Times).

h1 {
    font-family: Arial;
}
 
p {
    font-family: sans-serif;
}
Anzeigebeispiel
Anzeigebeispiel


Nun geht es weiter mit der Schriftgröße. Die Angaben für Schriftgrößen sind sehr vielseitig. Zusätzlich zu den "nummerischen" Werten (z. B. 12px, 1em oder 5cm) sind auch verschiedene Schlüsselwörter verwendbar. Diese Gruppe kann man aufteilen in absolute und relative Schlüsselwörter. Es gibt folgende absolute Schlüsselwörter: xx-large (extra extra groß), x-large (extra groß), large (groß), medium (mittel), small (klein), x-small (extra klein) und xx-small (extra extra klein). Als relative Schlüsselwörter gelten: smaller (kleiner in Bezug auf Elternelement) und bigger (größer in Bezug auf Elternelement). Übrigens, die Prozentangaben, gehören zur Gruppe der nummerischen Werte, beziehen sich jedoch immer auf die Größe des Elternelements. Als Eigenschaft benötigen Sie bei der Schriftgröße "font-size". Hier nun ein Beispiel für CSS-Angaben:

h1 {
    font-size: 12px;
}
 
p {
    font-size: x-small;
}
Anzeigebeispiel
Anzeigebeispiel


Es geht weiter mit dem Schriftstil. Der Schriftstil wird mit der Eigenschaft font-style festgelegt. Als Wert für den Schriftstil bieten sich folgende Möglichkeiten an: italic (kursiver Text), oblique (schräggestellter Text) und normal (normaler Text). Der Wert "normal" ist somit eigentlich überflüssig, da dieser Stil automatisch verwendet wird. Dazu folgendes Beispiel:

h1 {
    font-style: italic;
}
 
p {
    font-style: oblique;
}
Anzeigebeispiel
Anzeigebeispiel


Nun wollen wir Ihnen die Schriftvariante (font-variant) vorstellen: Als Wert von dieser Eigenschaft ist normal (normale Schriftvariante) und small-caps (spezielle Schriftvariante: Kapitälchen) verwendbar. Bei den Kapitälchen werden aus allen Buchstaben "Großbuchstaben", die jedoch an die Größe der Kleinbuchstaben angepasst werden. Die "richtigen" Großbuchstaben werden ein wenig vergrößert und "fett" hervorgehoben. Die Angabe "normal" ist ebenfalls wieder überflüssig, darf jedoch selbstverständlich verwendet werden.

h1 {
    font-variant: small-caps;
}
 
p {
    font-variant: normal;
}
Anzeigebeispiel
Anzeigebeispiel


Weiter geht es mit dem Schriftgewicht. Bei dem Schriftgewicht handelt es sich eigentlich um die Stärke der Schrift. Gekennzeichnet wird das Schriftgewicht mit der Eigenschaft "font-weight". Es gibt verschiedene Möglichkeiten, die als Werte angegeben werden dürfen. Als "Wort-Angaben" sind die Begriffe bold (fett), bolder (extra fett), lighter (dünner) und normal möglich. Des Weiteren sind die Hunderterzahlen von 100 bis 900 möglich. Umso größer die Zahl ist, umso größer ist auch das Schriftgewicht. Hier ein Beispiel:

h1 {
    font-weight: bold;
}
 
p {
    font-weight: 300;
}
Anzeigebeispiel
Anzeigebeispiel


Eine weitere Schriftformatierung ist die sogenannte Schriftlaufweite. Damit wollte man die Breite bei einer Schrift angeben. Diese Funktion wurde mit CSS 2.0 eingeführt. Da fast kein Browser dies unterstützte wurde die Funktion aus CSS 2.1 wieder entnommen. Heute gibt es keinen Browser mehr, der dies unterstützt. Des Weiteren hat nicht jede Schriftart dies unterstützt. In dem Anzeigebeispiel werden Sie keinen Unterschied sehen. Möglich waren folgende Angaben: ultra-condensed (extrastark gedrängt), extra-condensed (stark gedrängt), semi-condensed (halb gedrängt), condensed (gedrängt), narrower (enger als normal), normal (normale Laufweite), wider (weiter als normal), expanded (geweitet), semi-expanded (halb geweitet), extra-expanded (stark geweitet) und ultra-expanded (extrastark geweitet).

h1 {
    font-stretch: semi-condensed;
}
 
p {
    font-stretch: extra-expanded;
}
Anzeigebeispiel
Anzeigebeispiel


Weiter geht es mit der Zeilenhöhe, der "line-height". Mit der Zeilenhöhe kann der Abstand zwischen Zeilen festgelegt werden. Wichtig dabei ist es die Schriftgröße zu beachten. Als Angabe sind nummerische Angaben (em, px, ...) erlaubt. Dazu zählen auch Prozentangaben. Prozentangaben beziehen sich auf die Schriftgröße.

h1 {
    line-height: 2em;
}
 
p {
    line-height: 1.5em;
}
Anzeigebeispiel
Anzeigebeispiel


Als 9. Schriftformatierungselement gibt es das allgemeine Schriftformatierungselement (font). Mit dem Element kann man eine Kombination aus dem Schriftstil, der Schriftvariante, dem Schriftgewicht, der Schriftgröße, der Zeilenhöhe und der Schriftart herstellen. Dabei muss eine bestimmte Reihenfolge (Reihenfolge wurde gerade genannt) eingehalten werden. Die Schriftgröße und die Schriftart muss immer angegeben werden. Die verschiedenen Elemente müssen mit Leerzeichen getrennt werden. Wenn Sie die Zeilenhöhe angeben wollen, müssen Sie die Schriftgröße und die Zeilenhöhe mit einem Schrägstrich statt mit einem Leerzeichen trennen.

h1 {
    font: 20px Arial;
}
 
p {
    font: 400 12px/1.5em sans-serif;
}
Anzeigebeispiel
Anzeigebeispiel


Als nächstes wollen wir Ihnen die Funktion Zeichenabstand vorstellen. Mit der Eigenschaft letter-spacing können Sie also den Abstand zwischen den Buchstaben und Zahlen bzw. den Zeichen einstellen. Als Wert sind alle nummerischen Angaben (außer Prozentangaben) gültig.

h1 {
    letter-spacing: 0.2em;
}
 
p {
    letter-spacing: 0.1in;
}
Anzeigebeispiel
Anzeigebeispiel


Ähnlich wie beim Zeichenabstand gibt es auch den Wörterabstand. Dieser kann mit der Eigenschaft word-spacing festgelegt werden. Auch hier dürfen alle nummerischen Angaben (außer Prozentangaben) verwendet werden.

h1 {
    word-spacing: 1em;
}
 
p {
    word-spacing: 0.5in;
}
Anzeigebeispiel
Anzeigebeispiel


Bei HTML konnte man mit dem Atribut align die Textausrichtung festgelegen. Bei CSS ist dies fast ähnlich. Jedoch wird statt dem align-Attribut, die text-align Eigenschaft verwendet. Der Rest bleibt so ziemlich gleich. Denn auch hier können die Werte left (linksbündig), right (rechtbündig), center (zentriert) und justify (justifiziert / Blocksatz) verwendet werden.

h1 {
    text-align: center;
}
 
p {
    text-align: justify;
}
Anzeigebeispiel
Anzeigebeispiel


Als 13. Schriftformatierung gibt es noch die Textdekoration. Mit der Textdekoration, die in CSS mit der Eigenschaft text-decoration gekennzeichnet wird, kann man verschiedene Linien erzeugen: unterstreichen, überstreichen, durchstreichen, blinkend und normal. Als Wert müssen jedoch die englischen Begriffe verwendet werden: underline, overline, line-through, blink und normal oder none. Der Wert "normal" oder "none" bewirkt, dass keine Text-Dekoration angewendet wird. Der Wert "blink" funktioniert nicht bei allen Browsern. Die Funktion wird übrigens oft zum unterstreichen bzw. zum nicht-unterstreichen bei Links verwendet.

h1 {
    text-decoration: blink;
}
 
p {
    text-decoration: line-through;
}
Anzeigebeispiel
Anzeigebeispiel


Mit text-indent kann die Texteinrückung in der ersten Zeile eingestellt werden. Erlaubt als Wert sind alle nummerischen Angaben. Bei negativen Angaben wird eine Textausrückung vorgenommen. Hier ein Beispiel:

h1 {
    text-indent: 1.5em;
}
 
p {
    text-indent: -1.5em;
}
Anzeigebeispiel
Anzeigebeispiel


Mit text-shadow, also Textschatten, können verschiedene Textschatteneffekte erstellt werden. Um die Funktion zu nutzen benötigen Sie eine Farbangabe, und 2 oder 3 nummerische Werte. Die 1. Zahl bestimmt die horizontale Position. Die 2. Zahl bestimmt die vertikale Position. Die 3. und letzte Zahl bestimmt den Unschärferadius. Es gibt die Möglichkeit mehrere Schatten zu erstellen, dazu trennen Sie den 1. und den 2. Schatten mit einem Komma. Die Funktion war in CSS 2.0 vorgesehen und wurde eingeführt. Wegen mangelnder Unterstützung der Browser wurde es in CSS 2.1 wieder abgeschafft. In CSS3 wurde diese Funktion wieder aufgenommen

h1 {
    text-shadow: red 2px 1px 3px, blue 4px 2px 6px;
}
 
p {
    text-shadow: black 1px 1px 0px;
}
Anzeigebeispiel
Anzeigebeispiel


Als 16. und letzte Schriftformatierung gibt es die Text-Transformation. Mit der Eigenschaft text-transform kann man verschiedene Transformationen erstellen: lowercase (nur Kleinbuchstaben), capitalize (alle Wortanfänge in Großbuchstaben), uppercase (nur Großbuchstaben) und none (normale Schreibweise bzw. so wie eingegeben). Hier ein Beispiel:

h1 {
    text-transform: lowercase;
}
 
p {
    text-transform: capitalize;
}
Anzeigebeispiel
Anzeigebeispiel



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de