Festlegen von CSS-Eigenschaften

Sie können Eigenschaften für CSS-Regeln festlegen. Hierzu zählen beispielsweise die Textschriftart, das Hintergrundbild bzw. die Hintergrundfarbe, der Abstand und Layouteigenschaften sowie die Darstellung von Listenelementen. Erstellen Sie zunächst eine neue Regel und legen Sie dann beliebige der folgenden Eigenschaften fest.

Es folgt eine Beschreibung einiger CSS-Typeigenschaften, die festgelegt werden können.

Legt mindestens eine Schriftfamilie für den Stil fest. In Browsern wird der Text in der ersten Schrift der Schriftfamilie angezeigt, die auf dem jeweiligen Computer installiert ist. Geben Sie aus Gründen der Kompatibilität mit Internet Explorer an erster Stelle eine Windows-Schrift an. Die Eigenschaft „font-family“ wird von beiden Browsern unterstützt.

Legt den Schriftstil fest (Standard, kursiv oder oblique). Die Standardeinstellung lautet „normal“. Die Eigenschaft „font-style“ wird von beiden Browsern unterstützt.

Legt die Höhe der Zeile fest, in die der Text eingefügt wird. Diese Einstellung wird traditionell als Zeilenabstand bezeichnet. Wählen Sie „normal“, wenn die Zeilenhöhe je nach Schriftgröße automatisch berechnet werden soll, oder geben Sie einen genauen Wert ein und wählen Sie eine Maßeinheit. Die Eigenschaft „line-height“ wird von beiden Browsern unterstützt.

Formatiert den Text unterstrichen, überstrichen oder durchgestrichen bzw. als blinkenden Text. Die Standardeinstellung für normalen Text ist „none“. Die Standardeinstellung für Hyperlinks ist „underline“. Wenn Sie für Hyperlinks die Einstellung „none“ wählen, können Sie die Unterstreichung von Hyperlinks entfernen, indem Sie eine spezielle Klasse definieren. Die Eigenschaft „text-decoration“ wird von beiden Browsern unterstützt.

Weist der Schrift eine spezifische oder relative Stärke zu. Eine normale Stärke entspricht dem Wert 400, fett gedruckte Schrift hat den Wert 700. Die Eigenschaft „font-weight“ wird von beiden Browsern unterstützt.

Formatiert den Text als Kapitälchen. Dreamweaver zeigt diese Eigenschaft nicht im Dokumentfenster an. Die Eigenschaft „font-variant“ wird von Internet Explorer und Mozilla Firefox unterstützt.

Formatiert den ersten Buchstaben jedes Worts in der Auswahl als Großbuchstaben bzw. stellt alle ausgewählten Wörter vollständig in Groß- oder Kleinbuchstaben dar. Die Eigenschaft „text-transform“ wird von beiden Browsern unterstützt.

Bestimmt die Textfarbe. Die Eigenschaft „color“ wird von beiden Browsern unterstützt.

Legt die Größe des Texts fest. Sie können eine bestimmte Größe wählen, indem Sie die Größe als Zahl und die entsprechende Maßeinheit auswählen, oder Sie können eine relative Größe wählen. Wählen Sie Pixel als Größeneinheit, wenn Sie verhindern möchten, dass Browser den Text verzerren. Die Eigenschaft „font-size“ wird von beiden Browsern unterstützt.

Hintergrundeigenschaften für CSS-Stile definieren

Hintergrundeigenschaften können auf jedes Element einer Webseite angewendet werden. Sie können zum Beispiel einen Stil erstellen, der einen Textbereich oder eine ganze Seite mit einer Hintergrundfarbe oder einem Hintergrundbild versieht. Sie können auch die Position des Hintergrundbilds festlegen.

Es folgt eine Beschreibung einiger CSS-Hintergrundeigenschaften, die festgelegt werden können.

Legt das Hintergrundbild für das Element fest. Das Background-image-Attribut wird von beiden Browsern unterstützt.

Legt fest, ob und wie das Hintergrundbild wiederholt werden soll. Die Eigenschaft „background-repeat“ wird von beiden Browsern unterstützt.

• Mit „no-repeat“ wird das Bild nur einmal am Anfang des Elements angezeigt.

• Mit „repeat“ wird das Bild mehrmals horizontal und vertikal hinter dem Element angezeigt.

• Mit „repeat-x“ und „repeat-y“ wird ein horizontales bzw. vertikales Bilderband angezeigt. Die Bilder werden dabei auf die Größe des Elements zugeschnitten.

Hinweis: Mit der Eigenschaft „background-repeat“ können Sie die Definition des body-Tags abwandeln und ein Hintergrundbild definieren, das nicht mehrmals neben- oder untereinander angezeigt wird.

Legt fest, ob die Position des Hintergrundbilds fixiert ist oder ob das Hintergrundbild zusammen mit dem Inhalt einen Bildlauf durchführt. Beachten Sie, dass einige Browser auch dann einen Bildlauf für das Hintergrundbild durchführen, wenn Sie die feste Position gewählt haben. Dieses Attribut wird von Internet Explorer und Mozilla Firefox unterstützt.

Legen die Anfangsposition des Hintergrunds in Relation zum Element fest. Diese Einstellungen können verwendet werden, um ein Hintergrundbild auf der Seite vertikal (Y) und horizontal (X) zu zentrieren. Wenn Sie für die Eigenschaft „background-attachment“ die Einstellung „fixed“ ausgewählt haben, wird die Position relativ zum Dokumentfenster und nicht relativ zum Element aufgefasst.

Legt die Hintergrundfarbe für das Element fest. Die Eigenschaft „background-color“ wird von beiden Browsern unterstützt.

Blockeigenschaften für CSS-Stile definieren

Sie können die Einstellungen für Abstände und Ausrichtung von Tags und Eigenschaften definieren.

Bestimmt den Abstand zwischen den Buchstaben oder sonstigen Zeichen. Wenn Sie den Zeichenabstand verringern möchten, geben Sie einen negativen Wert ein (z. B. -4). Die Einstellung für den Zeichenabstand setzt die Blocksatz-Einstellung eines Textes außer Kraft. Die Eigenschaft „letter-spacing“ wird von Internet Explorer ab Version 4 und von Mozilla Firefox ab Version 1unterstützt.

Bestimmt, wie weit die erste Textzeile eingerückt wird. Ein negativer Wert kann verwendet werden, um einen hängenden Einzug zu erstellen, die korrekte Anzeige hängt aber vom Browser ab. Dreamweaver zeigt diese Eigenschaft nur dann im Dokumentfenster an, wenn das Tag auf Elemente der Blockebene angewendet wird. Die Eigenschaft „text-indent“ wird von beiden Browsern unterstützt.

Bestimmt die vertikale Ausrichtung des Elements, auf das dieses Attribut angewendet wird. Dreamweaver zeigt diese Eigenschaft nur dann im Dokumentfenster an, wenn es auf das <img>-Tag angewendet wird.

Legt fest, wie Text innerhalb des Elements ausgerichtet wird. Die Eigenschaft „text-align“ wird von beiden Browsern unterstützt.

Legt fest, wie Leerräume innerhalb des Elements gehandhabt werden. Drei Optionen stehen zur Auswahl: Mit der Einstellung „normal“ werden Leerräume entfernt. Mit der Einstellung „pre“ wird der Text so behandelt, als stünde er in pre-Tags (d. h. sämtliche Leerräume wie Leerzeichen, Tabulatoren und Absatzmarken werden berücksichtigt). Mit „nowrap“ wird festgelegt, dass nur dann ein Textumbruch erfolgen soll, wenn ein br-Tag gefunden wird. Dreamweaver zeigt diese Eigenschaft nicht im Dokumentfenster an. Die Eigenschaft „white-space“ wird von Mozilla Firefox ab Version 1 und von Internet Explorer ab Version 6 unterstützt.

Bestimmt, ob und wie ein Element angezeigt wird. Die Option „none“ bewirkt, dass das Element, auf das sich die Option bezieht, nicht angezeigt wird.

Legt den Abstand zwischen Wörtern fest. Um einen bestimmten Wert einzustellen, wählen Sie im Popupmenü die Option „(Wert)“ aus und geben Sie einen Zahlenwert ein. Wählen Sie im zweiten Popupmenü eine Maßeinheit aus (z. B. px, pt usw.).

Hinweis: Sie können auch negative Werte eingeben. Allerdings hängt die korrekte Anzeige vom Browser ab. Dreamweaver zeigt diese Eigenschaft nicht im Dokumentfenster an.

CSS-Boxeigenschaften für CSS-Stile definieren

Über die Kategorie „Box“ des Dialogfelds „CSS-Regel-Definition“ können Sie Einstellungen für Tags und Eigenschaften definieren, die sich auf die Anordnung der Elemente auf der Seite auswirken.

Mit entsprechenden Auffüllungs- und Randeinstellungen können Sie die Eigenschaften der einzelnen Seiten eines Elements festlegen. Mit der Option „Für alle gleich“ können Sie hingegen allen Seiten eines Elements dieselbe Einstellung zuweisen.

Gibt die Seite an, an der die anderen Elemente das schwebende Element umfließen sollen. Das schwebende Element ist an die Fließseite geheftet und andere Inhalte umfließen es auf der gegenüberliegenden Seite.

So wird beispielsweise ein Bild, das auf der rechten Seite schwebt, rechts fixiert und Inhalte, die Sie später hinzufügen, umfließen das Bild links.

Weitere Informationen finden Sie unter http://css-tricks.com/all-about-floats/ (auf Englisch).

Gibt die Seiten eines Elements an, an denen keine anderen fließenden Elemente erlaubt sind.

Legt den Abstand zwischen dem Inhalt des Elements und seinem Rahmen fest (wenn kein Rahmen verwendet wird, bezieht sich diese Einstellung auf den Abstand zum Seitenrand). Deaktivieren Sie die Option „Für alle gleich“, wenn Sie die Auffüllung für einzelne Seiten des Elements individuell einstellen möchten.

Legt für die obere, untere, linke und rechte Seite des jeweiligen Elements dieselbe Auffüllung fest.

Bestimmt den Abstand zwischen dem Rand eines Elements (bzw. dem Seitenrand, wenn kein Rand vorhanden ist) und einem anderen Element fest. Dreamweaver zeigt diese Eigenschaft nur dann im Dokumentfenster an, wenn es auf Elemente der Blockebene angewendet wird (Absätze, Überschriften, Listen usw.). Deaktivieren Sie die Option „Für alle gleich“, wenn Sie den Randabstand für einzelne Seiten des Elements individuell einstellen möchten.

Legen die Breite und Höhe des Elements fest.

Rahmeneigenschaften für CSS-Stile definieren

Definieren Sie in der Kategorie „Rahmen“ des Dialogfelds „CSS-Regel-Definition“ Eigenschaften wie Breite, Farbe und Stil für den Rahmen, der ein Element umgibt.

Legt die Breite des Rahmens um ein Element fest. Das width-Attribut wird von beiden Browsern unterstützt. Deaktivieren Sie die Option „Für alle gleich“, wenn Sie die Rahmenbreite für einzelne Seiten des Elements individuell einstellen möchten.

Legt für die obere, untere, linke und rechte Seite des jeweiligen Elements denselben Rahmenstil fest.

Legt die Farbe des Rahmens fest. Sie können die Farbe jeder Seite separat festlegen, die Anzeige hängt allerdings vom Browser ab. Deaktivieren Sie die Option „Für alle gleich“, wenn Sie die Rahmenfarbe für einzelne Seiten des Elements individuell einstellen möchten.

Bestimmt das Aussehen des Rahmens. Wie der Rahmen tatsächlich dargestellt wird, hängt jedoch vom jeweiligen Browser ab. Deaktivieren Sie die Option „Für alle gleich“, wenn Sie den Rahmenstil für einzelne Seiten des Elements individuell einstellen möchten.

Listeneigenschaften für CSS-Stile definieren

In der Kategorie „Liste“ des Dialogfelds „CSS-Regel-Definition“ definieren Sie Eigenschaften aller Listen-Tags, wie Größe und Art der Aufzählungspunkte.

Legt das Aussehen von Aufzählungspunkten bzw. der Nummerierung fest. Die Eigenschaft „list-style-type“ wird von beiden Browsern unterstützt.

Bestimmt, ob bei einem Listenelement eine umgebrochene Zeile eingerückt wird („outside“) oder am linken Seitenrand beginnt („inside“).

Legt ein Bild fest, das als benutzerdefinierter Listenpunkt verwendet werden soll. Klicken Sie auf „Durchsuchen“ (Windows) bzw. „Wählen“ (Mac), um ein Bild auszuwählen, oder geben Sie den Pfad des Bilds ein.

Positionierungseigenschaften für CSS-Stile definieren

Die Positionierungs-Stileigenschaften legen fest, wie der mit dem ausgewählten CSS-Stil formatierte Inhalt auf der Seite positioniert wird.

Die folgenden Eigenschaften können leer gelassen werden, wenn sie für den Stil nicht von Bedeutung sind:

Legt fest, wie der Browser die ausgewählten Elemente positionieren soll. Folgende Optionen sind verfügbar:

• Die Option absolute ordnet den Inhalt unter Verwendung der Koordinaten, die Sie in die Felder „Platzierung“ eingeben, relativ zum nächsten absolut oder relativ positionierten Vorgänger an. Falls kein absolut oder relativ positionierter Vorgänger existiert, wird der Inhalt relativ zur oberen linken Ecke der Seite positioniert.

• Die Option relative ordnet den Inhalt unter Verwendung der Koordinaten, die Sie in die „Placement“-Felder eingeben, relativ zur Position des Blocks im Textfluss des Dokuments an. Beispiel: Wenn Sie einem Element eine relative Position und obere und linke Koordinaten von je 20px zuweisen, wird das Element von seiner normalen Position im Fluss aus um 20px nach rechts und 20px nach unten verschoben. Elemente können auch relativ - mit oder ohne Koordinaten für oben, links, rechts oder unten - positioniert werden, um einen Kontext für absolut positionierte Unterelemente zu schaffen.

• Die Option fixed ordnet den Inhalt unter Verwendung der Koordinaten, die Sie in die „Placement“-Felder eingeben, relativ zur oberen linken Ecke des Browsers an. Der Inhalt bleibt an dieser Position fixiert, während der Benutzer durch die Seite blättert.

• Die Option static ordnet den Inhalt an seiner Position im Textfluss an. Dies ist die Standardposition aller positionierbaren HTML-Elemente.

Legt die Stapelreihenfolge für den Inhalt fest. Elemente mit höherem Z-Index werden oberhalb von Elementen mit niedrigerem (oder keinem) Z-Index angezeigt. Sie können positive und negative Werte eingeben. (Wenn Ihr Inhalt absolut positioniert ist, ändern Sie die Stapelreihenfolge am einfachsten im Bedienfeld „AP-Elemente“.)

Legt fest, was geschieht, wenn der Inhalt eines Containers (z. B. eines <div>- oder <p>-Containers) die Containergröße überschreitet. Diese Eigenschaften steuern, wie eine Erweiterung gehandhabt wird:

• Die Option visible vergrößert den Container, sodass der ganze Inhalt sichtbar ist. Der Container wird nach unten und nach rechts erweitert.

• Die Option hidden behält die Größe des Containers bei und schneidet den überlaufenden Inhalt ab. Dabei werden keine Bildlaufleisten angezeigt.

• Die Option scroll fügt dem Container Bildlaufleisten hinzu, unabhängig davon, ob der Inhalt die Containergröße überschreitet oder nicht. Sie können Bildlaufleisten explizit hinzufügen, damit in einer dynamischen Umgebung keine Verwirrung entsteht, wenn Bildlaufleisten einmal angezeigt und dann wieder nicht angezeigt werden. Diese Option wird im Dokumentfenster nicht angezeigt.

• Die Option auto bewirkt, dass Bildlaufleisten nur dann angezeigt werden, wenn der Inhalt des Containers seine Begrenzung überschreitet. Diese Option wird im Dokumentfenster nicht angezeigt.

Definiert den sichtbaren Teil des Inhalts. Wenn Sie einen Schneidebereich festlegen, können Sie auf diesen mit einer Skriptsprache wie z. B. JavaScript zugreifen und die Eigenschaften bearbeiten, um Spezialeffekte (z. B. Wischeffekte) zu erzielen. Der Wischeffekt kann über Zeitleisten und das Verhalten „Eigenschaft ändern“ eingerichtet werden.

Legt die Position und Größe des Inhaltsblocks fest. Wie der Browser die Position interpretiert, hängt von der Einstellung unter „Position“ ab. Die Größenwerte werden außer Kraft gesetzt, wenn der Inhaltsblock die angegebene Größe überschreitet.

Als Maßeinheit für Position und Größe wird standardmäßig die Einheit Pixel (px) verwendet. Sie können aber auch die folgenden Maßeinheiten verwenden: Pica (pc), Punkt (pt), Zoll (in), mm, cm, em, ex oder % (Prozentsatz vom Wert des übergeordneten Elements). Zwischen der Abkürzung der Maßeinheit und dem Wert darf kein Leerzeichen stehen: Eine korrekte Eingabe ist zum Beispiel 3 mm.

Legt den Anfangsstatus für die Sichtbarkeit des Inhalts fest. Wenn Sie keine Sichtbarkeitseigenschaft festlegen, wird standardmäßig der Wert des übergeordneten Tags für den betreffenden Inhalt übernommen. Die vorgegebene Sichtbarkeitseinstellung für das <body>-Tag ist „visible“. Wählen Sie eine der folgenden Sichtbarkeitsoptionen aus:

• Die Option inherit übernimmt die Sichtbarkeitseigenschaft des übergeordneten Elements.

• Die Option visible zeigt den Inhalt an, unabhängig davon, welcher Wert für das übergeordnete Objekt gilt.

• Die Option hidden blendet den Inhalt aus, unabhängig davon, welcher Wert für das übergeordnete Objekt gilt.

Erweiterungseigenschaften für CSS-Stile definieren

Zu den Stileigenschaften der Kategorie „Erweiterungen“ gehören Filter-, Seitenumbruch- und Mauszeigeroptionen.

Ändert das Aussehen des Mauszeigers, wenn dieser sich auf einem Objekt befindet, das von dem Stil gesteuert wird. Wählen Sie im Popupmenü die gewünschte Option aus. Diese Eigenschaft wird von Internet Explorer ab Version 4.0 sowie von und Mozilla Firefox ab Version 1 unterstützt.

Wendet Spezialeffekte wie Unschärfe oder Invertierung auf das Objekt an, das von dem Stil gesteuert wird. Wählen Sie im Popupmenü einen Effekt aus.

Erzwingt beim Drucken den Beginn einer neuen Seite entweder vor oder nach dem Objekt, das von dem Stil beeinflusst wird. Wählen Sie im Popupmenü die gewünschte Option aus. Diese Option wird von Browsern der Version 4.0 nicht unterstützt. In späteren Versionen ist dies jedoch möglicherweise der Fall.