BILD 6
Laborskizze 2 "Wie erstelle ich mit dem CSS-Editor ein externes style sheet, eine Einführung" Teil 2 (Zurück zu Teil 1)
4. Wie weit hat mich das Bisherige gebracht? Antwort: 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. Das zeigt Bild 6. Außerdem hat Nvu den Rand für den Container akzeptiert und wird nun alle div-Container rot umranden. Leider sehe ich aber noch nichts im Quelltext. Bild 7 links. Ich buche das mal unter Vorführeffekt, denn eigentlich erwarte ich, dass Nvu hier schon ein internes style sheet anzeigt. Erinnert sei daran, dass Nvu noch in den Kinderschuhen steckt und wenn ein Kindchen schmollt, versuche ich es mal mit Kitzeln. Im Bild 7 links gibt es jedenfalls nur die Zeile 7 mit dem ersten Anzeichen, dass wenigstens etwas passiert ist. Nvu hat ein internes style sheet registriert.
BILD 6
BILD 7
5. Was soll das mit dem Kitzeln?
Antwort: Ich gehe in den CSS-Editor und klicke auf die Regel "div".
Unter Begrenzungen wähle ich grün als Randfarbe und sehe
schon die Änderung des Randes, bevor ich 'Schließen' klicken
kann. Ob Nvu das als Nötigung aufgefasst hat, weiß ich
nicht. Jedenfalls ist im Quelltext vor dem </head>-Endetag das
interne style sheet von Zeile 7 bis 10 jetzt komplett. Mein Bild 7
rechts. Von jetzt an kann ich mit 'Generic container (div) mit jedem Klick einen grünen Container erzeugen.
6. Gibt es dann keine roten Container mehr?
Antwort: Zu Anfang habe ich den unteren Radiobutton wie im Bild 8
angeklickt. Für den roten Rand nehme ich jetzt ein "Benanntes
Style" und erzeuge eine Klasse mit dem oberen Radiobutton. Ohne
Häkchen bei Expertenmodus habe ich auf die Schaltfläche
'Regel' geklickt und Bild 8 erhalten. Die neue Klasse erhält den
Namen divrot. Nach dem Anklicken der Schaltfläche 'Style-Regel
erstellen' erhält die Liste links die Regel ".divrot" mit dem
Punkt davor. Unter dem Register 'Begrenzungen' setze ich den Rand auf
solid, 1 px und rot.
BILD 8