CSS Crashkurs
Wir brauchen einen guten Texteditorund einen guten CSS Browsersowie ein CSS Regelwerk.Regel#1: Nie den Internet Explorer zum testen von CSS benutzen. IE hat soviele CSS Bugs, das eshoffnungslos ist. Firefoxinterpretiert CSS recht strikt, im Gegensatz zum IE, d.h. was auf Firefoxordentlich aussieht, sieht auch auf IE, Opera und Co. gut aus. Ich versuche das Thema so zu erklären,wie ich es mir gewünscht hätte. Also ein erster Crashcurs zum Thema korrekte CSS Syntax:
body { margin: 0; padding: 0; background: #FFF; }
Das Objekt welches wir beschreiben wollen ist das „body“ Tag. Nach dem Tag folgt eine geschweifte Klammer auf.Nun wird je eine Eigenschaft des Objekt mit einem passendem Wert versehen:
"Eigenschaft": "Wert" ; margin : 0;
Nachdem alle gewünschten Eigenschaften definiert worden sind, schließt eine weitere geschweifte Klammer das Objekt zu.
Thinking inside the box.
Eine der Grundideen von CSS ist, dass jedes Objekt und jede Eigenschaft vorher definiert wird, um dann spÃ?ter darauf nur einmal verweisen zu müssen. Hier liegt auch eines der ersten Hindernisse im Umgang mit CSS. Jedes Element welches spÃ?ter benutzt wird, muss vorher definiert werden. Dies heißt nichts anderes, als dass ein CSS Layout mit der vorhergehenden Planung fÃ’llt oder steht. Wer zuvor sein Projekt auf dem Papier plant und wirklich jedes Detail bedenkt, der wird keine Probleme in der spÃ?teren Umsetzung bekommen. Planung ist das A und O bei CSS. Dieses Layout hier – was brauch ich dafür ? Nach Stunden der Analyse fÃ’llt auf, dass wir hier nur eine simple Spalte haben. Eine Spalte sollte einfach sein, dafür brauchen wir nur ein DIV.
Was ist ein DIV ?
Sehr gute Frage. Alles aber auch wirklich jeder Inhalt wir bei einem CSS Layout in einem DIV plaziert. DIVs sind nichts anderes als Container für Inhalte, Boxen oder Layer wenn man so will. Jetzt wÃ′re es an der Zeit das CSS Box-Model zu erklÃ′ren, da waren allerdings schon andere schneller und besser als ich, darum verweise ich auf folgende Links:W3C Box Modell –hicksdesign Box Modell –Box Lessons –Basic Box Demo.Eine Box sollte immer so detailiert wie möglich beschrieben werden. Korrekte CSS Browser bevorzugen den Wert „0“ anstatt gar keine Angabe. In eingigen Fällen ist dies sogar explizit verlangt, da sonst der Browser eigene Werte setzt. Ein Blick auf die ersten beiden CSS Einträge:
body { margin: 0; padding: 0; background: #FFF; } #mainframe { width: 500px; background: #FFF; border-left: 1px solid #E1E1E1; border-right: 2px solid #E1E1E1; margin: 0 0 20px 50px; padding: 14px; }
Nicht kompliziertes an der Stelle. Mein DIV soll 500 Pixel breit sein, die Farbe weiß als Hintergrund background: #FFF; , einen rechten und linken Rand, sowie einen Versatzt nach innen margin: 0 0 20px 50px; haben. Ich bevorzuge die „shorthand“ Schreibweisen:
margin: 0 0 20px 50px;
ist das gleiche wie:
margin-top: 0; margin-right: 0; marging-bottom: 20px; margin-left: 50px;
Mit dem „#mainframe“ haben ich eben eine sogenante ID geschaffen. IDs sind einzigartige Objekte, die im Gegensatz zu Klassen nur wirklich einmal verwendet werden können. Ein sehr wichtiger Punkt den es sich zu merken gilt. Gebe ich nun einer DIV, den Namen „mainframe“, so weiß dieses Objekt, genau welche Eigenschaften es haben soll, genau jene, welche ich eben beschrieben habe. Morgen gehts dann weiter. Ich habe das Stylesheet im Quellcode entsprechend kommentiert, sollte sich so besser erklären.
0 Kommentare
Für diesen Eintrag wurden die Kommentare geschlossen.
global $hemingway ?>