|
Ab HTML 4.0 sind Formatvorlagen (engl. Style Sheets) oder CSS
(Cascading Style Sheets) die vom W3C empfohlene Methode zur Formatierung
von HTML-Dokumenten. Von der Verwendung älterer Formatierungsmöglichkeiten,
wie z. B. dem FONT-Tag, wird ausdrücklich abgeraten -
was aber manches Entwicklungswerkzeug und auch Dreamweaver ignoriert.
Umgesetzt werden CSS vom MSIE ab V3.0 (erweitert ab V4.0) und vom
Navigator ab V4.0. Doch teils in unterschiedlicher Form und einige
der in den CSS-Standards V1.0 und V2.0 vereinbarten Stilattribute
werden z. Z. noch von keinem Browser unterstützt. Dennoch
kann ihre Verwendung von großem Vorteil sein:
 |
Sie vereinfachen die Gestaltung und können Dokumente
klein im Speicherbedarf halten. |
|
Sie fördern einen gleichförmigen Aufbau der Seiten. |
|
Sie schaffen neue, mit dem Standard-HTML nicht zu leistende
Formatierungsmöglichkeiten. |
|
Die Gestaltung eines Dokuments das auf Formatvorlagen aufbaut
kann auch außerhalb des Dokuments vorgenommen werden. |
Beeinflußbar durch Style-Sheets sind (CSS1.0, IE 3.0 und
Netscape 4.0):
| Gruppe |
Code |
Wert (Beispiel) |
HTML |
| Schrift |
font-familiy: |
"Century Schoolbook",Times,serif;
|
<font face= |
| |
font-style: |
italic|none; |
<i> |
| |
font-size: |
24pt; ² |
<font size= |
| |
font-weight: |
bold|100|200|300|...900; |
nur <b> |
| |
font: (kombiniert) |
bold italic 12pt Arial, serif; |
|
| Text |
text-decoration: |
underline|line-through|none; |
~<u>, <s> |
| |
color: |
#CC0000 |
<font color= |
| |
text-align: |
justify|center|left|right; |
~align= |
| |
text-indent: (Einrückung) |
7.5mm; ² |
– |
| |
line-height: |
16pt; ² |
– |
| |
text-transform: |
uppercase|lowercase; |
– |
| Kasten ¹ |
margin: (speziell: margin-top/-left/...);
|
1px; ² |
~ |
| |
vertical-align: |
top|middle|bottom; |
– |
| Rahmen und |
border-width: (speziell: border-top-width/...) |
2px; ² |
~border |
| Innenabstände ¹ |
border-style: (speziell: border-top-style/...)
|
solid|double|groove|ridge|inset|outset; |
– |
| |
border-color: |
#99CCFF; |
~ |
| |
padding: (speziell: padding-top/-left/...) |
3mm; ² |
~ |
| Hintergrund ¹ |
background-color: |
#003366; |
~bgcolor= |
| |
background-image: |
url(back.gif); |
~background= |
| |
background-repeat: |
repeat|no-repeat; |
– |
| Listen |
ul list-style-type:
|
circle|disc|square|none; |
<ul type= |
| |
ol list-style-type: |
decimal|lower-roman|lower-alpha|upper-roman; |
<ol type= |
| speziell |
a:link (ebenso a:visited / a:active) |
{color:#FF0000; text-decoration:none} |
– |
¹ Nur
auf Blockebene verwendbar - d. h. Tags wie h1, p, blockquote,
center, div, table, tr, th, td, img...
² Nummerische
Angabe (. statt ,) mit Einheiten wie mm, cm, px
(Pixel), pt (Punkt=1/72 inch), % (zur Norm)
Definitions-/ Verwendungsformen
Es existieren zwei grundsätzliche Arten, Stile zum Einsatz
zu bringen:
- Durch das STYLE-Attribut an 'Ort und Stelle' in den Tags eines
Dokuments - i. A. eine unsinnige, weil umständliche
und der CSS-Idee widersprechende Variante, die von Dreamwever
auch nicht unterstützt wird. Bsp.: <h3 style="color:red">...</h3>
- Durch Formatdefinitionen im Head eines Dokuments oder in einer
separaten, im Head verknüpften 'reinen' Textdatei (Dateitypkennzeichner:
css). Diese definieren entweder als "Tag-Stil"
übliche Eigenschaften eines HTML-Tags neu/um (mit Auswirkung
auf alle Verwendungen dieses Tags im Dokument) oder schaffen als
"Selektor-Stil" eine Bezugsmöglichkeit für
ausgesuchte Tags/Bereiche im Dokument. Die Bezugnahme erfolgt
dann, an Ort und Stelle, durch die Attribute CLASS="name"
oder ID="name". Bsp.: <h3 class="grey">...</h3>
Syntax. eines Definitionsbereichs im Head: <STYLE type="text/css">
...</STYLE>
Syntax einer Verknüpfung: <LINK rel="Stylesheet"
href="xyz.css" type="text/css">
| Beispiele für Tag-/Selektor-Stil
Definitionen: |
(siehe dazu Beispielseite)
|
| 1) |
BODY
{ font-family: "comic sans ms", "times
new roman", serif; } |
| 2) |
H1,
H2, H3 { font-family:Arial, "sans-serif";
font-style:italic; color:#FF0000; } |
| 3) |
all.grey
{ background-color:#cccccc; } |
| 4) |
TD.blue
{ color:#0000FF; background-color:#FFFF00; font:bold italic
12pt Schoolbook, serif; } |
| 5) |
#idred1
{ color:#FF0000; border-width:8px; border-style:solid;
border-color:#999999; } |
| 6) |
P
B { color:#0000FF} /* Kommentar-Beispiel */ |
|
- Wirkt sich auf den BODY Tag aus und beeinflußt hier die
Schrift des ganzen Dokuments.
- Alle Headlines der Größen 1-3 im Dokument werden
umdefiniert.
- Definition einer ungebundenen, in jedem Tag verwendbaren Klasse
('all' kann entfallen).
- Definition einer Unter-Klasse, die nur in Verbindung mit einem
bestimmten Tag verwendet werden soll.
- Definition eines Stils für ein ganz bestimmtes, einmaliges
Seitenelement.
- Definition eines kombinierten Stils, der nur für 'fettes'
in einem Paragraphen gilt.
Dreamweaver
 Dreamweaver
sieht eine beliebige Definition von Stilen vor (mit Ausnahme der
allgemein wenig sinnvollen Inline-Definition) und unterstützt
über das CSS-Stile Fenster insbesondere die Verwendung von
Klassen-Stilen Das Anklicken einer der gelisteten Stile wendete
diesen auf das markierte Objekt bzw. einen markierten Bereich im
aktuell bearbeiteten Dokument an. (1) erlaubt die Verknüpfung
einer Formatvorlagendatei. (2) die Definition eines neuen Stils,
entweder im Head oder in einer Formatvorlagendatei. (3) dient dem
Bearbeiten von Stildefinitionen und (4) löscht die markierte
Stil-Definition.
Ein Wermutstropfen existiert allerdings in Verbindung
mit HTML-Vorlagen (Templets): Da diese den Head für Bearbeitungen
sperren, ist dort keine individuelle Stildefinition im Head eines
Dokuments möglich. Wohl aber in der Vorlagendatei (.tmp) selbst
oder in einer ggf. verknüpften Formatvorlagendatei (.css).
Problematischer ist, dass Dreamweaver bis zur Version 4.0 leider
nur die üblichsten Stile in der Layout-Ansicht anzeigt.
|
