Teil 1:
Teil 2:
Teil 3:
Teil 4:CSS - voll konkret
Im letzten Teil habe ich CSS im Überblick vorgestellt. Jetzt wird es konkreter.
Doch vorher noch einen Hinweis auf wertvolle Helferlein:
Um HTML/CSS - Code zu schreiben ist ein Editor sinnvoll, der die HTML-tags, den CSS-Code und den eigentlichen Text-Inhalt verschiedenfarbig darstellt. Smultron
kann das und mehr.
Um Code-Fehler zu entdecken empfiehlt sich ein "Validator". Ich verwende dazu Firefox mit dem PlugIn "Firebugs".
Zurück zu CSS:
Wenn eine Webpräsenz aus mehreren optisch ähnlichen Websites bestehen soll, dann ist es sinnvoll den CSS-Code in eine Extra-Datei zu schreiben, auf die in allen HTML-Dateien verwiesen wird. Der Code und etwaige Änderungen muß dann nur einmal geschrieben werden. So will ich das ab jetzt tun.
In den <head> - Bereich jeder html-Datei kommt einfach die Angabe, dass es eine Extradatei (hier: style.css; Name aber frei wählbar) mit zu befolgenden CSS-Angaben gibt:
<link href="style.css" rel="stylesheet" type="text/css">
In der Datei
style.css stehen dann einfach die CSS-Angaben und zwar z.B:
h2 { font-family:Georgia; font-size:16px; font-style:italic; color:black; }
Zuerst die Bezeichnung des HTML-Elementes (h2). (die CSS-Anweisung ist ohne Klammer, während das entsprechende HTML-Element im HTML-Body ja in spitze Klammern gesetzt ist).
Es folgt die CSS-Anweisung, wie das Element, immer wenn es auftaucht, darzustellen ist. Dies steht in geschweiften Klammern { }.
Nun wird die Eigenschaft angegeben, die man explizit bestimmen will (z.B. font-size). Alle nicht genannten Eigenschaften werden, wenn auch kein übergeordnetes Element diese festlegt (s.u.), gemäß der Voreinstellungen des Web-Browsers dargestellt, also u.U. von Browser zu Browser verschieden!
Nach einem Doppelpunkt folgt nun der Wert, also zB.16px als Größenangabe, yellow als Farbe etc.
Mehrere Eigenschaften werden durch Semikolon voneinander getrennt.
Was ist ein übergeordnetes Element?
In obigem Beispiel ist eine Überschrift (h=headline) "zweiten Grades" (h2) genannt. (Es gibt Überschriften von h1 bis h6, h1 stellt die Größte dar.).
Wenn diese in einem Abschnitt <div> steht, dann ist dieser übergeordnet. Der Abschnitt könnte seinerseits auch in einem weiteren (also übergeordneten) Abschnitt stehen (verschachtelt wie die Babuschka-Figuren). Und alles ist eingebettet in den <body>-tag, den Körper bzw. den Darstellungsbereich des Browser-Fensters.
Will man viel festlegen, so schreibt man dies also am besten in den <body>, dann ist das schon mal geregelt.
Zur Klarstellung:
Ist im <body> die Schriftgröße mit font-size:14px angegeben und im <div> mit 18px, so wird im <div>-Bereich mit 18px geschrieben, da diese Angabe die konkretere ist. Übergeordnet bedeutet also nicht wichtiger, sondern allgemeiner!
Jetzt haben wir also zwei Dateien: Eine HTML-Datei, genannt z.B
Website01.htm:<html>
<head>
<title>Meine erste Website</title>
<link href="style01.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Meine Website</h1>
<h2>Jetzt geht's aber los.</h2>
<div class="Navigation">
<a href="http://www.mactechnews.de">MTN-Website</a><br><br>
<a href="http://de.selfhtml.org/css/index.htm">Alles zu CSS</a><br><br>
<a href="http://www.apple.com.de">Apple</a>
</div>
<div class="Inhalt">
Hallo Leser.
Meine <b>wichtigste</b> Website ist die <a href="http://www.mactechnews.de">
MTN-Website</a>.
<p> In der Navigation stehen hier lauter Fremd-Links.
Normal wuerde man da jetzt zu den anderen eigenen Seiten des eigenen
Webprojektes verlinken wie Hobbys, Links, Kontakt, Impressum etc.</p>
<p> Mehr Inhalt faellt mir jetzt auch nicht ein.</p>
</div>
</body>
</html>
Und eine CSS-Datei, die ich oben in Website01.htm schon benannt habe als
style01.cssbody { background-color:yellow; color:darkgrey; font-family:Arial; font-size:14px; }
h1 { background-color:white; font-family: Georgia; font-size:18px;
color:black; 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; }
Im nächsten Teil werde ich die Optik der Website01.htm versuchen zu verbessern, indem ich die Anweisungen in der CSS-Datei abändere.
Teil 5: