Text
Alles für Alles
Am Beispiel von Text werden hier die wichtigsten Gestaltungselemente gezeigt. Nebst der Schriftart und Schnitt lassen sich auch Hintergrund und Rahmen stylen.
Schriftgrösse und Masse
Websites sind zur Ausgabe nicht mehr ausschliesslich auf den Monitor beschränkt, vor allem der XML Standard ermöglicht eine Medium überschreitende Ausgabe. Die Masseinheiten von CSS haben sich gegenüber HTML vervielfacht, es gelten nebst px, % und em, jetzt auch cm, mm, inch, punkt und pica und Schlüsselwörter.
Wurde früher keine Massangabe gemacht, dann nahm der Browser an, er habe es mit Pixeln zu tun. Im Doctype HTML 'transitional' ist das noch so, aber in Strict-Mode und in XHTML müssen Sorten angegeben werden.
- Punkt und Pica sind ausschliesslich für den Druck geeignet
- Pixel nur für die Bildschirmdarstellung, die px-Angabe zwingt dem Browser die angegebene Grösse auf, auch Sehbehinderten, die im Browser eine grössere Schrift eingestellt hatten.
- 100% ist normal, 110% etwas grösser, 90% kleiner ...
- 1em (Höhe des M) ist 100%, 1.1 em entspricht 110%, 0.9 em 90% ... (16 pixels = 1 em)
- xx-small, x-small, small, medium, large, x-large, xx-large
- smaller, larger beziehen sich auf die Grösse ihrer Elternelemente
Die beiden Relativangaben % und em gehen bei der Schriftgrössenangabe, von deren vererbten Werten aus, bei Verschachtelungen ist darum genau darauf zu achten, sie sind relativ zum jeweiligen Mutterelement. Reine CSS-Seiten geben natürlich auch für alle anderen Elemente relative Masse an.
Die Schlüsselwort-Angaben wie 'small' sind Absolut, also ohne Bezug zu einem Elternelement, werden aber nicht immer gleich interpretiert: medium sollte eigentlich der default Schriftgrösse des Browsers entsprechen, aber IE deutet manchmal small als gleich gross wie unformatiert.
Serifen oder sans
Serifen sind die akzentuierten Enden an den Buchstaben, die wie Füsse auf der Linie stehen oder die den Ansatz durch einen kleinen Strich nach rechts oben markieren.
Die Serifen gibt es schon seit den Griechen, die die Buchstaben in Stein gemeisselt hatten.
Die Schriften ohne Serifen (sans-serif) wurden als Grotesk beschimpft und sind eine Erfindung des 19. Jahrhunderts.
In Druckerzeugnissen haben sich die Serifenschriften als Lauftext bewährt (Zeitung = Times),
die serifenlosen kamen zuerst als Titel und auf Schildern daher (Helvetica), am Bildschirm sind sie vielleicht besser lesbar (Arial).
Absätze Stylen
font-family: font-size: font-weight: font-style: font-variant: ...
- font-family: gibt die Schriftfamilie an, ob es eine Arial oder zumindest eine serifenlose Schrift (sans-serif). Ob es eine Times, Caramond oder zumindest eine Schrift mit Serifen ist. Und es gibt noch monospace (in der jeder Buchstabe ein gleiches Quadrat benötigt, schreibmaschinenartig), cursive (Handschriften) und fantasy (Titelschriften).
- font-size: gibt deren Grösse an - als Pixelmasse, in Prozenten oder als Schlüsselworte (siehe oben), line-height: deren Zeilenabstand und letter-spacing: den Buchstabenabstand und font-stretch: (ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, ultra-expanded) aber selten benutzt.
- font-weight: ob bold (fett) oder normal, bolder, lighter oder als Zahl von 100 bis 900 (400 ist etwa normal, und 700 ist etwa bold)
- font-style: italic (kursiv und oblique ist fast das Selbe) oder normal
- font-variant: small-caps (Kleinbuchstaben werden zu kleineren Grossbuchstaben) oder normal
- font-effect: engraved oder embossed (ab css 3)
Ziehen wir uns aus der Fülle verschiedenster Angaben ein paar Beispiele rein, die Zuordnung der Absätze erfolgt so: <p class="font1">Lorem ipsum ...
.font1 { font-family: Verdana, sans-serif; font-size: 1.2em; text-indent: 60px; text-align: justify; color: Gray; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.font2 { font-family: Caramond, serif; font-size: small; padding-left: 60px; capitalize; line-height: 2.0; letter-spacing: 4pt; color: rgb(51,51,153); }
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.font3 { font-family: Mistral, Forte, Gigi, fantasy; font-size: larger; text-align: center; color: #336600; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Wenn diese Reienfolge eingehalten wird und die Kurznotation 'font' verwendet wird, kann auf die Nennung der Eigenschaften verzichtet werden, zwingend muss jedoch Schriftgrösse und Schriftfamilie dabei sein, z.B.:
.font4 {font:bold 16px tahoma; color:sienna } wird unten in einem <span class="font4"> angewannt.
Übrigens so etwas wie font-color gibt es nicht!
text-align: text-indent: text-transform: text-decoration: capitalize; letter-spacing: word-spacing: line-height: ...
text, und weitere Attribute zur Gestaltung von Text wurden oben ebenfalls genutzt.
Absätze umfliessen
float: clear:
Der floater_absatz: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Der umfliessender_absatz: Ein ganz normaler Absatz sieht sich zum Umfliessen veranlasst, durch die float-Angabe im vorhergehenden Absatz, dieser hat gar keine Angaben!
.floater_absatz { float:left; margin-right:20px; margin-bottom:20px; width:200px; text-align:justify; }
.umfliessender_absatz {;}
.clearing_absatz { clear:left; }
Ein weiterer Absatz! Es gibt natürlich noch float:right und clear:right und clear:both.
Der clearing_absatz: Der Absatz, welcher nicht mehr umfliessen soll, trägt die clear-Angabe.
Hintergrundfarbe
background-color:
Titelhintergrund .bg1 { background-color: #eee8aa }
Ein Titel (wie oben) wird, da es sich um ein Absatzelement handelt, auf die ganze Fensterbreite farbig hinterlegt.
margin:
Es sei denn, es wird ein Aussenabstand (margin:) festgelegt (unten). Die Margin kann auf alle vier Seiten gleich oder je einzeln festgelegt werden:
margin-top:, margin-right:, margin-bottom:, margin-left: oder in der Kurzform margin: 0px 10px 0px 20px - ohne Trennzeichen. Margin-Masse können auch negativ sein! ( z.B. margin-bottom: -15px; )
Bei gegenüberliegenden Angaben, gilt für den Gesamtabstand zwischen den beiden Elementen, der grösste Abstand. Wenn also ein erster Absatz margin-bottom:20px hat und ein folgender Absatz margin-top:15px, dann ist der Abstand zwischen beiden Absätzen einfach 20px!
Titelhintergrund .bg11 { background-color: #eee8aa; margin-right:300px; }
padding:
Auch ein ganzer Absatz (p oder div Element) kann mit einer Hintergrundfarbe hinterlegt werden. Dabei ist auch an den Innenabstand des Textes zu seiner Begrenzung (padding:) ein Polster, zu denken. Auch Padding kann auf jede Seite hin unterschiedlich bestimmt werden:
padding-top:, padding-right:, padding-bottom:, padding-left: oder in der Kurzform padding: 0px 10px 0px 20px - ohne Trennzeichen. Padding kann jedoch nie negativ sein! Zur unterschiedlichen Interpretation von Padding bei unterschiedlichen Browsern lese Boxmodel.
.bg2 { background-color: #d1e1e3; padding: 7px; }
Wie schon so oft an den Codebeispielen gesehen, kann auch bloss ein Zeilenfragment (span Element) mit Hintergrundfarbe belegt werden. .bg3 { background-color: #FFFF99; padding: 3px } Der Textausschnitt kann auch zuviel Padding haben.
Und auch die Kombination ist möglich!
Rahmen
border: border-color: border-width: border-style:
Titelrahmen .ra1 { border: 2px solid #eee8aa; }
Ein Text kann auch eingerahmt werden. 'border' hat drei Eigenschaften: Linienstärke Typ und Farbe, in der Kurzschreibweise in dieser Reihenfolge. Wie bei Hintergrundfarben drängt sich auch bei Rahmen ein Padding auf.
.ra2 {border: 1px solid #000000; padding: 2px}
Es gibt unzählige Typen von Rahmen, deren Bezeichnungen bitte ich an geeigneter Stelle nachzuschauen.
.ra3 {border: #ffcc66 double thick; padding: 6px}
dashed
.ra4 {border-color: #ffcc66; border-width:thick; border-style:dashed; padding: 6px}
groove
.ra5 {border-color: #ffcc66; border-width:thick; border-style:groove; padding: 6px}
outset
.ra6 {background-color: #daa520; border: outset thick #ffcc66; padding: 6px}
4 verschiedene Farben
.ra7 {border-style: solid; border-width: thick; border-color: #bdb76b #808000 #2e8b57 #8fbc8f; padding: 6px}
Um Textabschnitte können Rahmen gezogen werden.
Und wie Hintergrundfarben können Rahmen auch ineinander verschachtelt werden. Die selbe Klasse einmal in einem Absatz und darin in einem Span.
Boboline
Die untere Rahmenlinie (Border Bottom Line) wurde hier als Titelunterstreichung verwendet, ein Class-Selector ist nur nötig, wenn das Tag auch ohne diese Formatierung verwendet werden soll oder die Formatierung auf unterschiedliche Elemente angewendet werden soll: .boboline { border-bottom: 1px solid #000000; padding: 2px; } Die Rahmenlinie spannt sich über die gesammte Browserfensterbreite und der Abstand und Dicke sind bestimmbar durch das Padding und Pixelangabe.
Decoline
text-decoration:
Eine Unterstreichung sieht nicht viel anders aus: .decoline {text-decoration:underline;}
Achtung, dies führt zu Verwechslungen, denn User deuten die Unterstreichung als einem Link, auch wenn es eine Boboline ist.
Andere Werte von text-decoration: sind: none (für Links ohne Unterstreichung), overline (Linie darüber - passt gut zu underline), line-through (durchgestrichen), blink (ziemlich nervig).
Horizontale Linie
<hr>
HTML
Man bewundere die Quadratur des Kreises auch in verschiedenen Browsern, ungestylte Linie im Rohzustand (hier ist es wegen der Grundseinstellung der Seite nicht möglich).
<hr width="500px" />
CSS
Natürlich brauchen IE und FF unterschiedliche Angaben:
hr.linie1 {
color: blue; /* IE */
background-color: orange; /* FF */
border: none; /* vergleiche NOSHADE */
height: 1px;
width: 60%
}
Check den Code.