CSS

== Aufbau der css Datei ==\ Die folgenden Anweisungen können natürlich bei Bedarf jederzeit kombiniert werden. Sie sind getrennt, damit man sieht, welcher Schritt was bewirkt.\ \ === Selektoren (Elemente) kombinieren oder einzelne Eigenschaften wählen ===\ \ Will man mehrere html-Elemente mit einer Anweisung gleichzeitig ansprechen, so wird dies folgendermassen aufgebaut:\

• h1, h2, h3 ... { gewünschte Eigenschaft; }\

\ Will man nur Elemente mit einer gewissen Eigenschaft auszeichnen:\

• h1[align] {...;} // Alle h1, welche mit align ausgerichtet werden\
• h1[align = center] {...;} // Nur h1, welche mit align auf center ausgerichtet sind\

\ Man kann auch nur auf einen Teil der Eigenschaft (Parameter) filtern:\

• h1[name~=Text] {...;} // Betrifft alle h1, welche im name etwas mit Text drin haben\
• h1[name|=Text] {...;} // Betrifft alle h1, welche im name etwas mit Text drin haben\

Der Unterschied in der Aufzählung ist die Trennung der Eigenschaft. Bei Abständen nimmt man ~= und bei Unterstrichen |=\ \ Der * ist wie bei anderen System ein Platzhalter für alles und beeinflusst daher alles:\

• *[align] {...;} // Betrifft alle Elemente, welche mit align ausgerichtet werden\
• * {...;} // Betrifft ALLE! Elemente\

\ === Selektoren verschachteln ===\ Will man eine Formatierung nur dann haben, wenn ein Element als Kindelement auftaucht, dann wird dies folgendermassen formatiert:\

• Vaterelement Kindelement {...;} // Wichtig ist der Abstand\
• Vaterelement > Kindelement {...;} // Nur dann gültig, wenn es ein direktes Kind ist ->
  \
• Vaterelement * Kindelement {...;} // Es muss mindestens ein Element dazwischen sein ->
  \
• Vaterelement + Kindelement {...;} // Hier ist eigentlich Vater / Mutter gemeint, da es nachfolgend ist ->
  \

\ === Klassen (class) und IDs ===\ Will man der Klasse test etwas zuweisen, wird dies folgendermassen zugewiesen:\

• *.test oder einfach .test\

\ Bei einer ID ist es das Rautezeichen:\

• #id {...;}\
• p#id {...;} // Die Formatierung geschieht nur, wenn die ID einem p-Element gehört. Ein h1 mit der ID würde ignoriert\

Alle Klassen von Paragraphen:\

• p.klassenname\

\ === Positionierung (position) und Z-Index ===\ Kann nur mit div (oder span) gemacht werden:\

• absolut -> Absolute Massangabe gemessen vom vorherigen\
• relative -> relative Positionierung im Verhältnis zur eigentlichen Position\
• static -> Kein Beeinflussung vom normalen Aufbau\

\ Nach der Angabe der Positionierungsart muss natürlich noch die Positionsangabe gemacht werden. Diese bezieht sich aufs vorher definierte Element. Es stehen top, bottom, left und right zur Verfügung.\ \ Da es mit der Verschiebung zu Überlappungen kommen kann (das zuletzt definierte Element ist oben), kann man die Darstellung mit dem Z-Index manipulieren und andere Elemente in den Vordergrund bringen. Je höher der Index, um so weiter oben liegt das Element.\ \ Der Bereich des Elementes kann natürlich mit height und width festgelegt werden.\

• #test1 {\

position: absolute;\
left:     10px;\
top:      20px;\
width:    100px;\
height:   100px;\
z-index:  4;\

} // end test1\