Start > Einleitung > CSS einbinden > CSS-Angaben 1 > CSS-Angaben 2 > Phase5

Editor 'Phase 5'

Mit CSS in Phase5 arbeiten
a) Shortcut-Leiste	b) CSS im HTML-Kopf	c) Separate CSS-Datei
d) Schnellformatierungen	e) CSS-Unterklassen

Zur Arbeit mit Listen ist in Phase5 eine eigene Shortcut-Leiste vorhanden.

1	Container <style></style> für den Dateikopf	2	erzeugt CSS-Angaben

Style-Angaben erzeugen Sie mit dem Schalter 2 im Dialogfenster 'Neuer Style'.

CSS im Kopf der HTML-Datei

• Positionieren Sie den Cursor im Kopf der HTML-Datei (leere Zeile empfohlen).
• Fügen Sie mit dem Schalter 1 einen Container <style></style> ein.
• Öffnen Sie mit dem Schalter 2 das Dialogfenster 'Neuer Style'.
• Wählen Sie im Listenfeld 'Stylename' den gewünschten HTML-Befehl. Nehmen die die erforderlichen Einstellungen vor.
• Im Quelltext werden die CSS-Angaben eingefügt, notwendige Ergänzungen können Sie dort vornehmen.

Separate CSS-Datei verwenden

• Erstellen Sie (z.B. über den Menüpunkt 'Datei > Neues HTML-Dokument' ein leeres Dokument.
• Öffnen Sie mit dem Schalter 2 das Dialogfenster 'Neuer Style' und wählen Sie wie oben beschrieben HTML-Tags und Style-Angaben.
• Nehmen Sie die notwendigen Änderungen und Ergänzungen manuell vor.
• Speichern Sie das Dokument unter dem Dateityp 'Style Sheets (*.css)'.

Um diese Datei in Ihre HTML-Dateien einzubinden, notieren Sie im Kopf der jeweiligen Datei die Zeile:

Sie können auch zu Beginn Ihrer Arbeit im Menu 'Projekt > Projekteinstellungen' ein CSS-Verzeichnis einstellen. Dann können Sie beim Erstellen eines neuen HTML-Dokumentes im Dialogfenster das Dokument mit Style Sheets aus diesem Verzeichnis verknüpfen. (Ich habe bei dieser Version arge Probleme mit Netscape erlebt. Version 4.x wollte meine CSS-Datei immer im gleichen Ordner wie die HTML-Datei haben, ansonsten hat er einige Style-Angaben nicht berücksichtigt.)

Schnellformatierungen

• Schnellformatierungen in einzelnen Tag nehmen Sie im Quelltext durch rechten Mausklick in den Eröffnungs-Tag vor. Fügen sie so das Attribut style="" ein. 
• Wenn der Cursor zwischen den Anführungsstrichen des style-Attributes steht, öffnen Sie mit dem Schalter 2 der Shortcut-Leiste 'CSS' das Dialogfenster 'Neuer Style'.
• Lassen Sie das Listenfeld 'Stylename' frei. Nehmen die die erforderlichen CSS-Einstellungen vor.
• Im Quelltext werden die CSS-Angaben eingefügt. 
  Löschen Sie geschweiften Klammern { } aus dem style-Attribut!
  Nehmen Sie  Ergänzungen wie gewohnt vor.

Einen Container <span style=""></span> erzeugen Sie aus dem Menu 'Format > Span'.

Format-Unterklassen

Format-Unterklassen definieren Sie, indem sie im Dialogfenster 'Neuer Style' im Listenfeld 'Stylename' einen Klassennamen (unbedingt mit . beginnend) vergeben. Legen Sie dann die CSS-Angaben wie gewohnt fest.

Im Quelltext steht Ihnen durch rechten Mausklick in den Eröffnungs-Tag das Kontext-Menü zum Einfügen des Attributs class="" zur Verfügung.

Testen Sie Ihre CSS-Festlegungen ausgiebig in mehreren Browsern!

Ein Beispiel zum Abschluß:

Der vorhergehende Satz ist ein Standardabsatz (nix Tabelle!) mit folgendem Eröffnungs-Tag:

<p style="font-weight: bold; background-color: #C7F3F2; width: 80%; text-align: center; color: #800000; border: 7px ridge #000080; padding-top: 8px; padding-bottom: 8px">

Außerdem ist in der externen CSS-Datei festgelegt:

p, td, ul, ol { font-family:Arial,sans-serif }

Ein Service von http://www.hechtnetz.de

Start > Einleitung > CSS einbinden > CSS-Angaben 1 > CSS-Angaben 2 > Phase5