====== CSS Grundlagen ======
CSS steht für **Cascading Style Sheets**, was so viel heißt wie //stufenförmige Gestaltungsvorlagen//. Die //Cascading Style Sheets// sind eine Sprache zum Formatieren von vor allem HTML-Dokumenten.
Im Prinzip wird die Formatierung einer Webseite (Layout, Farbe, Schriftarten,...) hauptsächlich mit CSS vorgenommen. HTML wird selten für diesen Zweck verwendet und ein HTML-Dokument soll eigentlich nur den Inhalt, bzw. die inhaltliche Gliederung einer Seite enthalten. Vor der Einführung von CSS war das Formatieren von mehreren Webseiten ein ziemlich großer Arbeitsaufwand, da die Tags in jedem Dokument neu definiert werden mussten. Mittels CSS ist es heutzutage möglich, die Informationen für die Darstellung einer Seite in einer externen .css Datei zu speichern. Diese Datei wird mit dem //link// Tag im head in das HTML-Dokument eingebunden:
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 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 ====
==== Kommentare ====
Kommentare sind vor allem in längeren CSS-Dokumenten hilfreich.
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