Cascading Style Sheets (CSS)

Style Sheet Syntax

Eigenschaften: Schrift

Mit der Schrift anzufangen, ist ein einleuchtender Einstieg. Du kannst die Resultate sofort sehen, wenn du die Schrift für Titel, Tabellenelemente oder Abschnitte neu definierst. Und hier siehst du die Eigenschaften, die du angeben kannst:

font-family	Hier folgt der Name der Schrift, z.B. Arial. Enthält der Name Leerschläge, so sollte er in Gänsefüsschen gestellt werden, z.B. "Times New Roman". Du kannst mehrere Namen (durch Kommas getrennt) angeben. Sie werden dann vom Browser geprüft und die erste vorhandene Schrift wird verwendet. Es gibt ausserdem noch die reservierten Namen `serif sans-serif cursive fantasy monospace` Ein Beispiel: `p { font-family: Helvetica, Arial, sans-serif }` bedeutet, dass der Text eines Abschnitts (<p>) in Helvetica-Schrift geschrieben werden solle. Ist diese nicht installiert, soll Arial verwendet werden, und falls auch die nicht erhältlich sein sollte, eine andere Schrift ohne Serifen.
font-size	Hier wird die Grösse der Schrift angegeben. Dies ist ein heikles Kapitel, da letztlich ja die Auflösung des jeweiligen Monitors mitspielt, die man als Autor nicht beeinflussen kann. Möglich sind nummerische Werte mit einer Massangabe wie z.B. 10px oder 1cm. Die Massangaben sind in einer separaten Tabelle erklärt. absolute Namen, wie `xx-small x-small small medium large x-large xx-large` Sie eignen sich besonders gut dafür, die Schriftgrössen verschiedener Elemente im Vergleich untereinander abzustimmen. Dieses Verhältnis bleibt auch dann bestehen, wenn jemand beim Ansehen der Seite die Schrift vergrössert oder verkleinert. relative Namen, wie `larger smaller` mit denen man die Schriftgrösse um jeweils eine Stufe vergrössern oder verkleinern kann.
font-weight	kann `normal` oder `bold` sein (das bedeutet Normal- oder Fettschrift)
font-style	kann `normal` oder `italic` sein (das bedeutet Normal- oder Kursivschrift)
color	Die Schriftfarbe kann namentlich angegeben werden: `aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow` Ausserdem kann man Farben auch in RGB angeben, also als Mischverhältnis von Rot, Grün und Blau. Die drei Werte können von 0 bis 255 gehen (oder von 0% bis 100%) und entweder dezimal oder hexadezimal angegeben werden. Ein Beispiel: Rot kann auf folgende Arten angegeben werden: red rgb(100%,0%,0%) rgb(255,0,0) #FF0000 In jedem Fall bedeutet das einen maximalen Rot-Anteil und überhaupt keinen Grün- bzw Blau-Anteil. Maximal-Anteil bei allen drei Farben - (255,255,255) oder #FFFFFF - ergibt weiss, Minimal-Anteil - (0,0,0) oder #000000 - ergibt schwarz, gleiche Anteile - z.B. (120,120,120) oder #1A1A1A - ergeben Grauwerte.

Als Beispiel für das Ganze empfehle ich dir das Style Sheet dieser Seite. Sieh dir die folgende Zeile an:

code { font-family: "Courier New", monospace ; background-color: #EFFFDF ; font-size: larger }

Das ist die Art, wie die Code-Beispiele gestaltet werden. Ich habe dafür eine Courier-Schrift gewählt. Sollte diese nicht installiert sein, dann soll eben sonst eine Monospace-Schrift verwendet werden (also eine Schrift, bei der alle Buchstaben gleich breit sind). Ausserdem soll die Schrift etwas grösser als der normale Text sein, und ich lasse die Code-Abschnitte zudem durch eine leicht andere Hintergrundfarbe hervorheben.

Das vollständige Style Sheet findest du übrigens hier.