 |
HTML-Dateien selbst erstellen | ||
|
Dokumentation: HTML | ||
|
Style-Sheets - Formatvorlagen | ||
|
|
||||||||||||
Angaben zur Schrift- und Textformatierung
Angaben zu Farbe und Hintergrund
Angaben zur Absatzformatierung
Spezielle Angaben zur Listenformatierung
pt für Punkt (= 1/72 inches)
pc für Pica (= 12 Punkt)
in für Inch (= 2,54 cm)
mm für Millimeter
cm für Zentimeter
em für elementeigene Schrifthöhe (relative Angabe)
ex für elementeigene Höhe des Buchstabens x (relative Angabe)
px für Pixel (relative Angabe wegen unterschiedlicher Bildschirmauflösung)
% für Prozent gegenüber Elementnorm (relative Angabe)
| Eigenschaft | Syntax | Werte / Wertebereiche | Beispiel |
|---|---|---|---|
| Schriftfamilie | font-family: | (Schriftnamen / Schriftfamiliennamen) erlaubt bei allen Elementen |
h1,h2,h3 { font-familiy: arial } |
| Schriftart | font-style: | [normal | italic | oblique] erlaubt bei allen Elementen |
h1 { font-style: italic } |
| Schriftvariante | font-variant: | [normal | small-caps] erlaubt bei allen Elementen |
h3 { font-variant: small-caps } |
| Schriftgröße | font-size: | Numerischer Wert erlaubt bei allen Elementen |
p { font-size: 12 pt } p.klein { font-size: 80% } |
| Schriftgewicht | font-weight: | [normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] erlaubt bei allen Elementen |
strong { font-weight: bold } |
| Schrift (allgemein) | font: | (Zusammensetzung aus: font-style font-variant font-weight font-size line-height font-family) erlaubt bei allen Elementen |
p { font: bold italic Palatino } |
| Wortabstand | word-spacing: | Numerischer Wert erlaubt bei allen Elementen |
h3 { word-spacing: 5mm } |
| Zeichenabstand | letter-spacing: | Numerischer Wert erlaubt bei allen Elementen |
b { letter-spacing: 0.3em } |
| Zeilenhöhe | line-height: | Numerischer Wert erlaubt bei allen Elementen |
h2 { line-height: 125% } |
| Textdekoration | text-decoration: | [underline | overline | line-through | blink | none] erlaubt bei allen Elementen |
strong { text-decoration: blink } |
| Texttransformation | text-transform: | [capitalize | uppercase | lowercase | none] erlaubt bei allen Elementen |
h1 { text-transform: capitalize } |
| Texteinrückung | text-indent: | Numerischer Wert erlaubt bei allen absatzerzeugenden Elementen |
p { text-indent: 5mm } |
| Vertikale Textausrichtung | vertical-align: | [baseline | sub | super | top | text-top | middle | bottom | text-bottom] oder numerisch in Prozent erlaubt bei allen absatzerzeugenden Elementen |
p.grafik { vertical-align: top } |
| Horizontale Textausrichtung | text-align: | [left | right | center | justify] erlaubt bei allen absatzerzeugenden Elementen |
p.mittig { text-align: center } |
#XXXXXX für hexadezimale RGB-Werte - siehe 
Hexadezimale Angabe von Farben
rgb(#,#,#) für dezimale RGB-Werte, # = 0-255
[Farbname] für Grundfarben - siehe Farbnamen für die 16 Grundfarben
url([Dateiname]) für Hintergrundbilder
| Format-Eigenschaft | Syntax | Werte / Wertebereiche | Beispiel |
|---|---|---|---|
| Farbe | color: | Farbangabe erlaubt bei allen Elementen |
p { color: rgb(0,128,255) } |
| Hintergrundfarbe | background-color: | Farbangabe erlaubt bei allen Elementen |
table { background-color: black } |
| Hintergrund-Bild | background-image: | URL-Angabe erlaubt bei allen Elementen |
table { background-image: url(back.gif) } |
| Wallpaper-Effekt | background-repeat: | [repeat | repeat-x | repeat-y | no-repeat] erlaubt bei allen Elementen |
body { background-repeat: no-repeat } |
| Wasserzeichen-Effekt | background-attachment: | [scroll | fixed] erlaubt bei allen Elementen |
body { background-attachment: fixed } |
| Hintergrundposition | background-position: | [top | center | bottom] und [left | center | right] oder als numerischer Wert erlaubt bei allen absatzerzeugenden Elementen und body |
body { background-position: 100% 100% } |
| Hintergrund (allgemein) | background: | (Zusammensetzung aus den einzelnen background-Eigenschaften) erlaubt bei allen Elementen |
p { background: url(back.gif) fixed } |
Abstand/Rand bedeutet den Abstand eines Elements zu den seitlichen Begrenzungen des Anzeigefensters und zu voranstehenden oder nachfolgenden Elementen. In Verbindung mit Hintergrundfarbangaben kann dieser Rahmen auch optisch sichtbar vom übrigen Inhalt abgegrenzt sein.
Rahmen bedeutet einen Außenrahmen um ein Element.
Innenabstand bedeutet den Abstand zwischen Inhalt eines Elements und dessen Außenrahmen. Dies ist relevant, wenn das Element aufgrund von Hintergrundfarbangaben oder Rahmen optisch sichtbar ist.
| Format-Eigenschaft | Syntax | Werte / Wertebereiche | Beispiel |
|---|---|---|---|
| Abstand/Rand oben | margin-top: | Numerischer Wert erlaubt bei allen Elementen |
h1 { margin-top: 20 pt } |
| Abstand/Rand links | margin-left: | Numerischer Wert erlaubt bei allen Elementen |
h1 { margin-left: 10% } |
| Abstand/Rand unten | margin-bottom: | Numerischer Wert erlaubt bei allen Elementen |
h1 { margin-bottom: 30 pt } |
| Abstand/Rand rechts | margin-right: | Numerischer Wert erlaubt bei allen Elementen |
h1 { margin-right: 20% } |
| Abstand/Rand allgemein) | margin: | Numerischer Wert (alle Rahmenseiten) erlaubt bei allen Elementen |
h1 { margin: 1 cm } |
| Rahmendicke oben | border-top-width: | [thin | medium | thick] oder numerischer Wert erlaubt bei allen Elementen |
h1 { border-top-width: thin } |
| Rahmendicke links | border-left-width: | [thin | medium | thick] oder numerischer Wert erlaubt bei allen Elementen |
h1 { border-left-width: thick } |
| Rahmendicke unten | border-bottom-width: | [thin | medium | thick] oder numerischer Wert erlaubt bei allen Elementen |
h1 { border-bottom-width: 5 mm } |
| Rahmendicke rechts | border-right-width: | [thin | medium | thick] oder numerischer Wert erlaubt bei allen Elementen |
h1 { border-right-width: medium } |
| Rahmendicke (alle Ränder) | border-width: | [thin | medium | thick] oder numerischer Wert erlaubt bei allen Elementen |
h1 { border-width: thin } |
| Rahmenfarbe | border-color: | Farbangabe, 1 bis 4 Angaben für die einzelnen Rahmen erlaubt bei allen Elementen |
h1: { border-color: #FFCC99 } |
| Rahmentyp | border-style: | [none | dotted | dashed | solid | double | groove | ridge | inset | outset], 1 bis 4 Angaben für die einzelnen Rahmen erlaubt bei allen Elementen |
h1: { border-style: dashed } |
| Rahmen oben (allgemein) | border-top: | (Zusammensetzung aus den einzelnen Rahmenigenschaften für Rahmen oben) erlaubt bei allen Elementen |
h1: { border-top: thick solid red } |
| Rahmen links (allgemein) | border-left: | (Zusammensetzung aus den einzelnen Rahmenigenschaften für Rahmen links) erlaubt bei allen Elementen |
h1: { border-left: thin dashed #FFCC00 } |
| Rahmen unten (allgemein) | border-bottom: | (Zusammensetzung aus den einzelnen Rahmenigenschaften für Rahmen unten) erlaubt bei allen Elementen |
h1: { border-bottom: medium black } |
| Rahmen rechts (allgemein) | border-right: | (Zusammensetzung aus den einzelnen Rahmenigenschaften für Rahmen rechts) erlaubt bei allen Elementen |
h1: { border-right: thick solid blue } |
| Rahmen (allgemein) | border | (Zusammensetzung aus den einzelnen Rahmenigenschaften für gesamten Rahmen) erlaubt bei allen Elementen |
h1: { border: solid red } |
| Innenabstand oben | padding-top: | Numerischer Wert erlaubt bei allen Elementen |
h1 { padding-top: 10 pt } |
| Innenabstand links | padding-left: | Numerischer Wert erlaubt bei allen Elementen |
h1 { padding-left: 10% } |
| Innenabstand unten | padding-bottom: | Numerischer Wert erlaubt bei allen Elementen |
h1 { padding-bottom: 15 pt } |
| Innenabstand rechts | padding-right: | Numerischer Wert erlaubt bei allen Elementen |
h1 { padding-right: 5% } |
| Innenabstand allgemein) | padding: | Numerischer Wert (Innenabstände aller Seiten) erlaubt bei allen Elementen |
h1 { padding: 10 mm } |
| Format- | Syntax | Werte / Wertebereiche | Beispiel |
|---|---|---|---|
| Darstellungstyp | list-style-type: | [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] erlaubt bei ol, ul |
ul { list-style-type: square } |
| Listeneinrückung | list-style-position: | [inside | outside] erlaubt bei ol, ul |
ol { list-style-position: inside } |
| Listen-Bulltet-Grafik | list-style-image: | URL-Angabe erlaubt bei ol, ul |
ul { list-style-image: url(yellow.gif) } |
| Listendarstellung (allgemein) | list-style: | (Zusammenfassung aller Listeneigenschaften) erlaubt bei ol, ul |
ul { list-style: square inside } |
| Blättern: | |||
| Style-Sheets in HTML einbinden |  |
 |
Daten und Programme als Objekt einbinden |
|
HTML-Dateien selbst erstellen | ||
|
Dokumentation: HTML | ||
|
Style-Sheets - Formatvorlagen | ||
© 1997
Stefan Münz, s.muenz@euromail.com