In diesem Tutorial werden die Basics von CSS erklärt
Also fangen wir an:
Was ist CSS und Warum sollte ich damit eine Homepage erstellen?
In diesem Kapitel erfahren Sie warum Sie CSS benutzen sollten.
Warum sollte ich mit CSS eine Homepage erstellen?
Diese Frage ist ganz leicht zu beantworten.
Mit CSS ist es simpler eine Homepage zu erstellen als mit Tabellen :
Der HTML Code für 1 Zeile und 3 Spalten sieht so aus:
<table border="1">
<tr>
<td><FONT color="blue" face="verdana" size="5">Name</font></td>
<td><FONT color="blue" face="verdana" size="5">Adresse</font></td>
<td><FONT color="blue" face="verdana" size="5">Stadt</font></td>
<td><FONT color="blue" face="verdana" size="5">PLZ</font></td>
<td><FONT color="blue" face="verdana" size="5">Gekauft?</font></td>
</tr> </table>
Hier wird die Schrift blau sein die Schrift art Verdana und die Größe 5
Ist doch eigentlich sehr lang meinen Sie nicht?
Einfacher geht es mit CSS so:
<table border="1">
<tr>
<td>Rhede</td>
<td>Bocholt</td>
<td>Berlin</td>
<td>Köln</td>
<td>München</td>
</tr>
</table>
Das einzige was Sie machen müssen ist ein externer oder interner CSS Style Tag zu definieren.
Das sieht folgendermaßen aus:
TD
{
color: blue;
font-family: verdana;
font-size: large;
}
Wenn Sie dies gemacht haben, können Sie immer die gleiche Tabelle erstellen ohne viel Aufwand.
Und wie man sieht hat man sehr viel Arbeit erspart.
Jedoch ist auch der Quelltext viel kleiner geworden, und man kann auch selbstverständlich besser mit weniger Zeilen Code arbeiten.
Mit CSS kann man aber auch ganz andere Sachen machen die mit HTML funktionieren.
1. Wir fangen an:
Zuerst müssen wir uns entscheiden wo wir den CSS Text hinschreiben.
Wir haben zwei Varianten:
-CSS im Quelltext
-CSS in einer externen Datei
Wenn wir die Erste Variante nehmen, dann müssen wir den CSS Tag <style type="text/css">
zwischen <head> und </head> schreiben.
Um den Tag zu schließen benutzen wir </style>.
In den <style> tag schreiben wir nun unseren Code hinein.
Wenn wir jedoch die Zweite Variante nehmen, müssen wir die CSS Datei im <head> Tag verweisen.
Dazu benutzen wir dies: <LINK href="style.css" rel="stylesheet" type="text/css">
Diese .css Datei nennen wir style.css.
Man kann jedoch auch jede andere Bezeichnung benutzen, müssen aber im <link> tag die Datei anpassen.
2. Struktur:
Dies ist die Struktur einer Deklaration:
Am Anfang steht immer der Selector diese sind meist HTML Tags
Danach steht in geschweiften Klammern die Deklaration.
Also So:
Selector {Eigenschaft: Wert;}
Ein Beispiel:
H1 {color: #000000;}
___303
3. Gruppieren von Selectoren
Stellen Sie sich vor dass alle Überschriften (H1 bis H6) Die Schriftfarbe weiß benötigen
Dies würde dann in CSS so aussehen:
H1 { color: #FFFFFF; }
H2 { color: #FFFFFF; }
H3 { color: #FFFFFF; }
H4 { color: #FFFFFF; }
H5 { color: #FFFFFF; }
H6 { color: #FFFFFF; }
Das ist doch auch mal wieder sehr viel Code !
Zwar weniger als in HTML aber trotzdem !
Diese Tags kann man gruppieren
Das würde dann so aussehen:
H1, H2, H3, H4, H5, H6 { color: #FFFFFF }
Ist doch ganz einfach oder?
4. Gruppieren von Deklarationen
Ja richtig verstanden ! Sie können auch einfach die Deklarationen gruppieren!
So haben sie noch mehr Arbeit gespart, wenn sie jetzt CSS und HTML vergleichen...
Beispiel:
H1 {
border: 2px solid blue;
color: #000000;
}
5. Gruppieren von Selectoren und Deklarationen
So wenn man jetzt beides kombiniert bekommt man noch mehr Platz:
H1, H2, H3, H4, H5, H6 {
border: 2px solid blue;
color: #FFFFFF;
}
Nun sind Sie ganz bestimmt überzeugt! Ich liege doch richtig oder?
Naja auf jeden Fall bin ich mir sicher.
Ich verwende für meine Aufgaben nur noch CSS, da dies einfacher als HTML zu bedienen ist.
Es gibt noch viel mehr mit CSS zu machen. Schauen Sie sich doch weitere Tutorials an.
Dies waren nur die Basics!
Auch Webdesigns kann man damit einfacher erstellen als sonst.
Ich wünsche euch viel Erfolg!
TOD! - Nr. 1 Killer in Deutschland
Cheats »
mIRC Scripting [Grundlagen]
(30.05.2004, 03:44)