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