Css Stylesheet

Css ist ebenfalls aus der Klasse Anwendersprache und sollte, wenn man in Mathe nicht durchgefallen ist, einfach zu meistern sein.

Was ist aber Css?

Css (Cascade Stylesheet) wird verwendet um der Seite ein Design zu verleihen. Hierfür ein kleines Beispiel.

<style>
body{
background-color: green;
}
</style>

Dieser Css Ausschnitt sorgt dafür das die Webseite einen grünen Hintergrund hat.

Jetzt können wir hier viele verschiedene Sachen steuern. Dafür nehmen wir einen neuen Html Befehl dazu der bestimmte Bereiche anspricht.

Der Html Befehl hierfür ist

<div id="ID - Name um Box anzusprechen">Inhalt der Divbox</div>

/* Für Fortgschrittene */
<div class="ID - Klasse um Box anzusprechen">Inhalt der Divbox</div>

Anderst wie beim Body weisen wir dem Div einen Namen zu das das Stylesheet einzelne Divs unterscheiden kann.

*Für Fortgeschrittene: Man kann dem Div jeweils eine Id oder eine Class zuweisen. Der Unterschied ist von der Struktur des Aufbaus her. ID hat immer oberste Priorität. Class ist als Unterklasse zu verwenden und wird im Webdesign gerne für das „Klassifizieren“ sich wiederholender Elemente verwendet.


<style>
#deindiv{
margin-left: 25px;
color: green;
border: 1px;
width: 120px;
height: 100px;
}
</style>

und darunter


<div id="deindiv">Inhalt der Divbox</div>

wenn wir dieses Beispiel anwenden dann weiß css das die Id deindiv ist, der Abstand zu links 25px* (Margin ist für die Positionierung wichtig), die Schriftfarbe grün ist, wir einen Rand um den Div haben der 1px dick ist sowie ist die Breite des Divs 120px und die Höhe 100px.

*px = Pixel = Größeneinheit

Da es zuviele Css Befehle gibt um sie hier aufzuführen, empfehle ich http://www.css4you.de/ als Bibliothek.

Css lässt sich auch eleganter per Source laden aber dazu später mehr. Jetzt kann man ja mal in Php reinschnuppern ?

Werbung

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert