Laborskizze
1 "Wie verwende ich den CSS-Editor,
eine
Einführung"
Teil 2 (Zurück zu Teil 1)
5. Was zeigt jetzt der CSS-Editor an? Antwort: Mit dem
Code ist ein
internes Stylesheet entstanden. Im Bild 6 wurde das kleine Kreuzchen
links angeklickt, es ist jetzt ein kleines Minus, und die Regeln
dadurch aufgelistet.
BILD 6
6. Woher kommen die zwei Regeln? Antwort: Im Quelltext
standen sie
schon vorher drin. Es sind die Zeilen 9 und 10. (Bild 7.) Damit diese
Regeln
funktionieren, muss es die Zeilen 7 und 8 vorher und 11 und
12 hinterher geben.
BILD 7
7. Wie werden die Regeln eingesetzt? Antwort: In Zeile 15
und 16,
Bild 8, irgendwo unterhalb des <body>Tags wird irgendein
<div>Container
verwendet, darin werden sie verwendet.
HTML wird hier nicht erklärt. Im Falle eines Falles
kann hier Auskunft geholt werden:
http://de.selfhtml.org/html/text/bereiche.htm.
BILD 8
Die Regel mit dem Punkt davor, hier z.B. '.Rechts' deklariert eine
CSS-Klasse mit dem Namen Rechts. In einem HTML-Tag kommt
das
als Attribut "class"
zum Einsatz. Der Name, hier "Rechts", wird als Wert in
Anführungszeichen eingefügt. In der Zeile
16, Bild 8, ist das perfekt zu
sehen.
8. Wie kann ich die div-Container mit styles besser sichtbar
machen?
Antwort 1 (weiter unten wird die Frage neu aufgenommen), ohne CSS
Editor: Der Mauszeiger wird im Editiermodus
'Normal' auf den Text "Linker Container" gesetzt. In der Statuszeile
von Nvu unten ist dann der Tag <div> dieses Containers
hervorgehoben.
Auf
diesen Tag mit der Maus rechtsklicken. Das Kontextmenü wie
im
Bild 9 erscheint. Von Interesse sind die 'Inline Styles'.
BILD 9
Auf die 'Inline Styles' wird linksgeklickt und dann Randeigenschaften
gewählt. Bild 10 zeigt meine Einstellungen. Um von der Maus
nicht
zur Tastatur zu wechseln, klicke ich bei der Breite auf den
Abwärtspfeil und wähle aus der Liste '0px'. Die Null
ersetze
ich mit einer Eins durch die Wahl des "Erhöhe um 1"-Pfeils"
rechts
daneben. Die Farbe wird auch mit der Maus gewählt.
Bei zwei 50%-containern, die sich das Fenster teilen, passt jetzt nach
der Rahmung der zweite Container nicht mehr daneben. Also wird er vom
Browser und
Nvu bei nächster Gelegenheit, gleich darunter dargestellt.
Unbeirrt wird dem anderen Container aber auch ein Rahmen verpasst,
nehmen wir blau. Also den Mauszeiger in den Text "Rechter Container"
setzen und wie gehabt, nur diesmal Blau.
BILD 10
(Weiter zu
Teil 3)