Somit können zahlreiche Seiten in einer Website mit nur einer CSS-Datei formatiert werden, was sehr viel Arbeit erspart, wenn man z.B. die Schriftart seiner Homepage ändern will. In diesem Fall müsste man nur in der CSS-Datei eine kleine Änderung vornehmen, anstatt in jedem HTML-Dokument den //font// Tag zu editieren.
===== Syntax =====
Eine CSS Regel ist folgendermaßen aufgebaut:
{{:inf:inf5bi_201112:css_syntax.jpg|}}
Der //Selektor// bestimmt das HTML-Element, welches formatiert werden soll.
Eine //Deklaration// besteht aus einer Eigenschaft und einem Wert.
Die //Eigenschaft// ist das zu verändernde Style-Attribut (color, font-size, text-decoration,...)
Der //Wert// kann die Größe der Schrift (10px, 16px,...), die Farbe (blue, #0000A0) und vieles mehr bestimmen.
Beispiel:
p
{
text-align:center;
color:#0000A0;
font-family:Calibri;
font-size:40px;
}
Durch diesen Code wird in jedem Absatz-Tag (...
) die Schriftart "Calibri", die Schriftgröße 40 Pixel und die Farbe Blau (#0000A0 ist die Hexadezimaldarstellung der Farbe) verwendet. Außerdem wird der Text zentriert. ===== Die wichtigsten Befehle ===== Hier eine Liste der am häufigsten verwendeten CSS-Befehle: ^Befehl ^Bechreibung ^ | Links || |A:link |Link | |A:visited |Besuchter Link | |A:hover |Link beim Drüberfahren mit der Maus | |A:active |Angeklickter Link | | Boxenmodell || |margin-left |Abstand nach außen links | |margin-right |Abstand nach außen rechts | |margin-top |Abstand nach außen oben | |margin-bottom |Abstand nach außen unten | |padding-left |Abstand nach innen links | |padding-right |Abstand nach innen rechts | |padding-top |Abstand nach innen oben | |padding-bottom |Abstand nach innen unten | |width |Breite | |height |Höhe | |border |Rahmen | | Positionierung || |position:absolute |Absolute Position | |position:relative |Relative Position (relativ zur Standardposition) | |position:fixed |Wie absolute, bewegt sich beim Scrollen aber nicht | |position:static |HTML Standard Positionierung | | Textformatierung || |font-family |Schriftart (Calibri,...) | |color |Schriftfarbe | |font-size |Schriftgröße | |text-align |Textausrichtung | | Hintergrund || |background-color |Hintergrundfarbe | |background-image |Hintergrundbild | |background-attachment|Bestimmt, ob sich ein HG beim Scrollen mitbewegt | |background-repeat |Wiederholung des HG (horizontal, vertikal, keine WH) | ==== Id und Class ==== ID- und Klassenselektoren werden verwendet um CSS-Elemente eindeutig zuzuordnen. Sie sind sogenannte //Bezeichner// für CSS-Elemente. Man weist einem HTML-Tag folgendermaßen eine ID bzw. eine Klasse zu:
Überschrift
Inhalt
Der Absatz mit der ID "uberschrift" bzw. mit der Klasse "inhalt" wird dann entsprechend formatiert.
Das CSS-Dokument könnte in diesem Fall z.B. so aussehen:
#uberschrift
{
color:blue;
font-size:20px;
font-family:Calibri;
}
.inhalt
{
color:green;
font-size:16px;
font-family:Arial;
}
Eine ID wird mit einer Raute (#) vor dem Namen definiert, eine Klasse mit einem Punkt (.).
Man kann festlegen, für welchen HTML-Tag eine Klasse gültig sein soll. Dazu wird der Tag (a, p, h1, ...) vor den Punkt geschrieben.
Beispiel:
p.inhalt
{
color:green;
}
Im Beispiel wird bestimmt, dass die Klasse "inhalt" nur für Absätze (p) gilt.
Text
Die Überschrift (h1) würde in diesem Fall nicht formatiert werden.
=== Unterschied zwischen Id und Class ===
ID- und Klassenselektoren haben im Prinzip dieselbe Funktion. Es gibt aber dennoch einen bedeutenden Unterschied:
Die ID wird verwendet um ein bestimmtes, einzigartiges Element zu definieren, wohingegen die Klasse für mehrere Elemente benutzt wird.
Zum Beispiel könnte man einer Übersicht, die es ja nur einmal gibt, eine ID zuweisen.
==== Kommentare ====
Kommentare sind vor allem in längeren CSS-Dokumenten hilfreich. Sie werden vom Browser vollkommen ignoriert und weder als Formatierung oder Inhalt interpretiert.
Ein Kommentar beginnt mit /* und endet mit */
/* Das ist ein Kommentar */
===== Links und Quellen =====
* [[http://www.w3schools.com/css/default.asp|CSS - Tutorial]]
* [[http://www.w3schools.com/css/css_examples.asp|CSS - Onlinebeispiele zum Ausprobieren]]
* http://w3schools.com/css/
* http://de.wikipedia.org/wiki/Cascading_Style_Sheets
* http://www.homepage-total.de/css/css-befehle.php
* http://www.html-seminar.de/class_und_id.htm