08
02

CSS Crashkurs

Wir brau­chen einen guten Text­edi­tor und einen guten CSS Brow­ser sowie ein CSS Regel­werk. Regel#1: Nie den Inter­net Explo­rer zum tes­ten von CSS benut­zen. IE hat soviele CSS Bugs, das es hoff­nungs­los ist. Fire­fox inter­pre­tiert CSS recht strikt, im Gegen­satz zum IE, d.h. was auf Fire­fox ordent­lich aus­sieht, sieht auch auf IE, Opera und Co. gut aus. Ich ver­su­che das Thema so zu erklä­ren, wie ich es mir gewünscht hätte. Also ein ers­ter Crash­curs zum Thema kor­rekte CSS Syn­tax: 

body {
margin: 0;
padding: 0;
background: #FFF;
}

Das Objekt wel­ches wir beschrei­ben wol­len ist das “body” Tag. Nach dem Tag folgt eine geschweifte Klam­mer auf. Nun wird je eine Eigen­schaft des Objekt mit einem pas­sen­dem Wert ver­se­hen: 

"Eigenschaft": "Wert" ;
margin   :    0;

Nach­dem alle gewünschten Eigen­schaf­ten defi­niert wor­den sind, schließt eine wei­tere geschweifte Klam­mer das Objekt zu.

Thin­king inside the box.

Eine der Grund­ideen von CSS ist, dass jedes Objekt und jede Eigen­schaft vor­her defi­niert wird, um dann spÃ?ter dar­auf nur ein­mal ver­wei­sen zu müssen. Hier liegt auch eines der ers­ten Hin­der­nisse im Umgang mit CSS. Jedes Ele­ment wel­ches spÃ?ter benutzt wird, muss vor­her defi­niert wer­den. Dies heißt nichts ande­res, als dass ein CSS Lay­out mit der vor­her­ge­hen­den Pla­nung fÃ’llt oder steht. Wer zuvor sein Pro­jekt auf dem Papier plant und wirk­lich jedes Detail bedenkt, der wird keine Pro­bleme in der spÃ?teren Umset­zung bekom­men. Pla­nung ist das A und O bei CSS. Die­ses Lay­out hier - was brauch ich dafür ? Nach Stun­den der Ana­lyse fÃ’llt auf, dass wir hier nur eine sim­ple Spalte haben. Eine Spalte sollte ein­fach sein, dafür brau­chen wir nur ein DIV.

Was ist ein DIV ?

Sehr gute Frage. Alles aber auch wirk­lich jeder Inhalt wir bei einem CSS Lay­out in einem DIV pla­ziert. DIVs sind nichts ande­res als Con­tai­ner 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 aller­dings schon andere schnel­ler und bes­ser als ich, darum ver­weise ich auf fol­gende Links: W3C Box Modell - hicks­de­sign Box Modell - Box Les­sons - Basic Box Demo. Eine Box sollte immer so detailiert wie mög­lich beschrie­ben wer­den. Kor­rekte CSS Brow­ser bevor­zu­gen den Wert “0” anstatt gar keine Angabe. In ein­gi­gen Fäl­len ist dies sogar expli­zit ver­langt, da sonst der Brow­ser eigene Werte setzt. Ein Blick auf die ers­ten bei­den CSS Ein­trä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 kom­pli­zier­tes an der Stelle. Mein DIV soll 500 Pixel breit sein, die Farbe weiß als Hin­ter­grund back­ground: #FFF; , einen rech­ten und lin­ken Rand, sowie einen Ver­satzt nach innen mar­gin: 0 0 20px 50px; haben. Ich bevor­zuge die “short­hand” Schreib­wei­sen: 

margin: 0 0 20px 50px;

ist das glei­che wie:

margin-top: 0;
margin-right: 0;
marging-bottom: 20px;
margin-left: 50px;

Mit dem “#main­frame” haben ich eben eine soge­n­ante ID geschaf­fen. IDs sind ein­zig­ar­tige Objekte, die im Gegen­satz zu Klas­sen nur wirk­lich ein­mal ver­wen­det wer­den kön­nen. Ein sehr wich­ti­ger Punkt den es sich zu mer­ken gilt. Gebe ich nun einer DIV, den Namen “main­frame”, so weiß die­ses Objekt, genau wel­che Eigen­schaf­ten es haben soll, genau jene, wel­che ich eben beschrie­ben habe. Mor­gen gehts dann wei­ter. Ich habe das Style­s­heet im Quell­code ent­spre­chend kom­men­tiert, sollte sich so bes­ser erklä­ren.

0 Kommentare

Für diesen Eintrag wurden die Kommentare geschlossen.