..| EL FABI UNIVERSE |..

Die CSS Style Sheet Attribute

m folgenden nun eine Auflistung der CSS Stilattribute für die Gestaltung von Schriften, Farben und Hintergründen sowie Textausrichtungen. Bitte beachte, daß diese Auflistung nur die gängigsten CSS Style Sheets enthält, also diejenigen, die relativ häufig für die Formatierung einer Seite eingesetzt werden, wenn deren Formatierung auf Style Sheet Basis aufgebaut ist. Ich habe aus Platzgründen auf einige eher exotischere und nicht so häufig vorkommenden Attribute der Seitengestaltung verzichtet, da dies den Aufwand nicht gerechtfertigt und den Rahmen dieses Projekt gesprengt hätte.

Anwendungsbereich des Style Sheet Attributs	Name des Attributs
Schriften	font-family font-style font-weight font-size font
Farben und Hintergründe	color background-color background-image background-repeat background
Textdarstellung und -ausrichtung	word-spacing letter-spacing text-align vertical-align text-decoration
Abstände, Ränder, Rahmen und ähnliches	margin padding border

I. Schriften

Attribut	Beispielsyntax
font-family	BODY {font-family: Verdana, Arial, San Serif} oder <DIV STYLE="font-family: Book Antiqua, Serif"> Unter font-family wird hier die zu verwendende Schriftart eingetragen, Serif bzw. San Serif geben Auskunft über den generellen Schriftyp, der verwendet werden soll. Hier eine Übersicht über die unterstützten Schrifttypen: Serif - Schriften mit Zierhäkchen wie etwa Times New Roman San Serif - Schriften ohne Zierhäkchen wie zum Beispiel Arial Cursive - Schriften im Stil von Handschriften wie Brush Script MT Fancy - dekorative Schriften in der Art von Comic Sans MS Monospaced - nichtproportinale Schriftarten wie etwa Courier New
font-style	BODY {font-style: italic} oder <P STYLE="font-style: normal"> Mit font-style kann bezeichnet werden, welche Darstellungsform die Schrift erfahren soll. Hierzu gibt es die folgenden Werte: normal - Standardeinstellung italic - kursive Darstellung oblique - ähnlich der kursiven Darstellung, kann bei Schriften angewendet werden, von denen sicher ist, daß es keine kursive Version davon auf dem Rechner des Anwenders gibt. Der kursive Aspekt wird dann vom System errechnet
font-weight	BODY {font-weight: bold} oder <DIV STYLE="font-weight: 700"> Das Attribut font-weight ist für den Grad der Gewichtung der Schrift zuständig, beeinflußt also, ob und wie fett sie angezeigt wird. Das Attribut font-weight kann folgende Werte annehmen normal - Standardeinstellung bold - fette Darstellung bolder - Zwischenwert abhängig von der Verfügbarkeit einer fetteren Schrift lighter - Zwischenwert abhängig von der Verfügbarkeit einer weniger fetten Schrift 100 - 900 - Zahlenwerte. Der Wert um 500 herum entpricht der normalen Gewichtung, eine fette Schrift liegt bei etwa 700.
font-size	P {font-size: 12pt} oder <I STYLE="font-size: 30px"> Mit diesem Attribut kannst du die Größe einer bestimmten Schriftart festlegen. Im Internet Explorer geht das meiner Erfahrung nach auf den Pixel genau, der Netscape Navigator verwendet aber zumindest in den Versionen 4.x noch Zwischengrößen, so daß die Schriftart nicht stufenlos einstellbar ist. Buchstabengrößen können mit dem Attribut font-size in den folgenden Einheiten definiert werden: px - Größenangabe in Pixeln (z.B.: 20px = 20 Pixel) pt - Größenangabe in Schriftpunkten, ähnlich der Größenangabe z.B. in MS Word in - Größenangabe in Zoll (z.B.: 0.5in = ein halbes Zoll) smaller /larger - Größenangabe relativ zur bisherigen Schriftgröße xxx% - Größenangabe der Schriftart in Prozent der bisherigen Schriftart (z.B. 130%) em - Größenangabe wird in Relation gesetzt zur Breite eines m dieser Schriftart (z.B.: 2em)
font	BODY {font: italic bold 10pt verdana, arial, san serif} oder <P STYLE="font: normal oblique 30px comic sans ms, fancy"> Unter font lassen sich die bisher erwähnten Werte zusammenfassen, wobei die Reihenfolge der Werte entsprechen dieser Reihenfolge der Attribute erfolgen muß: font-style, font-weight, font-size, font-family

II. Farben und Hintergründe

Attribut Beispielsyntax

color
DIV {color:#e8e8e8}
oder

Mit dem Attribut color werden Textpassagen Farben zugeordnet, es ist also der Nachfolger des Attributs COLOR aus dem -Tag. color kann folgende Farbangaben verarbeiten

#xxxxxx - Farbangabe in Form eines hexadezimalen RGB-Triplets (z.B.: color: #ffffcc)
farbenname - Farbangabe in einem der festgelegten Farbnamen (z.B.: color: red)
rgb(xxx,xxx,xxx) - Farbeingabe in form eines dezimalen RGB-Triplets (z.B.: color: rgb(122,20,255))

Beispiel für die Syntax

:
Grüner Text

background-color
H2 {background-color: orange}
oder
<DIV STYLE="background-color:#1a4f55">
Durch background-color wird eine Hintergrundfarbe meist für einen bestimmten Text festgelegt. Werte, die background-color annehmen kann: vgl. Attribut color
Beispiel für die Syntax

:
Orangefarbener Text auf schwarzem Grund

background-image
BLOCKQUOTE {background-image: url(Pfad/Bildname.Endung)}
oder

Das Attribut background-image ermöglicht es dir, zum Beispiel eine Textpassage oder einen anderen bestimmten Bereich der Webseite mit einer Hintergrundgrafik zu versehen.

Beispiel für die Syntax


Schwarzer fetter Text auf einem GIF-Image als Hintergrund

background-repeat
DIV {background-image: url(Pfad/Bildname.Endung); background-repeat: repeat-x}

Mit diesem Attribut kannst du die Art und Weise angeben, in der der Browser das Hintergrundbild kacheln soll, wenn dazu genügend Platz vorhanden ist. Dabei kann background-repeat die folgenden Werte annehmen.

repeat - Standardeinstellung, entspricht der normalen Kachelung
repeat-x - Das Bild wird in einer einzigen horizontalen Zeile wiederholt
repeat-y - Das Bild wird in einer einzigen vertikalen Zeile wiederholt

background
P {background: silver url(bg.gif) repeat-y}
Ähnlich wie bei font kannst du hier mehrere Attribute und Werte, die sich auf background beziehen, zusammenfassen. Die Reihenfolge ist hierbei background-color, background-image und background-repeat.

III. Textdarstellung und -ausrichtung

Attribut	Beispielsyntax
word-spacing	DIV {word-spacing: 1em} oder <P STYLE="word-spacing:0.9em"> Durch das Attribut word-spacing wird ein zusätzlicher Abstand zwischen einzelnen Wörtern eines Textes eingefügt. Die unterstützte Einheit ist dabei em, also das n-fache der Länge des Buchstaben m aus dieser Schrift. (Anm.: Diese Option scheint allerdings in den 4er Versionen des Internet Explorers und Netscape Navigators noch nicht unterstützt zu werden... !?!)
letter-spacing (nur IE/Mozilla)	H2 {letter-spacing: 1.5em} oder <A STYLE="letter-spacing:0.8em"> Das Attribut letter-spacing ist dem Attribut word-spacing ähnlich, nur daß hier die Abstände zwischen einzelnen Buchstaben eines Wortes variiert werden können (z.B. nützlich beim Hervorheben von Überschriften oder anderen wichtigen Textpassagen). (Anm.: Wird bislang offenbar nicht von den 4er Versionen des Netscape Navigators unterstützt) Beispiel für die Syntax <P STYLE="font-weight:bold; color:#255E97; letter-spacing:1em"> Auseinander- gezogener Text
text-decoration	Q {text-decoration:underline} oder <P STYLE="text-decoration:line-through"> Durch das Attribut text-decoration wird es dem Webdesigner beispielsweise ermöglicht, Text unterstrichen oder durchgestrichen zu zeigen. Damit sollen die HTML-Tags <u> und <strike> abgelöst werden. Alle Werte, die text-decoration annehmen kann: none - Standard underline - unterstrichen overline - durchgezogene Linie über dem Text (nur IE/Mozilla) line-through - durchgestrichener Text blink - blinkender Text (nur Netscape Navigator) Beispiel für die Syntax <P STYLE="font-weight:bold; color:#2A790E; text-decoration:underline"> dunkelgrüner fetter unterstrichener Text
text-align	BLOCKQUOTE {text-align=right} oder <DIV STYLE="text-align:justify"> Das Attribut text-align tritt die Nachfolge der direkten HTML-Tag-Attribute ALIGN="CENTER", "RIGHT" "LEFT" und "JUSTIFY" an. Entsprechend heißen auch die dazugehörigen Werte: center - mittige Ausrichtung des Textes left - linksbündige Ausrichtung (Standard) right - rechtsbündige Ausrichtung justify - Text wird als Blocksatz dargestellt Beispiel für die Syntax <P STYLE="font-weight:bold; color:#2A790E; text-align:right"> dunkelgrüner fetter rechtsbündig ausgerichteter Text
vertical-align	I {vertical-align:sub} vertical-align beeinflußt wie der Name schon sagt die vertikale Aurichtung des speziell mit diesem Attribut formatierten Textes im Verhältnis zum übrigen Text aus. Es läßt sich also beispielsweise höher oder tiefergestellter Text damit anzeigen, jedoch gibt es gegenüber den HTML-Tags <sub> und <sup> ungleich mehr Gestaltungsmöglichkeiten... baseline - gleiche Ausrichtung wie das Elternelement sub - tiefergestellte Ausrichtung sup - höhergestellte Ausrichtung text-top und text-bottom - Ausrichtung an der Ober- bzw. Unterlinie des Elternelements

IV. Ränder, Rahmen und Abstände

Attribut Beispielsyntax

margin
Tochterelemente:
margin-top margin-bottom margin-right margin-left
BODY {margin-top: 10pt; margin-left:20pt}
oder

Durch das margin Attribut wird festgelegt, wieviel freier Platz zwischen dem definierten Element und seinem Nachbarelement verbleiben soll. Dabei kann durch die Tochterattribute von margin (siehe links Spalte) jeder Rand des Elementes individuell festgelegt werden. Fehlt eine Definition, wird der angegebene Abstand vom jeweils gegenüberliegenden Rand übernommen. Durch margin allein wird auf allen Seiten derselbe Abstand definiert. Zulässige Einheiten sind px, pt, in, em, ein Prozentwert und die Angabe auto.

padding
Tochterelente:
padding-top padding-bottom padding-right padding-left (nur IE/Mozilla)
H2 {padding-top: 10px; padding-bottom-20px; padding-right:15px; padding-left:15px}
oder

Durch das Attribut padding und seiner Tochterelemente werden die Abstände zwischen dem Inhalt eines Elementes und dessen Grenzen gesetzt. Auf diese Weise kann man zum Beispiel den farbigen Hintergrund um eine Textzeile über die eigentliche Höhe bzw. Breite der Textzeile hinaus erweitern. Zulässige Einheiten: siehe margin
Beispiel für die Syntax


Textelement mit durch Padding erweiterten Grenzen

border
Tochterelemente:
border-top border-bottom border-right border-left
border-top-width border-bottom-width border-right-width border-left-width
border-width
border-color
border-style
BLOCKQUOTE {border:navy; border-width:5px; border-style:groove}
oder

Durch das Attribut border und seiner zahlreichen Tochterelemente kann ein sehr individueller Rahmen um das zu formatierende Element erzeugt werden. Die border-Attribute und ihre Werte im Überblick:

border-top, ~-bottom, ~-right und ~-left - lassen die Zuweisung eines Stils und einer Farbe für jede einzelne Rahmenseite zu. Zulässige Werte: hexadezimale RGB-Triplets, dezimale RGB-Triplets, Farbnamen und Rahmenstile (siehe die Werte bei color)
border-top-width, ~-bottom-~, ~right-~ und ~-left-~ lassen die Definition der Rahmenstärke für jede einzelne Seite des Rahmes zu. Zulässige Einheiten: siehe margin
border-width - zusammenfassende Abkürzung für die Breitenzuordnung der Rahmenseiten
border-color - zusammenfassende Farbzuweisung an alle vier Rahmenseiten (z.B.: border-color:orange)
border-style - hierdurch kann das Erscheinungsbild des Rahmes durch verschiedene Effekte varriert werden. Diese müssen im Internet Browser angelegt sein. Bislang existieren nur einige dieser Stilanlagen im Internet Explorer. Bislang bekannte zulässige Werte: none, dotted, dashed, solid, double, groove, ridge, inset und outset

Beispiel für die Syntax


dunkelgrüner fetter Text mit vier Pixel großem roten Doppelrahmen

Du hast nun einen Überblick über die gebräuchlichsten Style Sheet Attribute erhalten. Doch wie und wo können die CSS Style Sheets eingebaut und verwendet werden. Die folgende Seite zeigt dir die Möglichkeiten, die du hast, Style Sheets einzusetzen und Formatvorlagen zu definieren.