Einheitsfragen

In CSS könnt Ihr Eure Werte in einer ganzen Reihe von Einheiten formulieren.

• absolute Einheiten
• pt - Punkt
• pc - pica (typographische Einheit; 1pc = 12pt)
• in - inch
• cm - Zentimeter
• mm - Millimeter
• relative Einheiten
• % - Prozent (meist relativ zur Umgebung)
• em - relativ zur aktuellen Schriftgrösse; 1.2em = 120%
• ex - relativ zur aktuellen Schriftgrösse; 1ex entspricht der Grösse eines kleinen 'x'
• px - Pixel (abhängig von der Bildschirmauflösung)

Für Farbangaben könnt Ihr entweder einen von 216 vordefinierten Farbnamen verwenden, oder die RGB-Werte. Das sind die Anteile an rot, grün und blau, aus denen sich Euer Farbton zusammensetzt. Ein paar Beispiele

• 0-0-0 ist schwarz
• 255-255-255 ist weiß
• 00-102-00 ist dieses Grün

Angeben könnt Ihr diese Werte in drei verschiedenen Formaten. Am verbreitesten ist es, die Werte für rot, grün und blau als hexadezimale Werte anzugeben, in der Art

<p style="color:#00FF00">Dieser Absatz ist grün<p>

Das entspräche in der oben benutzten Schreibweise 00-255-00. Alternativ dazu könnt Ihr mit Hilfe der rgb-Funktion die einzelnen Werte dezimal oder als Prozentwerte (100%=255) angeben

<p style="color:rgb(0, 255, 0)">Dieser Absatz ist grün<p>
<p style="color:rgb(0%, 100%, 0%)">Dieser Absatz ist grün<p>

Ansonsten gibt es eine ganze Reihe von Werten, die als Werte ganz bestimmte Schlüsselworte brauchen. In solchen Fällen werde ich im folgenden die möglichen Werte aufführen. Wird eine Eigenschaft mit einer numerischen oder Farbangabe benutzt, ist das aus Platzgründen nicht mehr ausdrücklich genannt.

Schriftform

Eine Eigenschaft habe ich bereits durch die Hintertür, nälich in den Beispielen, eingeführt. Die Eigenschaft color legt einfach die Schriftfarbe fest. Die Schriftart bestimmt die Eigenschaft font-family. Da Ihr ja nicht wisst, welche Schriften Eure Besucher auf ihren Rechnern installiert haben, könnt Ihr eine Folge von Alternativschriften angeben

p{font-family:'Times New Roman', Times, serif}

Wenn möglich, wird hier die Schrift 'Times New Roman' benutzt. Steht die nicht zur Verfügung, versucht der Browser es mit 'Times'. Am Schluß sollte immer eine der Schriftfamilien serif, sans-serif, cursive, fantasy oder monospaced stehen. Damit kann jeder Browser etwas anfangen.

Die Schriftgrösse beeinflußt Ihr mit der Eigenschaft font-size. Wenn Ihr font-size mit Werten in relativen Einheiten benutzt, wird immer mit dem umgebenden Text verglichen

<p style="font-size:20pt">Ein Teil dieses Texts ist 
nur <span style="font-size:50%">10 Punkt</span> groß</p>

Die anderen Schrifteigenschaften sind leider etwas unübersichtlich: Fettdruck erzeugt Ihr mit der Eigenschaft font-weight, Kursivdruck mit font-style, Unterstreichungen mit text-decoration, und so weiter. Daher solltet Ihr (auch bei CSS) immer eine Referenz in Reichweite haben, um die richtige Eigenschaft samt passendem Schlüsselwort für den Wert nachzuschlagen.

Links, rechts und mittendurch

Grundsätzlich sind in HTML alle Elemente linksbündig. Wenn Ihr Eure Texte, Bilder oder anderes zentriert, rechtsbündig oder in Blocksatz haben wollt, steht Euch text-align zur Verfügung. An Werten könnt Ihr 'left', 'right', 'center' und 'justify' (Blocksatz) verwenden. text-align wirkt nur auf den Inhalt von Blockelementen und richtet auch die darin enthaltenen Inline-Element aus.

Was horizontal geht, geht auch vertikal: Nebeneinanderliegende Elemente (z. B. Tabellenzellen in einer Zeile) werden mit vertical-align zueinander angeordnet. Mögliche Werte sind

• top - oben bündig
• middle - mittig
• bottom - unten büding
• baseline - wenn es eine Basislinie gibt, an der ausrichten. Ansonsten unten bündig
• sub - höherstellen (in gleicher Schriftgrösse)
• super - tieferstellen (in gleicher Schriftgrösse)
• text-top - am oberen Textrand ausrichten
• text-bottom - am unteren Textrand ausrichten

line-height legt die Höhe der Zeile fest. Verwechselt diese Eigenschaft nicht mit font-size; eine hohe Zeile kann auch nur sehr niedrigen Text enthalten. Die Eigenschaft text-indent rückt nur die erste Zeile eines Absatzes nach rechts ein. Den Zeilenumbruch beeinflußt white-space: 'normal' bewirkt das Verhalten, das Ihr von HTML gewohnt seid. Mit dem Wert 'pre' setzt der Browser Zeilenumbrüche da, wo sie Ihr auch in einem Texteditor sehen würdet. Bei 'nowrap' erfolgt gar kein automatischer Zeilenumbruch.