Laborskizze 2  "Wie erstelle ich mit dem CSS-Editor ein externes style sheet, eine Einführung"   (Stand 19.2.06)

Diese Skizze beschreibt (frei von der Leber weg) anhand eines zufälligen Beispiels, was dabei mit dem CSS Editor getan wird. Die Skizze soll Nvu-Beginnern einen zweiten Eindruck vom CSS-Editor vermitteln. Einen ersten Eindruck vom CSS-Editor gibt es in der Laborskizze 1. Diese Skizze ist für das Browserfenster bestimmt. Gedacht ist, dass sie nicht nur durchgelesen, sondern mit Nvu auch nachvollzogen wird.

1. Wie geht es los?Antwort: Etwas Quelltext wird wohl sein müssen. Dafür nehme ich auch nur das "div", das in der Laborskizze 1 auch dauernd vor kam.

Mit Menü Datei / Neu wird eine leere Seite "(Unbenannt)" begonnen. Bei der Auswahlliste 'Absatzformat auswählen' rein klicken und unten den 'Generic container' einmal wählen. Bild 1.

Auswahlliste Absatzformat geöffnet
BILD 1

Dadurch ergibt sich die Zeile 9 im Quelltext. Diese werde ich nicht anfassen und dennoch dem Container einen roten Rand geben.

Quelltext 1
BILD 2

2. Und wie geht es mit dem CSS-Editor nun los? Antwort: Mit Menü Extras / CSS Editor wird letzterer gestartet. Bild 3 habe ich vertikal etwas gestaucht, um Bits und Platz zu sparen.

Der CSS Editor nach Neustart
BILD 3

Nimm bitte das Häkchen links unten bei Expertenmodus heraus und die Schaltfläche 'Regel' wird aufgeblendet. Klicke auf 'Regel'. Siehe Bild 4, wiederum von mir aufs Notwendige beschränkt.

Regeln können begonnen werden
BILD 4

3. Wie kann ich eine Regel erstellen?Antwort: Den Radiobutton für 'Style allen Elementen....' anklicken und in die Zeile darunter "div" schreiben. Dann auf die Schaltfläche 'Style-Regel erstellen' klicken. Um etwas für die Regel zu tun das Register 'Begrenzungen' anklicken. Im Bild 5 siehst du die Einstellungen für den angekündigten roten Rand. Bei mir reagiert Nvu sofort auf jede Eintragung, als würde ich den Quelltext aus Bild 2 in Zeile 9 ändern. Dann auf die Schatfläche 'Aktualisieren' klicken. Mein Container hat nun einen ein pixel breiten Rand.

Die Einstellungen für die div-Regel
BILD 5

4. Wie weit hat mich das Bisherige gebracht? Anrwort: Der CSS-Editor hat die drei Angaben für den Rahmen für jeden der vier Ränder extra übernommen und kommt so auf 3x4 Eintragungen.

(Weiter mit Teil 2)