Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien

Tutorium

HTML: Text und Textstruktur mit CSS gestalten

Martin Stricker [email protected] 23. Juni 2004

Schriftarten und generische Schriftfamilien  Schriftarten werden mit font-family definiert  Es ist üblich, eine Aufzählung mehrerer Schriften anzugeben, für den Fall, dass bestimmte Schriften nicht auf dem System des Users vorhanden ist. Beispiel: font-family:Verdana,Helvetica,Arial,sans-serif;  Zuletzt sollte immer eine "generische" Schriftfamilie stehen, wie sans-serif (serifenlose Schrift), serif, monospace (feste Laufweite)
Sollte keine der angegebenen Schriften vorhanden sein, nutzt der Client die Schrift, die in seinen Einstellungen für die entsprechende generische Schriftfamilie gewählt ist

Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ HTML: Text mit CSS

Häufige Web-Schriften

The quick brown Fox

Arial

The quick brown Fox

Verdana sans-serif

The quick brown Fox The quick brown Fox

Tahoma

sans-serif

Times

serif

The quick brown Fox

Courier monospace

Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ HTML: Text mit CSS

sans-serif

Schriftgröße
CSS-Eigenschaft font-size
Angabe (u.a.) in: • Bildschirmpixel, Bsp: font-size:12px • Punkt (1/72 Inch), Bsp: font-size:10pt • in (Inch), cm, mm • "relativ" zur Schriftgröße des Elternelements: Prozentwerte %, em, ex
"Absolute" Größenangaben gibt es praktisch nicht, da • z.B. cm und Inch in Pixel umgerechnet werden müssen, • das Umrechnungsverhältnis (Pixel je Inch, dot per inch, dpi) je nach Betriebssystem und Software unterschiedlich ist, • Kalibrierung auf tatsächliche Monitorgröße nicht stattfindet, • Pixelangaben aufgrund unterschiedlicher Monitorauflösungen und -größen ebenfalls relativ sind Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ HTML: Text mit CSS

Weitere Schriftstile
color - Textfarbe, Angabe • hexadezimal - color:#003366 • als rgb-Schema - color:rgb(0,51,102) • Farbnamen - color:blue
font-weight:bold oder normal - "fett"
font-style:italics oder normal - "kursiv"
text-decoration:underline oder none - "unterstrichen"
font-variant:small-caps oder normal - "Kapitälchen"
line-height - Zeilenabstand in Abhängigkeit der Angabe in font-size, es sind diesselben Maßeinheiten möglich

Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ HTML: Text mit CSS

Absatzformatierung

 margin (und die Derivate margin-left, -top, -right und -bottom) bestimmen den Außenabstand, Beispiel: margin-top:10px;margin-bottom:10px
Stoßen zwei Elemente mit Außenabstand aufeinander, werden die Abstände miteinander verrechnet  mit padding-left bzw. padding-right lassen sich Absatzelemente (und andere Blockformate) einrücken  text-indent bestimmt das Verhalten der ersten Zeile: • text-indent:10px - erste Zeile rückt 10 Pixel ein • text-indent:-8px - erste Zeile rückt 8 Pixel aus

Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ HTML: Text mit CSS

Listen


Eine nummerierte (ol, ordered list) oder nicht nummerierte Liste (ul, unordered list) kann per CSS gestaltet werden: • pauschal für alle Listenblöcke über ul bzw. ol • für jeden Listenpunkt einzeln über li (list item, Listenpunkt)
Der linke Standardeinzug der Listenpunkte von üblicherweise 30px - bezogen auf den Textblockrand - kann über padding-left verändert werden

Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ HTML: Text mit CSS

list-style-type
Mit list-style-type lassen sich die Listenpunkte (bei ul) bzw. Aufzählungszeichen (bei ol) bestimmen
Mögliche Werte bei ul: • list-style-type:disc - "Bullets" • list-style-type:circle - Kreis • list-style-type:square - Quadrat • list-style-type:none


Mögliche Werte bei ol: • list-style-type:decimal - 1,2,3,4 usw. • list-style-type:upper-roman - I.,II.,III.,IV. usw. • list-style-type:lower-roman - i.,ii.,iii.,iv. usw. • list-style-type:upper-alpha - A,B,C,D usw. • list-style-type:lower-alpha - a,b,c,d usw.

Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ HTML: Text mit CSS

list-style-image

 Mit list-style-image kann eine eigene Grafikdatei als Listenzeichen verwendet werden.  Beispiel für eine nicht nummerierte Liste, als zentrales Format definiert: ul {list-style-image:url(bilder/mybullet.gif)}


Die referenzierte Grafik muss sich in einem Web-üblichen Grafikformat (.jpg,.gif,.png) befinden
Für den angegebenen Pfad gelten dieselben Verweisregeln wie bei Hyperlinks und Bildern. Bei einem relativen Pfad ist das Ausgangsdokument die Datei, in der der CSS-Stil notiert ist (z.B. ein externes Stylesheet)

Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ HTML: Text mit CSS

list-style-position


Mit list-style-position kann bestimmt werden, ob das Listenzeichen vor dem Textblock steht, oder am Anfang der ersten Zeile mit Textumfluss
Mögliche Werte: • list-style-position:inside ... Listenzeichen mit Textumfluss innerhalb • list-style-position:outside ... Listenzeichen ausgerückt

Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ HTML: Text mit CSS