Startseite Themenbereiche Fun Section Sonstiges Kontakt
 
Cascading Style Sheets


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
Farben und Hintergründe
Textdarstellung und -ausrichtung
Abstände, Ränder, Rahmen und ähnliches

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
<P STYLE="color:orange">

Mit dem Attribut color werden Textpassagen Farben zugeordnet, es ist also der Nachfolger des Attributs COLOR aus dem <FONT>-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

<P STYLE="color:green">:

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

<P STYLE="color:orange; background-color:#354573">:

Orangefarbener Text auf schwarzem Grund

background-image
BLOCKQUOTE {background-image: url(Pfad/Bildname.Endung)}
oder
<P STYLE="background-image: url(Pfad/Bildname.Endung)">

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

<P STYLE="font-weight:bold; color:#354573; background-image: url(bg.gif)">

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
<P STYLE="margin:1em">

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
<P STYLE="padding: 0.2in">

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

<P STYLE="font-weight:bold; color:white; background-color:#255E97; padding:0.1in">

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
<P STYLE="border-width: 10px; border-color:#6699ff">

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

<P STYLE="border: 4px double red; font-weight:bold; color:#2A790E">

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.

Weiter Zum Seitenanfang Weiter