SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheets definieren SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheets definieren
 |
Maßeinheiten, Farbangaben, feste Angaben für Style-Sheets |
|
|
 | |
Bei allen numerischen Angaben innerhalb von CSS-Style-Sheets, also etwa bei Schriftgrößen, Absatzabständen oder Rändern, stehen Ihnen alle weit verbreiteten Maßeinheiten zur Verfügung. Dabei sind absolute Angaben (z.B. Millimeter) und relative Angaben (z.B. Prozent gegenüber "normal") möglich. Benutzen Sie für Ihre Angaben die folgenden Abkürzungen:
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 "bezogen auf elementeigene Schrifthöhe"
ex für "bezogen auf elementeigene Höhe des Buchstabens x"
px für Pixel (relative Angabe im Hinblick auf die unterschiedlichen Bildschirmauflösungen bei den Anwendern)
% für Prozent gegenüber Elementnorm
Benutzen Sie bei numerischen Bruchzahlen stets den Punkt als Dezimalzeichen, nicht das deutsche Komma, also etwa 0.2cm und nicht 0,2cm.
<style type="text/css">
<!--
h1 { font-size:24pt; margin-top:1.2cm; margin-left:30px; }
h2 { font-size:18pt; margin-top:130%; margin-left:1.2in; }
p { font-size:12pc; text-indent:14mm; margin-left:3em; }
//-->
</style>
|
Wenn Sie zwischen einzelnen Maßen umrechnen wollen, können Sie den 
Punkt/Inch/Millimeter-Umrechner benutzen.
|
Farbangaben in Style-Sheets nach CSS-Syntax folgen weitgehend den Regeln zum Definieren von Farben in HTML. Sie können Farbwerte also hexadezimal nach dem Schema #XXXXXX angeben, aber auch die verbreiteten Farbnamen verwenden.
Eine zusätzliche Möglichkeit, Farben zu definieren, stellt die CSS-Style-Sheet-Sprache jedoch auch noch zur Verfügung. Diese Möglichkeit hat das Schema rgb(rrr,ggg,bbb). Der Ausdruck rgb(...) ist dabei immer gleich. Innerhalb der Klammern müssen drei Dezimalwerte oder drei Prozentwerte stehen, durch Kommata voneinander getrennt. rrr ist der Rotwert, ggg der Grünwert und bbb der Blauwert der Farbe. Für alle drei Werte sind entweder absolute Zahlen zwischen 0 (kein Anteil der entsprechenden Farbe) und 255 (maximaler Anteil der entsprechenden Farbe) oder Prozentwerte von 0% (kein Anteil an der entsprechenden Farbe) bis 100% (maximaler Anteil der entsprechenden Farbe) erlaubt.
Ab der Version 2.0 der CSS-Sprache gibt es auch noch die Möglichkeit, anwender-relative Farbwörter zu verwenden, hinter denen sich Farben verbergen, die der Anwender an seinem Rechner als Arbeitsumgebung eingestellt hat. Auf diese Weise können Sie zur Gestaltung Ihrer Inhalte Farben verwenden, die auf die Bildschirmumgebungsfarben des Anwenderrechners abgestimmt sind, ohne daß Sie diese Farben kennen. Die erlaubten anwender-relativen Farbwörter werden unterhalb des folgenden Beispiels erläutert.
<style type="text/css">
<!--
h1 { color:#FFCCDD; background-color:black }
body { background-color:rgb(51,0,102); }
blockquote { background-color:rgb(60%,90%,75%); }
div { background-color:infobackground; }
//-->
</style>
|
Folgende Farbwörter sind erlaubt:
activeborder = Farbe der aktiven Fenstertitelzeile.
activecaption = Farbe der Überschrift in der aktiven Fenstertitelzeile.
appworkspace = Farbe des Hintergrunds der aktiven Anwendung.
background = Farbe des Desktop-Hintergrunds.
buttonface = Farbe von Buttons in Dialogfenstern.
buttonhighlight = Farbe für 3D-Schatten von Buttons in Dialogfenstern.
buttontext = Farbe von Texten beschrifteter Buttons in Dialogfenstern.
captiontext = Farbe von Überschriften in Dialogfenstern.
greytext = Farbe von deaktiviertem Text Dialogfenstern.
highlight = Farbe von ausgewählten Einträgen in Auswahllisten.
highlighttext = Farbe von selektiertem Text.
inactiveborder = Farbe einer nicht aktiven Fenstertitelzeile.
inactivecaption = Farbe der Überschrift in einer nicht aktiven Fenstertitelzeile.
infobackground = Farbe für Tooltips und Hints (kleine Popup-Hilfen).
infotext = Textfarbe für Tooltips und Hints (kleine Popup-Hilfen).
menu = Farbe für Menüleisten.
menutext = Farbe für Menüeinträge.
scrollbar = Farbe der Scroll-Leiste in Fenstern.
threeddarkshadow = Dunkle Farbe bei Schatten von 3D-Elementen.
threedface = Farbe von 3D-Elementen.
threedhighlight = Farbe von gerade angeklickten 3D-Elementen.
threedlightshadow = Helle Farbe bei Schatten von 3D-Elementen.
threedshadow = Dunkle Farbe bei Schatten von 3D-Elementen.
window = Hintergrundfarbe von Dokumentfenstern.
windowframe = Farbe von Fensterrahmen.
windowtext = Farbe von normalem Text in Dokumentfenstern.
Zum Definieren von Farben können Sie den Farbauswähler benutzen.
|
|
Bei vielen Style-Sheet-Angaben steht eine Auswahl erlaubter Werte zur Verfügung. Das ist nicht anders als bei vielen HTML-Tags. Genau so, wie Sie etwa eine Überschrift oder einen Textabsatz in HTML mit den Angaben align=left, align=center oder align=right ausrichten können, gibt es Style-Sheet-Angaben, die bestimmte Schlüsselwörter erwarten. So gibt es etwa die Style-Sheet-Angabe text-align zur Ausrichtung von Text, die die gleichen Angaben erwartet, also left, center oder right.
Manche Style-Sheet-Angaben erwarten die Angabe eines Namens oder auch mehrerer Schlüsselwörter. So können Sie hinter der Style-Sheet-Angabe font-family Namen von einer oder mehreren Schriftarten notieren, die Sie für die Formatierung verwenden möchten. Andere Style-Sheet-Angaben sind Zusammenfassungen von Einzelangaben. So gibt es beispielsweise die Angabe border (Rahmen), hinter der Sie eine Angabe wie thin solid red notieren können. Trennen Sie mehrere Angaben zu einer Style-Sheet-Eigenschaft durch Leerzeichen. Wenn die Angaben selbst Leerzeichen enthalten können, so wie etwa Schriftarten, können Sie Kommata zum Trennen verwenden. In solchen Fällen sind auch Anführungszeichen empfehlenswert. Innerhalb dieser Dokumentation an entsprechenden Stellen darauf hingewiesen.
Bei Namen wie Schriftartangaben oder Angaben wie left, center usw., ist es egal, ob Sie die Angaben groß oder klein schreiben. Das gilt auch für die Style-Sheet-Eigenschaften selbst.
<style type="text/css">
<!--
p { font-family:"Comic Sans MS",Arial; text-align:center; }
body { BORDER:THIN DASHED SILVER; background-color:black; }
div.spezial { border:thick double rgb(0,64,128); }
//-->
</style>
|
|
| |
weiter: |
Style-Sheet-Angaben: Schriftformatierung
|
zurück: |
Schnellformatierung im Text
|
