Cascading Stylesheets
Stil mit <Stil>
Cascading Stylesheets
Stil mit <Stil>
Eigenschaften, die die Darstellung von Schriften steuern. Hierzu gehören Schriftarten, -größen, -stile und -varianten wie Kapitälchen oder Versalien, die Spationierung und der Leerraum zwischen Wörtern. Diese Eigenschaften waren die ersten, die breite Beachtung fanden – schließlich ersparen sie die unzähligen Tags wie <font> und <center> und ebenso viele Attribute in den verbleibenden Tags. Acht Eigenschaften sind insgesamt für die Schriftenformatierung spezifiziert:
font-family • font-size • font-size-adjust • font-stretch • font-style • font-variant • font-weight • font
| IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Ja |
font-family wählt eine spezielle Schrift oder eine generische Schriftfamilie. font-family kann als Auswahlliste von Schriftfamilien und/oder generischen Schriften genutzt werden. Die einzelnen Werte werden durch Kommata voneinander getrennt – eine der wenigen Stellen, an denen Kommata in der Deklaration von Eigenschaften genutzt werden. Der Browser wird die erste Schrift der Auswahlliste benutzen, die auf dem Zielsystem installiert ist. Die Verwendung von (doppelten) Hochkommas ist optional, aber sie empfiehlt sich, wenn der Name Leerstellen enthält: "Times New Roman". | [ [ family-name | generic-family], ]* [family-name | generic-family] |
family-name sind die Namen von Schriften wie Courier, Arial, Times, Helvetica usw. Es gibt keine vollständige Liste, da nicht auf allen Rechnern alle Schriften installiert sind.
generic-family gibt eine von fünf generischen Schriften an:
Allgemein wird empfohlen, stets eine generische Schrift als letzten Eintrag in die Auflistung aufzunehmen.
p { font-family: Courier, "Zapf Dingbat", serif} oder
<span style="font-family: arial;">Arial</span>
<span style="font-family: courier;">Courier </span>
<span style="font-family: helvetica;">Helvetica </span>
<span style="font-family: palatino;">Palatino </span>
<span style="font-family: symbol;">Symbol </span>
<span style="font-family: times;">Times </span>
Arial Courier Helvetica Palatino Symbol Times
| IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Ja |
font-size steuert die Größe der Schrift mit Werten, die in einer von vier Kategorien angegeben werden. | absolute-size | relative-size | length | percentage |
absolute-size: Absolute Schriftgrößen werden in sieben Schritten angegeben:
Die jeweilige Ausprägung der Schriftgröße wird durch die Kombination von Rechner und Browser bestimmt.
relative-size: Es gibt zwei relative Schriftgrößen:
Die jeweilige Ausprägung der Schriftgröße wird durch die Kombination von Rechner und Browser bestimmt.
length kann in einer der folgenden Maßeinheiten angegeben werden:
| Maßeinheit | Abkürzung | Maßeinheit | Abkürzung |
| Zentimeter | cm | Millimeter | mm |
| ems | em | Pica | pc |
| x-Höhe | ex | Pixel | px |
| Inch | in | Point | pt |
percentage (Prozentsatz) vergrößert oder verkleinert die Schriftgröße. Werte, die kleiner als 100% sind, reduzieren die Größe, Werte größer als 100% erhöhen die Schriftgröße und bei 100% bleibt die Schrift unbeeinflusst.
Beispiel
p { font-size: x-large; }
p { font-size: smaller; }
p { font-size: 18pt; }
p { font-size: 3em; }
p { font-size: 75%; }
p { font-size: 150%; } oder
<span style="font-size: xx-small;">A </span>
<span style="font-size: x-small;">A </span>
<span style="font-size: small;">A </span>
<span style="font-size: medium;">A </span>
<span style="font-size: large;">A </span>
<span style="font-size: x-large;">A </span>
<span style="font-size: xx-large;">A </span>
A A A A A A A
| Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Ja |
font-size-adjust passt die verschiedenen Größen unterschiedlicher Schriftfamilien aneinander an und ist dafür gedacht, die Alternativschriften einer Auswahlliste in ähnlicher Größe darzustellen. | none | number |
Sowohl die Angabe von Pixel- als auch von Punktwerten führt bei verschiedenen Schriften zu unterschiedlichen Schriftgrößen:
Verdana Arial Georgia Times Tamoha Trebuchet Courier (darum wurde in dieser Referenz der normale Absatztext in Verdana 11px gesetzt, Codebeispiele hingegen in Courier 12px – nur so kann derzeit eine Angleichung der unterschiedlichen Schriftgrößen zwischen Verdana und Courier durchgeführt werden).
Damit beim Ersatz einer Schrift ein ähnlicher Gesamteindruck einer Seite bestehen bleibt, werden die Schriftgrößen über das Verhältnis des kleinen Buchstabens x zur Schriftgröße aneinander angeglichen. Dieses Verhältnis beträgt z.B. bei der Schrift Verdana 0.58, bei der Schrift Flemish Script 0.28.
none ist der Standardwert und stellt sicher, dass jede Schrift in ihrem eigenen Größenverhältnis dargestellt wird und dass vorangegangene Deklarationen keinen Einfluss auf die Darstellung der Schriftgröße haben.
number weist jeder Schrift in der Auswahlliste das gleiche Größenverhältnis zu.
p {font-family: arial, courier; font-size-adjust: none;}
p {font-family: verdana, courier; font-size-adjust: .56;}
| Zurzeit von keinem Browser unterstützt. Version: CSS2 Erblich: Ja |
font-stretch bestimmt Schriftschnitte mit unterschiedlichen Laufweiten. Damit font-stretch funktioniert, muss die gewählte Schrift über die verschiedenen Schnitte verfügen, was heute bei den Systemschriften wie Arial, Verdana und Times nicht der Fall ist. Zurzeit verfügen nur die Schriften von Anbietern wie Adobe und Fontstream über eine entsprechende Auswahl von Schnitten. | narrower | wider | ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded |
narrower wählt einen Schriftschnitt mit schmalerer Laufweite.
wider wählt einen Schriftschnitt mit weiterer Laufweite.
ultra-condensed
extra-condensed
condensed
semi-condensed
normal (Voreinstellung)
semi-expanded
expanded
extra-expanded
ultra-expanded
Die Schnitte sind hier vom schmalsten bis zum breitesten Schnitt aufgeführt. Der Schnitt normal entspricht der normalen Schrift, die im Browser dargestellt wird.
p {font-stretch: wider;}
p {font-stretch: ultra-expanded;}
| IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Ja |
font-style stellt die Schrift normal, kursiv und schräg gestellt dar. | normal | italic | oblique |
normal ist die Voreinstellung und stellt die Zeichen aufrecht dar. Die Angabe normal stellt sicher, dass vorangegangene Deklarationen den Schriftstil nicht beeinflussen.
italic stellt die Schrift in einem kursiven Schnitt dar. Wenn kein Kursivschnitt (italic) auf dem Zielrechner installiert ist, benutzt der Browser oblique.
oblique veranlasst den Browser, die Buchstaben schräg darzustellen, um einen Kursivschnitt nachzuahmen.
p { font-style: normal; }
p { font-style: italic; }
p { font-style: oblique; } oder
<span style="font-style: normal;">Normal </span>
<span style="font-style: italic;">Italic </span>
<span style="font-style: oblique;">Oblique </span>
Normal Italic Oblique
| IE4+ N6 Version: CSS1 Erblich: Ja |
font-variant stellt die Schrift in Kapitälchen dar. | normal | small-caps |
normal ist die Voreinstellung. Die Angabe von normal stellt sicher, dass keine vorangegangene Deklaration die Darstellung des Textes beeinflusst.
small-caps stellt die Schrift in Kapitälchen dar.
Beispiel
p { font-variant: normal; }
p { font-variant: small-caps; } oder
<span style="font-variant: normal;">Normal </span>
<span style="font-variant: small-caps;">Kapitälchen</span>
Normal Kapitälchen
| IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Ja |
font-weight stellt die Schrift fett oder in verschiedenen Abstufungen von fett dar. Die gewählte Schrift muss über verschiedene Schnitte in den jeweiligen Abstufungen verfügen, was heute bei den Systemschriften wie Arial, Verdana und Times nicht der Fall ist. | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
Die meisten Browser erkennen nur normal und bold als Schriftgewicht.
normal ist die Voreinstellung. Auf der numerischen Skala von 100 bis 900 wird normal üblicherweise bei 400 angesiedelt. Die Angabe von normal stellt sicher, dass keine vorangegangene Deklaration die Darstellung des Textes beeinflusst.
bold entspricht der Darstellung im <b>-Tag von HTML. Auf der numerischen Skala von 100 bis 900 ist bold üblicherweise bei 700 angesiedelt.
bolder stellt die Buchstaben um eine Stufe fetter dar. Die Stärke der Stufen wird durch die Kombination aus Rechnerplattform und Browser bestimmt.
lighter stellt die Buchstaben um eine Stufe weniger fett dar. Die Stärke der Stufen wird durch die Kombination aus Rechnerplattform/Browser bestimmt.
100 ... 900 stellt die Buchstaben in 9 Stufen von fett dar. Je größer der Wert ist, umso fetter wird der Text dargestellt. Auf der numerischen Skala von 100 bis 900 entspricht 400 normal und 700 bold. Die Stärke der Stufen wird durch die Kombination aus Rechnerplattform und Browser bestimmt.
p { font-weight: normal; }
p { font-weight: bold; }
p { font-weight: bolder; }
p { font-weight: lighter; }
p { font-weight: 600; }
oder
<span style="font-weight: lighter">lighter</span>
<span style="font-weight: bolder;">bolder</span>
<span style="font-weight: 100;">100 </span>
<span style="font-weight: 200;">200 </span>
<span style="font-weight: 300;">300 </span>
<span style="font-weight: 400;">400 </span>
<span style="font-weight: 500;">500 </span>
<span style="font-weight: 600;">600 </span>
<span style="font-weight: 700;">700 </span>
<span style="font-weight: 800;">800 </span>
<span style="font-weight: 900;">900 </span>
lighter normal bold bolder 100 200 300 400 500 600 700 800 900
| IE4+ M1 N4+ O5+ Version: CSS1/Erweitert in CSS2 Erblich: Ja |
font bestimmt in einer Deklaration alle sechs Eigenschaften der zu verwendenden Schrift. Zusätzlich kann font seit CSS2 sechs Werte der Systemschrift steuern. | [ [ font-style &| font-variant &| font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar |
caption (CSS2) steuert die Schrift in Schaltflächen.
icon (CSS2) steuert die Schrift der Symbole (icons).
menu (CSS2) steuert die Schrift der Klappmenüs.
message-box (CSS2) steuert die Schrift der Dialogfenster.
small-caption (CSS2) steuert die Schrift kleiner Schaltflächen.
status-bar (CSS2) steuert die Schrift in der Windows-Statusleiste.
font-style, font-variant, font-weight, font-size, / line-height und font-family wurden in den vorangegangenen Abschnitten beschrieben.
Beachten Sie den Schrägstrich vor /line-height. Er muss gesetzt werden und wird für die Angabe der Schriftgröße benutzt.
p { font: italic small-caps 600 12pts/18pt Courier }
p { font: italic small-caps 600 12pts/150% Courier }
p { font: italic small-caps 600 12pts/1.5 Courier }
p { font: italic small-caps 600 12pts/18pts Courier }
p { font: /18pts serif; } p { font: oblique 100 24pts } oder
.kurz { font: 600 small-caps 18pt/24pt fantasy}
...
<span class="kurz">kurz und bündig</span>
kurz und bündig