 |
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)
#XXXXXX für hexadezimale RGB-Werte - siehe
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.
Angaben zur Schrift- und Textformatierung
Erlaubte Maßangaben bei numerischen Werten:
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 Elementenh1,h2,h3 { font-familiy: arial }
Schriftart
font-style:
[normal | italic | oblique]
erlaubt bei allen Elementenh1 { font-style: italic }
Schriftvariante
font-variant:
[normal | small-caps]
erlaubt bei allen Elementenh3 { font-variant: small-caps }
Schriftgröße
font-size:
Numerischer Wert
erlaubt bei allen Elementenp { 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 Elementenstrong { font-weight: bold }
Schrift (allgemein)
font:
(Zusammensetzung aus: font-style font-variant font-weight font-size line-height font-family)
erlaubt bei allen Elementenp { font: bold italic Palatino }
Wortabstand
word-spacing:
Numerischer Wert
erlaubt bei allen Elementenh3 { word-spacing: 5mm }
Zeichenabstand
letter-spacing:
Numerischer Wert
erlaubt bei allen Elementenb { letter-spacing: 0.3em }
Zeilenhöhe
line-height:
Numerischer Wert
erlaubt bei allen Elementenh2 { line-height: 125% }
Textdekoration
text-decoration:
[underline | overline | line-through | blink | none]
erlaubt bei allen Elementenstrong { text-decoration: blink }
Texttransformation
text-transform:
[capitalize | uppercase | lowercase | none]
erlaubt bei allen Elementenh1 { text-transform: capitalize }
Texteinrückung
text-indent:
Numerischer Wert
erlaubt bei allen absatzerzeugenden Elementenp { 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 Elementenp.grafik { vertical-align: top }
Horizontale Textausrichtung
text-align:
[left | right | center | justify]
erlaubt bei allen absatzerzeugenden Elementenp.mittig { text-align: center }
Angaben zu Farbe und Hintergrund
Erlaubte Angaben bei Farben:
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 Elementenp { color: rgb(0,128,255) }
Hintergrundfarbe
background-color:
Farbangabe
erlaubt bei allen Elemententable { background-color: black }
Hintergrund-Bild
background-image:
URL-Angabe
erlaubt bei allen Elemententable { background-image: url(back.gif) }
Wallpaper-Effekt
background-repeat:
[repeat | repeat-x | repeat-y | no-repeat]
erlaubt bei allen Elementenbody { background-repeat: no-repeat }
Wasserzeichen-Effekt
background-attachment:
[scroll | fixed]
erlaubt bei allen Elementenbody { background-attachment: fixed }
Hintergrundposition
background-position:
[top | center | bottom] und [left | center | right] oder als numerischer Wert
erlaubt bei allen absatzerzeugenden Elementen und bodybody { background-position: 100% 100% }
Hintergrund (allgemein)
background:
(Zusammensetzung aus den einzelnen background-Eigenschaften)
erlaubt bei allen Elementenp { background: url(back.gif) fixed }
Angaben zur Absatzformatierung
Erläuterung:
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 Elementenh1 { margin-top: 20 pt }
Abstand/Rand links
margin-left:
Numerischer Wert
erlaubt bei allen Elementenh1 { margin-left: 10% }
Abstand/Rand unten
margin-bottom:
Numerischer Wert
erlaubt bei allen Elementenh1 { margin-bottom: 30 pt }
Abstand/Rand rechts
margin-right:
Numerischer Wert
erlaubt bei allen Elementenh1 { margin-right: 20% }
Abstand/Rand allgemein)
margin:
Numerischer Wert (alle Rahmenseiten)
erlaubt bei allen Elementenh1 { margin: 1 cm }
Rahmendicke oben
border-top-width:
[thin | medium | thick] oder numerischer Wert
erlaubt bei allen Elementenh1 { border-top-width: thin }
Rahmendicke links
border-left-width:
[thin | medium | thick] oder numerischer Wert
erlaubt bei allen Elementenh1 { border-left-width: thick }
Rahmendicke unten
border-bottom-width:
[thin | medium | thick] oder numerischer Wert
erlaubt bei allen Elementenh1 { border-bottom-width: 5 mm }
Rahmendicke rechts
border-right-width:
[thin | medium | thick] oder numerischer Wert
erlaubt bei allen Elementenh1 { border-right-width: medium }
Rahmendicke (alle Ränder)
border-width:
[thin | medium | thick] oder numerischer Wert
erlaubt bei allen Elementenh1 { border-width: thin }
Rahmenfarbe
border-color:
Farbangabe, 1 bis 4 Angaben für die einzelnen Rahmen
erlaubt bei allen Elementenh1: { 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 Elementenh1: { border-style: dashed }
Rahmen oben (allgemein)
border-top:
(Zusammensetzung aus den einzelnen Rahmenigenschaften für Rahmen oben)
erlaubt bei allen Elementenh1: { border-top: thick solid red }
Rahmen links (allgemein)
border-left:
(Zusammensetzung aus den einzelnen Rahmenigenschaften für Rahmen links)
erlaubt bei allen Elementenh1: { border-left: thin dashed #FFCC00 }
Rahmen unten (allgemein)
border-bottom:
(Zusammensetzung aus den einzelnen Rahmenigenschaften für Rahmen unten)
erlaubt bei allen Elementenh1: { border-bottom: medium black }
Rahmen rechts (allgemein)
border-right:
(Zusammensetzung aus den einzelnen Rahmenigenschaften für Rahmen rechts)
erlaubt bei allen Elementenh1: { border-right: thick solid blue }
Rahmen (allgemein)
border
(Zusammensetzung aus den einzelnen Rahmenigenschaften für gesamten Rahmen)
erlaubt bei allen Elementenh1: { border: solid red }
Innenabstand oben
padding-top:
Numerischer Wert
erlaubt bei allen Elementenh1 { padding-top: 10 pt }
Innenabstand links
padding-left:
Numerischer Wert
erlaubt bei allen Elementenh1 { padding-left: 10% }
Innenabstand unten
padding-bottom:
Numerischer Wert
erlaubt bei allen Elementenh1 { padding-bottom: 15 pt }
Innenabstand rechts
padding-right:
Numerischer Wert
erlaubt bei allen Elementenh1 { padding-right: 5% }
Innenabstand allgemein)
padding:
Numerischer Wert (Innenabstände aller Seiten)
erlaubt bei allen Elementenh1 { padding: 10 mm }
Spezielle Angaben zur Listenformatierung
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, ulul { list-style-type: square }
Listeneinrückung
list-style-position:
[inside | outside]
erlaubt bei ol, ulol { list-style-position: inside }
Listen-Bulltet-Grafik
list-style-image:
URL-Angabe
erlaubt bei ol, ulul { list-style-image: url(yellow.gif) }
Listendarstellung (allgemein)
list-style:
(Zusammenfassung aller Listeneigenschaften)
erlaubt bei ol, ulul { 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
Stefan Münz, s.muenz@euromail.com