Definition der Begriffe und Konzept des CSS­Frameworks

Document Sample
Definition der Begriffe und Konzept des CSS­Frameworks Powered By Docstoc
					Definition der Begriffe und Konzept des CSS­Frameworks                                                                                                          Objekt: FLOATBOX

                                                                                                                                                                Eigenschaft                 Ermöglicht einen Container für dreispaltiges Layout
Objekt             Ein Objekt ist eine Ansammlung von CSS­Eigenschaften, welche unter einem Namen zusammen gefasst werden.
                                                                                                                                                                Aufbau                     <div class="bodybox">
                   Aktuelle Objekte: BODY, PRINT, FLOATBOX, MENU­LINE, MENU­LIST, REDGES
                                                                                                                                                                                             <div class="floatbox­before">
Element            Ein Element ist ein Teil des Objektes und kann vom Selektor­Typ Identifikator (id) oder Klasse (class) sein.                                                                   <div class="floatbox">precontent</div>
                                                                                                                                                                                             </div>
Modifikator A      Elemente mit dem CSS­Selektor Klasse können in der Klassendeklaration im HTML mehrere Klassen­Selektoren aufnehmen. Der letzte                                            <div class="floatbox­after">
                   Selektor kann dabei die Eigenschaften aller Selektoren davor überschreiben und modifiziert damit CSS Eigenschaften.                                                            <div class="floatbox">postcontent</div>
                   Ein Modifikator kann keine CSS Eigenschaft eines ID­Selektors überschreiben. Allerdings ist es möglich die Eigenschaften des ID­Selektors                                 </div>
                   zu erweitern.                                                                                                                                                             <div class="floatbox­middle" >
                   Beispiel:  <div class="Selektor­Element Selektor­Modifikator"></div>                                                                                                           <div class="floatbox">content</div>
                   Erklärung: Eine CSS Eigenschaft vom Selektor­Element kann vom Selektor­Modifikator überschrieben werden.                                                                       <div class="floatbox­clear">&nbsp;</div>
                                                                                                                                                                                             </div>
                   Hinweis: Modifikatoren werden vom Browser IE 5 und Netscape 4 nicht unterstützt!
                                                                                                                                                                                           </div>
Modifikator B      Bei den meisten Elementen der Objekte wurde der Selektor­Typ Klasse verwendet. Somit kann der Anwender einen eigenen ID­Selektor 
                                                                                                                                                                Elemente                                                                                                                                           Selektor
                   schreiben, der automatisch als  Modifikator dient. 
                   Beispiel:  <div id="Selektor­Modifikator" class="Selektor­Element"></div>                                                                    floatbox                   Eine Floatbox kapselt das Layout in einen Container und schützt den Inhalt vor unerwünschten Problemen, die mit der  class
                   Erklärung: Eine CSS Eigenschaft vom Selektor­Element kann vom Selektor­Modifikator überschrieben werden.                                                                CSS­Eigenschaft „Float“ auftreten können.

Identifikator (id) Der Selektor­Typ Identifikator (id) darf im HTML nur einmal vorkommen. Er wird für ein Element nur vergeben, wenn man davon ausgehen  floatbox­before                   Diese Floatbox hat die Eigenschaft nach Links zu fließen und hat die Standartbreite                                     class
                   kann, dass eine Eigenschaft nicht öfters verwendet wird. Der Name des Identifikators darf keine Style­Eigenschaft (z.B. float,green)                                    von 25 Prozent.
                   bezeichnen!                                                                                                                           floatbox­after                    Diese Floatbox hat die Eigenschaft nach Rechts zu fließen und hat die Standartbreite                                    class
Klasse (class)     Der Selektor­Typ Klasse (class) darf öfters im HTML vorkommen und ist somit wiederverwendbar.                                                                           von 25 Prozent. 
                                                                                                                                                                floatbox­middle            Diese Floatbox ist die Haupt­Floatbox und nimmt die restliche Gesamtbreite ein. Die restliche  Standartbreite ist 50    class
Objekt: BODY
                                                                                                                                                                                           Prozent. Die Haupt­Floatbox lässt für die  Floatbox Links und Rechts eine mögliche Breite von jeweils 25 Prozent.
Eigenschaft       Erweitertung des HTML­Tags Body                                                                                                               floatbox­clear             Das Fließverhalten der CSS­Eigenschaft „Float“ von der Haupt­Floatbox muss extra beendet werden.                        class
Aufbau            <body>                                                                                                                                        Modifikatoren A                                                                                                                                    Selektor
                      <div id="bodyout">
                           <div id="bodyin">                                                                                                                    floatbox­33                Die Breite der Floatbox Links und Rechts verändert sich auf 33 Prozent. (Ist abhängig von „floatbox­margin33“ !)        class
                                <div class="bodybox"></div>                                                                                                     floatbox­margin33          Die Haupt­Floatbox lässt für die  Floatbox Links und Rechts eine mögliche Breite von jeweils 33 Prozent.                class
                                <div class="bodybox"></div>
                           </div>                                                                                                                               floatbox­15                Die Breite der Floatbox Links und Rechts verändert sich auf 15 Prozent. (Ist abhängig von „floatbox­margin15“ !)        class
                      </div>
                                                                                                                                                                floatbox­margin15          Die Haupt­Floatbox lässt für die  Floatbox Links und Rechts eine mögliche Breite von jeweils 15 Prozent.                class
                  </body>
                                                                                                                                                                floatbox­margin25margin0   Die Haupt­Floatbox vergibt nur für die linke Floatbox eine mögliche Breite von 15 Prozent.                              class
Elemente                                                                                                                                          Selektor
bodyout           Regelt die Zentrierung eines Body­Containers in dem später die Webseite mit seinem Inhalt plaziert wird.                        id
bodyin            Ermöglicht runde Ecken und Hintergrundbilder für den  Body­Container.                                                           id
bodybox           Eine Box die Inhalt aufnimmt. Dies kann der Kopf, der Inhalt, die Navigation oder der Fuß der Webseite sein. Der Name des       class
                                                           HTML­Druckausgabe 
                  Identifikator ist frei wählbar. (Für die                    muss eine Box durch einen PRINT­                                )
                                                                                                                 Modifikator erweitert werden!

Objekt: PRINT

Eigenschaft       Gibt an  was gedruckt wird und was nicht
Aufbau            <body>
                      <div id="printheader">content</div>
                           <div id="bodyout">
                               <div id="bodyin">
                                     <div class="bodybox"></div>
                                     <div class="bodybox print­yes"></div>
                               </div>
                           </div>
                      <div id="printfooter">content</div>
                  </body>
Elemente                                                                                                                                          Selektor
printheader       Kopf der HTML­Druckausgabe                                                                                                      id
printfooter       Fuss der HTML­Druckausgabe                                                                                                      id
Modifikatoren A                                                                                                                                   Selektor
print­yes         Dieser HTML­Tag wird gedruckt.                                                                                                  class
print­no          Dieser HTML­Tag wird nicht gedruckt.                                                                                            class

				
DOCUMENT INFO
Shared By:
Stats:
views:8
posted:6/13/2010
language:German
pages:1