Wie im ersten Beispiel ersichtlich ist , können nebst Zahlenwerten von 0 bis 255 auch prozentuale Angaben ( 0 bis 100% ) gemacht werden .
Wird ein reiner Zahlenwert notiert , wird dieser als Pixelangabe interpretiert .
Daneben ist theoretisch auch noch die Angabe von Verhältniswörtern möglich ( z.B. light , bold , lighter , bolder , extra-bold , etc . ) . Ein Einsatz lohnt sich jedoch momentan kaum , da die Interpretation mehr als mangelhaft ist .
ANGABE
|
|
RELEVANTE WERTE
|
|
VERWENDUNG / BEMERKUNGEN
|
|
SCHRIFT
|
| text-decoration
| |
none , underline , overline, line-through
| |
mit none verschwindet ein allfälliger Unterstrich. Mit underline bzw. overline wird ein Unter- bzw- Überstrich hinzufügt. line-trough streicht den Bereich durch.
|
| font-family
| | alle Schriftnamen
| |
Schriftnamen bestehend aus mehreren Wörtern wie 'Zurich BT' innerhalb von Gänsefüsschen notieren. Es können mehrere Schriftarten definiert werden :
<p style="font-family:Verdana,Helvetica">Diese Schrift wird , falls auf dem Rechner des Anwenders vorhanden , in Verdana dargestellt , ansonsten in Helvetica (falls vorhanden).</p>
|
| font-size
| | Z
| |
Schriftgrösse . font-size
|
| font
| | Z + Schriftname(n)
| |
Beispiel: p,ul,li,table,td {font:12px "Comic Sans MS",Verdana}
|
| font-weight
| | normal , bold
| | Schriftstil.
bold = fett
italic = kursiv
|
| font-style
| | normal , italic
|
|
| line-height
| | Z
| |
Zeilenhöhe. Oftmals treten Probleme auf bei Netscape's Navigator hinsichtlich line-height in Verbindung mit Grafiken (Bilder werden willkürlich verschoben). font-size, line-height & font-family können auch folgendermassen zusammengefasst werden:
font:14px/16px Verdana
|
| letter-spacing
| | Z
| | Abstand zwischen Buchstaben
|
| word-spacing
| | Z
| | Abstand zwischen Wörtern
|
|
FARBEN / HINTERGRUND
|
| color
| | hex
| | bestimmt die Schriftfarbe.
|
| background-color
| | hex
| | bestimmt die Hintergrundfarbe.
|
| background-image
| |
url([Adresse der Grafik])
| |
bestimmt ein Hintergrundbild.
Beispiel : background-image:url(../bg.gif)
|
| background-repeat
| |
repeat , no-repeat , repeat-x , repeat-y
| | bestimmt Wiederholung des Hintergrundbildes.
|
| background-attachment
| | fixed, scroll
| | fixiert das Hintergrundbild.
|
|
background-position
| |
top, center, middle, bottom, left, right, Z, Kombinationen möglich
| |
Position des Hintergrundbildes.
Zahlenangabe Beispiel: background-position:right bottom 20px 5px 20px= x-Koordinate, 5px= y-Koordinate (senkrecht).
Angaben zum Hintergrund können auch zusammengefasst werden :
background:#EEEEEE url (../grafiken/bg.gif) no-repeat fixed
( Beispiel )
|
|
LINKS
|
|
Hinsichtlich Links sind vor allem color und text-decoration sinnvoll .
a {color:#663399;text-decoration:none}
ergibt :
Link ohne Unterstrich
Vielleicht möchtet ihr auch individuelle Farben o.a. für noch nicht besuchte / besuchte Links usw. festlegen . In diesem Fall müsst ihr sogenannte Pseudo - Formate zu Hilfe nehmen :
a:link {color:#663377;text-decoration:none}
a:visited {color:#677399;text-decoration:none}
a:active {color:#677399;text-decoration:none}
a:hover {color:#664499;text-decoration:underline}
ergibt :
Ein Link ...
Das Pseudo-Format hover bezeichnet den Zustand des Links beim Drüberfahren mit der Maus .
Leider wird es von Netscape noch nicht interpretiert .
Eine zweite Klasse von Links könnt ihr z.B. folgendermassen definieren :
a.nav:link {color:#663334;text-decoration:none}
a.nav:visited {color:#674399;text-decoration:none}
a.nav:active {color:#670099;text-decoration:none}
a.nav:hover {color:#662399;text-decoration:none}
Die Einbindung erfolgt in diesem Fall mit class="nav" , also <a href="..." class="nav"> .
Ein oder mehrere Pseudo - Formate können auch zusammengefasst werden :
a.nav2:link,a.nav2:visited,a.nav2:active
{color:#670099;text-decoration:none}
a.nav2:hover {color:#0000FF;text-decoration:underline}
ergibt :
Und noch ein Link ...
Unter - und Überstrich gleichzeitig :
a.4:link,a.4:visited,a.4:active
{color:#670099;text-decoration:none}
a.4:hover {color:#0000FF;text-decoration:underline overline}
ergibt :
Wieder mal ein Link ...
Die Reihenfolge (link, visited, active, hover) ist für eine korrekte Interpretation sehr wichtig.
|
|
WEITERES
Die folgenden Angaben werden vom Netscape Navigator 4.x grösstenteils ignoriert oder mangelhaft dargestellt.
|
|
ABSTÄNDE
|
| padding
| | Z
| |
padding bezeichnet den Innenabstand eines Elements zum Rand- im Speziellen bei Tabellen.
margin ist der 'normale' Rand.
Es sind auch negative Werte möglich:
Textabschnitt mit "margin-left:-50px" , am linken Rand der Tabellenzelle abgeschnitten oder überlappend, je nach Browser.
|
| padding-top
| | Z |
|
| padding-bottom
| | Z |
|
| padding-left
| | Z |
|
| padding-right
| | Z |
|
| margin
| | Z |
|
| margin-top
| | Z |
|
| margin-bottom
| | Z |
|
| margin-left
| | Z |
|
| margin-right
| | Z |
|
|
RAHMEN
|
| border-width
| | Z
| |
auch jede Seite einzeln definierbar mit border-*-width, wobei * top, bottom, left oder right ist.
|
| border-style
| | none, solid
dashed, dotted, double
groove, ridge, inset, outset
| |
Die meisten Werte werden erst ab IE 5.0 interpretiert .
|
| border-color
| | hex
| |
immer auch border-style mitdefinieren (wird sonst beim IE 4.x nicht dargestellt).
Angaben zum Rahmen können auch zusammengefasst werden:
border:1px solid #FF00CC
( Beispiel )
|
|
LISTEN
|
| list-style
| |
none, disc, circle, square - decimal, upper roman, lower roman, upper alpha, lower alpha
| |
wird von NN 4.x interpretiert.
|
| list-style-position
| | inside, outside
| |
- Dies ist eine Liste mit der Angabe outside. Der Listenpunkt ist ausgerückt.
- Dies ist eine Liste mit der Angabe inside. Der Listenpunkt ist eingerückt.
|
| list-style-image
| | url([adresse des bildes])
| |
Beispiel:
list-style-image:url(../img/bg01.gif)
|
|
CURSOR
|
|
cursor
| |
text , default , hand , wait , crosshair , move , n-resize , s-resize , e-resize , w-resize , ne-resize , sw-resize
| |
Wer will schon <u style= "cursor:wait"> ewig warten</u>?
ergibt:
Wer will schon ewig warten?
|
|
DIVERSES
|
| width
| | Z
| | Weite/ Höhe eines Elements.
|
| height
| | Z | |
| row-span
| | Z
| |
Funktionieren analog den HTML - Attributen rowspan und colspan . Mehr dazu im Kapitel über Tabellen .
|
|
column-span | | Z
| |
| vertical-align
| | top , middle , bottom
| |
Vertikale Ausrichtung eines Inhalts. Findet Verwendung bei Tabellen (<td valign="top">).
|
| text-align
| | left , center , right , justify
| |
Horizontale Ausrichtung (bei Text).
Beim NN 4.x hat die Anwendung auf Tags wie body oder table u.U. katastrophale Folgen.
|
| float
| | left, right, none
| | Textumfluss, wie align bei Grafiken.
|
| clear
| | left, right, both, none
| |
Erzwingt (Text)fortsetzung unterhalb (hinsichtlich float)
|
|
ELEMENTE POSITIONIEREN
|
| position
| | relative, absolute (fixed, static)
| |
absolute: vom Fensterrand aus
relative: vom vorherigen Element aus
Macht Sinn in Verbindung mit einer oder mehreren der folgenden Angaben.
|
| top
| | Z, auto
| | Abstände. right und bottom funktionieren laut SelfHTML nicht bei MsIE & NN 4.x.
|
| left
|
| bottom
|
| right
|
| width, height
| | Z
| | (Breite/ Höhe) siehe oben
|
| min-height, max-height, min-width, max-width
| | Z
| |
Maximal- /Minimalbreite/ -höhe. min-width funktioniert ab IE& NN 4.x, Rest nicht (laut SelfHTML).
|
| display
| | none, inline, block, list-item
-
run-in, compact: in CSS 2.0 noch nicht näher spezifiziert.
| | NN & MSIE 4.x interpretieren none, die übrigen Angaben werden unvollständig bzw. gar nicht interpretiert. Unterschied zu visibility: es wird kein Platz freigehalten für das Element.
|
| visibility
| | hidden, visible
| | Sinnvoll in Verbindung mit DTML.
|
| z-index
| | ganze Zahl
| | Bei überlappenden Elementen schichtet sich jenes mit der höheren Zahl über das mit der tieferen.
|