Grundlagen CSS
Jetzt wird´s detaillierter
Was ist eigentlich eine sogenannte Syntax? Das Wort taucht ja immer wieder irgendwo auf.
Nun, unter "Syntax" versteht man im Allgemeinen eine Art "Satzbau" (Zusammenstellung), wobei einzelne Worte zu grösseren Einheiten wie Sätzen "zusammengestellt" werden - und zwar nach bestimmten Regeln. In "künstlichen Sprachen", wie Programmiersprachen (wozu ja letzendlich auch das Codieren von HTML- und CSS-Dokumenten gehört) wird eine formale Grammatik » festgelegt, um erlaubte Zeichenfolgen zu definieren und unerlaubte auszuschliessen.
CSS-Syntax
Kapitel 3
Bei CSS gilt folgende, generelle Syntax:
Zunächst definiert man das HTML-Element, dem eine Eigenschaft zugeordnet werden soll. Dann folgt eine geschweifte Klammer ({}), innerhalb der dem Element die gewünschten Eigenschaften zugeordnet werden. Jede Eigenschaft wird durch einen Strichpunkt/Semikolon (;) von der anderen getrennt. Die gesamte Eigenschaft setzt sich zusammen aus "Eigenschaft" und "Wert der Eigenschaft". Diese beiden Elemente werden durch einen Doppelpunkt (:) getrennt.
In der Praxis sieht das dann so aus:
Beispiel
(Einem HTML-Element Eigenschaften zuweisen)
HTML-Element { Eigenschaft:Wert; Eigenschaft:Wert; Eigenschaft:Wert;}
oder konkret am Beispiel des "p-tags", welches die Schriftart "Courier" zugeordnet bekommen, fett und in Rot dargestellt werden soll:
p { font-family:Courier; font-color:#FF0000; font-weight:bold;}
Das Ergebnis ist dann Folgendes:
BEISPIEL
...und wird jedes Mal, wenn ein "p-tag" geschrieben wird, in dieser Form dargestellt.
Die HTML-Elemente, welche vor der geschweiften Klammer stehen und denen man eine Eigenschaft zuordnen möchte, nennt man "Selektoren" (z.B. auch div, ul,a [...]). Wenn man nun gleich mehreren dieser Selektoren die gleichen Eigenschaften zuordnen möchte, kann man sie - vor der geschweiften Klammer - durch Kommata getrennt hintereinander schreiben.
Beispiel
(Mehreren HTML-Elementen Eigenschaften zuweisen)
p,div,ul {font-family:Courier; font-color:#FF0000; font-weight:bold;}
Damit erreicht man, dass die o.g. Eigenschaften auf jedes der genannten Elemente (Selektoren) angewendet wird.
Um differenzierter Formatieren zu können, wird allerdings in der Praxis eher der gegenteilige Fall auftreten. Eine Eigenschaft soll nur auf einen Teil eines HTML-Elementes zur Anwendung kommen.
In unserem Beispiel hiesse das: Nur ein Teil der "p-tags" soll rot, fett und in der Schriftfarbe "Courier" erscheinen - ein anderer meinetwegen in blau. Zwar kann man die entsprechenden Attribute auch DIREKT einem Selektor zuordnen, aber sobald eine Formatierung häufiger als EINMAL gebraucht wird, ist es sinnvoll, sogenannte "classes" und "id´s" einzurichten.