Teil 1:
Teil 2:
Teil 3:
Teil 4:
Jetzt will ich mal an der Optik feilen und dabei weitere CSS-Eigenschaften erläutern.
(Bei der "2.Website" sollte man sich zuerst die Optik überlegen und dann deren Umsetzung in Angriff nehmen. Aber...)
Vorab noch: Leerzeichen und Zeilenumbruch werden vom Browser ignoriert. D.h. man kann und sollte dies für den eigenen Überblick nutzen und welche reinschreiben, wo es einem taugt.
Zur Optik, mich stört schon mal:
Gelb ist zu intensiv.
Farben können nicht nur mit Namen z.B.yellow, sondern auch mit ihren RGB-Werten geändert werden:
Jede Farbe kann im RGB-Format (Rot-Grün-Blau)
- in Werten zwischen 0-255 (z.B. rgb(255,255,230))
- in Hex-Werten (z.B.#FFFFDD) oder
- in Prozentwerten (z.B. rgb(100%,100%, 80%)) angegeben werden.
background-color:rgb(255, 255, 230);
Weiter:
"Meine Website" steht nicht in der Mitte. Kein Problem:
text-align:center
und außerdem ist es so gedrängt:
Jedes Element mit Inhalt hat in HTML eine räumliche Ausdehnung. An deren Grenze (
border) kann man eine Kante bzw. einen Rahmen sichtbar machen. Die Stärke kann man selber wählen, die Farbe, die Art (z.B. gepunktet, gestrichelt, durchgehende Linie, doppelte Linie, 3D-Effekte). Man kann auch alle vier umgebenden Kanten einzelnen ändern, zB. nur die unterstreichende Kante zeigen. Und damit der Text (oder das Bild) nicht am Rahmen klebt, kann man einen inneren Abstand angeben (
padding). Desweiteren kann man auch den Abstand festlegen, den der Rahmen zu den angrenzenden Elementen haben soll (Abstand nach außen:
margin)
(Letztere Eigenschaft wurde aber von alten Internet Explodern anders interpretiert, als der Standard (und alle anderen Browser ) dies vorsah und führte zu einer bisweilen ärgerlichen Darstellung auf den verschiedenen Browsern. Diese Rahmen-Darstellungsweise heißt auch
Boxmodel. Uns soll das jetzt nicht interessieren, geht es doch erstmal um die erste Website am heimischen Rechner mit dem Lieblingsbrowser. Wenn ihr allerdings mal was ins Internet stellen wollt, dann hört ihr hier schon die ersten Probleme wachsen.)
Also, frisch und unbelastet ans Werk:
padding:10px;
(allseitiger Innenabstand von 10px)
margin-left: 40px; margin-right: 40px;
(Außenabstand nach links und rechts)
border: 10px solid grey
Rahmen 10px durchgehend in grau
Ach, und innen leg ich jetzt mal ein Muster drunter, also als Hintergrund des Elementes (h1)
Dazu brauch ich ein
Hintergrundbild. Ich klau mal eines zu Demonstrationszwecken von MTN-User Vicelow_SSC
(Ich hoffe Vicelow_SSC hat nichts dagegen und lobe hiermit sein Foto als sehr gelungen
) )
background-image:url("http://data.mactechnews.de/282704.jpg");
Und das verschiebe ich noch.
background-position: 0px -75px;
Negative Zahlen gehen auch! Die erste Zahl steht für horizontale und die zweite für vertikale Verschiebung (kein Komma dazwischen).
Man könnte noch die Kachelung nur auf eine Richtung beschränken oder ganz unterbinden mit
background-repeat: repeat-x
für Wiederholung der Kacheln nur in X-Richtung (also horizontal). Ist hier nicht nötig.
Sehr interessant sind diese Eigenschaften für Verläufe, die man nur in 1 Pixel-Stärke anlegen braucht (dadurch wenig Speicherplatz frisst) und diese dann wiederholen lässt.
Und für den Fall, dass ein Browser das Bild nicht laden kann oder will, gebe ich noch eine Hintergrundfarbe und eine passendere Schriftfarbe an:
background-color:blue;
color:rgb(255, 255, 230);
Und das packe ich jetzt alles zur h1-Überschrift, in der CSS-Datei:
h1 { text-align:center; padding:10px; margin-top: 40px; border: 10px solid grey;
background-image:url("http://data.mactechnews.de/282704.jpg");
background-position: 0px -75px; background-color:blue;
color:rgb(255, 255, 230); font-family: Georgia; font-size:32px;
letter-spacing: 1em; font-weight:bold; }
Nochmal zur Schrift zurück: den Leerraum zwischen den Buchstaben erzeugt der Befehl:
letter-spacing: 1em;
1 em entspricht dabei der Höhe eines Buchstaben, genauso gingen aber px pt oder ex.
CSS-Datei speichern
body { background-color:rgb(255, 255, 230);
color:darkgrey; font-family:Arial; font-size:14px; }
h1 { text-align:center; padding:5px; margin-left: 40px; margin-right: 40px;
border: 10px solid grey;
background-image:url("http://data.mactechnews.de/282704.jpg");
background-position: 0px -75px; background-color:blue;
color:rgb(255, 255, 230); font-family: Georgia; font-size:20px;
letter-spacing: 1em; font-weight:bold; }
h2 { font-family:Georgia; font-size:16px; font-style:italic; color:black; }
p:first-letter { font-size:2em; color:red }
.Navigation {position:absolute; top:120px; background-color:white;
width:20%; left:20px; border :2px solid red; text-align:right; }
.Inhalt { position:absolute; top:120px; width:70%; right: 20px; text-align:left; }
a {border:0px solid green; background-color:grey; color:red; }
a:hover { background-color:green; color:yellow; }
a:focus { background-color:white; color:blue; }
und im Browser anschauen... (wie im Teil 4 beschrieben:
)
Naja, schön isses wieder nicht.
Was man mit Links anstellen kann (Mouseover...) beim nächsten mal.
In der Zwischenzeit: