SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheet-Angaben SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheet-Angaben
Unter Schriftformatierung sind Angaben zu Schriftarten, Schriftgrößen, Schriftfarben, Schriftgewicht, Zeichen- und Wortabständen usw. zu verstehen. Sinnvoll sind solche Angaben für alle HTML-Tags, die Text enthalten können. Dazu gehören alle Tags, die im Kapitel über 
Textformatierung beschrieben werden, aber auch Tags für Tabellen. Auch auf das <body>-Tag lassen sich die hier aufgelisteten Style-Sheet-Angaben anwenden - in diesem Fall gelten die Angaben für alle Textelemente der gesamten HTML-Datei.
 
|
Schriftart (font-family)
Anzeigebeispiel: So sieht's aus
Unter Schriftarten sind Schriftarten wie etwa Arial, Helvetica, Times Roman usw. zu verstehen. Auch Schriftfamilien wie Sans Serif usw. gehören dazu.
Mit dem hier beschriebenen Befehl können Sie Schriftarten angeben, ohne sich darum zu kümmern, ob und wie die Schriftart beim Anwender angezeigt werden kann. Falls die angegebene Schriftart nicht angezeigt werden kann, bleibt die Angabe wirkungslos. Eine Möglichkeit, Schriftarten durch Angabe einer bestimmten Schriftarten-Datenquelle zu erzwingen, wird im Abschnitt 
Schriftformatierung mit Schriftartendatei beschrieben.
<style type="text/css">
h1,h2,h3 { font-familiy:Avantgarde,Arial }
</style>
|
Mit font-family: können Sie eine oder mehrere Schriftarten bestimmen. Bei mehreren angegebenen Schriftarten ist die Reihenfolge der Angabe entscheidend: ist die erste angegebene Schriftart verfügbar, wird diese verwendet. Ist sie nicht verfügbar, wird die zweite Schriftart verwendet, falls diese verfügbar ist usw.
Trennen Sie die Schriftartennamen durch Kommata. Das W3-Konsortium empfiehlt, Schriftartnamen, die Leerzeichen enthalten, in Anführungszeichen zu setzen, also z.B. font-familiy:"Century Schoolbook",Times.
Folgende Schriftfamilien sind fest vordefiniert - diese Angaben können Sie also neben Schriftartnamen benutzen: serif, sans-serif, cursive, fantasy und monospace.
Angaben zu Schriftarten, die bei Ihnen nicht angezeigt werden können, werden vom Browser ignoriert, oder der Browser erkennt eine Typenzugehörigkeit und verwendet eine ähnliche Schriftart.
|
|
Schriftstil (font-style) Anzeigebeispiel: So sieht's aus
Schriftstil bedeutet die Neigung der Schrift.
<p style="font-style:italic">Text</p> |
Mit font-style: können Sie den Schriftstil bestimmen. Folgende Angaben sind möglich:
italic = Schriftstil kursiv.
oblique = Schriftstil kursiv.
normal = normaler Schriftstil.
|
|
Schriftvariante (font-variant) Anzeigebeispiel: So sieht's aus
Als besondere Schriftvariante stehen Kapitälchen (kleine Großbuchstaben) zur Verfügung.
<style type="text/css">
h4 { font-variant:small-caps }
</style>
|
Mit font-variant: können Sie die Schriftvariante bestimmen. Folgende Angaben sind möglich:
small-caps = Kapitälchen.
normal = normale Schriftvariante.
|
|
Schriftgröße (font-size) Anzeigebeispiel: So sieht's aus
Schriftgröße ist die Darstellungsgröße der Schrift.
<h2 style="font-size:24pt">Text</h2> <p style="font-size:130%">Text</p> |
Mit font-size: können Sie die Schriftgröße bestimmen. Erlaubt ist eine numerische Angabe. Auch eine prozentuale Angabe ist möglich. Die Angabe 130% im obigen Beispiel bedeutet: 130% im Verhältnis zur normalen Schriftgröße, die als 100% gedacht ist.
Alternativ zu numerischen Angaben sind auch folgende "ungenaue" Angaben möglich:
xx-small = winzig.
x-small = sehr klein.
small = klein.
medium = mittel.
large = groß.
x-large = sehr groß.
xx-large = riesig.
smaller = sichtbar kleiner als normal.
larger = sichtbar größer als normal.
Sie können die Angabe zur Schriftgröße mit der Angabe zur Zeilenhöhe kombinieren, indem Sie beide Angaben innerhalb der Angabe font: mit der folgenden Syntax notieren (Beispiel): p { font:12pt/14pt }. In dem Beispiel ist 12pt die Schriftgröße und 14pt die Zeilenhöhe.
|
|
Schriftgewicht (font-weight) Anzeigebeispiel: So sieht's aus
Schriftgewicht ist der Fettigkeitsgrad, in dem die Schrift dargestellt wird.
<style type="text/css">
dt { font-weight:bold }
em { font-weight:600 }
</style>
|
Mit font-weight: können Sie das Schriftgewicht bestimmen. Folgende Angaben sind möglich:
bold = fett.
bolder = extra-fett.
lighter = dünner.
100,200,300,400,500,600,700,800,900 = extra-dünn (100) bis extra-fett (900).
normal = normales Schriftgewicht.
Bei den numerischen Werten entspricht die Angabe 500 dem im DTP-Bereich üblichen Begriff medium, und die Angabe 700 entspricht dem Begriff bold.
Wohl kaum eine installierte Schriftart unterstützt alle erlaubten Angaben zum Schriftgewicht.
|
|
Schrift allgemein (font) Anzeigebeispiel: So sieht's aus
Diese Angabe ist eine Zusammenfassung der folgenden fakultativen Einzelangaben:
font-family
font-style
font-variant
font-size
font-weight
line-height
<p style="font:bold italic 12pt Palatino, serif">Text</p> |
Mit font: können Sie verschiedene Schriftformatierungen mischen. Erlaubt sind die üblichen Wertangaben zu den erlaubten Stlye-Sheet-Angaben, die in font: zusammengefaßt sind. Die Reihenfolge der Angaben ist egal.
|
|
Wortabstand (word-spacing) Anzeigebeispiel: So sieht's aus
Mit dieser Angabe können Sie den Abstand zwischen Wörtern im Text bestimmen.
h3 { word-spacing:8mm }
|
Mit word-spacing: können Sie die Wortabstand bestimmen. Erlaubt ist eine numerische Angabe. Auch eine prozentuale Angabe ist möglich.
Diese Angabe wird von Netscape und dem MS Internet Explorer in den Versionen 4.x noch nicht interpretiert.
|
|
Zeichenabstand (letter-spacing) Anzeigebeispiel: So sieht's aus
Mit dieser Angabe können Sie den Abstand zwischen den Buchstaben bzw. Zeichen im Text bestimmen.
<b style="letter-spacing:3em">fetter breiter Text</b> |
Mit letter-spacing: können Sie die Schriftgröße bestimmen. Erlaubt ist eine numerische Angabe. Auch eine prozentuale Angabe ist möglich.
Diese Angabe wird nur vom MS Internet Explorer, nicht von Netscape interpretiert. Der MS Internet Explorer erlaubt keine Prozentangaben.
|
|
Textdekoration (text-decoration) Anzeigebeispiel: So sieht's aus
Mit dieser Angabe können Sie den Abstand zwischen den Buchstaben bzw. Zeichen im Text bestimmen.
strong { text-decoration:underline }
|
Mit text-decoration: können Sie das Schriftgewicht bestimmen. Folgende Angaben sind möglich:
underline = unterstrichen.
overline = überstrichen.
line-through = durchgestrichen.
blink = blinkend.
none = normal (keine Text-Dekoration).
Der MS Internet Explorer interpretiert die Angabe blink nicht. Netscape 4.x interpretiert die Angabe overline nicht.
|
|
Texttransformation (text-transform) Anzeigebeispiel: So sieht's aus
Mit dieser Angabe können Sie in einem Textbereich Klein- oder Großbuchstaben oder Kapitälchen erzwingen, unabhängig davon, wie die einzelnen Buchstaben tatsächlich in der Datei stehen.
<h1 style="text-transform:uppercase">alles grossgeschrieben</h1> |
Mit text-transform: können Sie die Texttransformation erzwingen. Folgende Angaben sind möglich:
capitalize = Wortanfänge als Großbuchstaben.
uppercase = Nur Großbuchstaben.
lowercase = Nur Kleinbuchstaben.
none = normal (keine Text-Dekoration).
Der MS Internet Explorer 4.x interpretiert die Angabe capitalize noch nicht.
|
|
Textfarbe (color) Anzeigebeispiel: So sieht's aus
Mit dieser Angabe können Sie Textvordergrundfarben bestimmen.
b,i { color:#CC0000 }
|
Mit color: können Sie die Textfarbe bestimmen. Erlaubt sind Farbangaben.
Zum Definieren von Farben können Sie den SELFHTML Farbauswähler benutzen.
|
|
Textschatten (text-shadow) Anzeigebeispiel: So sieht's aus
Mit dieser Angabe können Sie für Text einen Schatteneffekt erzeugen.
<p style="text-shadow:black; font-size:24pt;">Text</p> |
Mit text-shadow: können Sie einen Textschatten erzwingen. Erlaubt sind Farbangaben oder der Wert none für "keinen Textschatten".
Dieser Befehl, der zur Version 2.0 der CSS Style-Sheets gehört, wird von Netscape und MS Internet Explorer in den Versionen 4.x noch nicht interpretiert.
|
| |
weiter: |
Style-Sheet-Angaben: Schriftformatierung mit Schriftartendatei
|
zurück: |
Maßeinheiten, Farbangaben, feste Angaben
|
