CSS

Mit CSS wird das Gesamtlayout einer Webseite gestaltet.

CSS (Cascading Style Sheets) ist eine Formatierungssprache, welche 1996 vom World Wide Web Consortium (W3C) empfohlen wurde. Zurzeit ist CSS3 der aktuellste Standard. Dabei legt CSS fest, wie ein besonderer Webseiten-Bereich oder Inhalt dargestellt werden soll. Zudem kann man über die CSS Programmierung Elemente frei positionieren oder Hintergrundbilder festlegen und Angaben zu diversen Schriften und Farben festlegen. CSS ist aber nicht nur eine Sprache, mit der man Farben und Schriftarten festlegen kann, sondern sie besitzt auch die Fähigkeit Ränder, Höhen, Breiten und viele andere Komponenten zu bestimmen. Die Verwendung von CSS hat gegenüber den Formatierungen direkt in einem Dokument einige Vorteile zu bieten. Erwähnenswert ist hierbei die Eigenschaft Inhalt und die Darstellung trennen zu können. CSS gibt Anweisungen, wie Elemente dargestellt werden sollen und kann auch komplizierte Designs darstellen. Um CSS zu verwenden, sind keine besonderen Programme notwendig, die Cascading Style Sheets lassen sich in jedem Texteditor erstellen und man kann sie danach in das html-Dokument einbauen.


Aufbau CSS Syntax

In der CSS-Syntax sind Eigenschaften und Werte definiert, welche den HTML-tag beziehungsweise Selektor (z.B. h1 = Überschrift 1) formatiert. Der Aufbau einer Syntax beginnt immer mit dem Selektor. Es können auch mehrere Selektoren gleichzeitig ausgewählt werden. Nach den Selektoren folgt die Eigenschaft und der dazugehörige Wert, durch Doppelpunkt getrennt. Hier können auch mehrere Eigenschaften gleichzeitig aufgelistet werden. Wichtig ist, das jeden Eigenschaft mit einem Semikolon abschliesst. Die CSS-Eigenschaften und Werte werden in geschweifte Klammern zusammengefasst.

Selektor(en) { Eigenschaft: Wert;}

p { font-family: helvetica; color: blue; background-color: yellow; }

h1, h2 { color: red; background-color: black; }


Einbindung Style Sheet

Eine Methode ist das Layout direkt in den HTML-tag einzubinden (Inline CSS). Dies ist nur sinnvoll bei einzelnen und nicht wiederkehrenden Elementen einer Webseite, wenn beispielsweise ein Wort speziell hervorgehoben werden soll.

Es gibt noch zwei weitere Möglichkeiten, das Layout mit Style Sheets einzubinden:
->entweder jeweils direkt in den Head Bereich des HTML-Dokuments (internes Style Sheet)
->oder als ein extern ausgelagert Style Sheet (externes Style Sheet).

Internes Style Sheet
Interne Style Sheets werden für einzelne oder ein HTML-Dokument gebraucht. Der Befehl für ein internes Style Sheet wird im Head-Bereich der HTML-Seite definiert.
Einbindung internes CSS

<head>       

<style>   

p { font-family: helvetica; }

</style>

</head>


Externes Style Sheet
Ein externes Style Sheet gestaltet alle HTML-Webseiten und wird sehr häufig gebraucht, da man das ganze Aussehen der Webseiten mit nur einer Dateianpassung ändern kann. Die gesamte CSS-Syntax wird in einer separaten Datei als style.css abgespeichert und jede HTML-Seite wird im Head-Bereich mit dem Style Sheet wie folgt verlinkt: Einbindung externes CSS

<head>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>


Vererbung CSS

CSS-Definitionen werden innerhalb der Dokumentenstruktur weiter vererbt. Es gibt Eltern- und Kind-Elemente:
- body ist das Eltern-Element von h1, p, table und ul
- table ist das Eltern-Element von tr und td
- ul ist das Eltern-Element von li
Kinder von Eltern-HTML-Tags übernehmen die meisten Formatierungen, erben diese. Demnach kann man im Eltern-Element alles definieren und diese werden automatisch ans Kind-Element weiter vererbt. Wenn jedoch im Kind-Element tags neu definiert werden, gelten diese.

Beispiel Vererbung
Im body-tag wird die Schriftart/-grösse und Schriftfarbe blau festgelegt. Diese Angaben werden an das p-tag sowie h-tag etc. vererbt. Dies garantiert für das ganze Dokument eine einheitliche Schrift. Im Überschrifts-tag h1 wird nun aber beispielsweise die Schriftfarbe Rot definiert, welche dann jeweils für dieses tag gilt.

Vererbung CSS Syntax

<style>

body { color: blue; } h1 { color: yellow; }

</style>

<h1>Titel gelb</h1>

<p>Absatz blau, da im body so definiert.</p>


Links gestalten (Pseudoklassen)

Ein Link wird mit dem HTML-tag 'a href' eingefügt. Nicht gestaltete Links werden immer blau und unterstrichen bzw. wenn bereits besucht, violett und unterstrichen dargestellt.
Ein Link hat jedoch verschiedene Zustände, wie angewählter Link, darüber fahren oder bereits besuchter Link. Diese im CSS sogenannten Pseudoklassen können verschieden dargestellt werden. Sinnvoll ist es, wenn Links sich vom Rest des Textes abheben. Üblicherweise werden Farbe und/oder Hintergrundfarbe sowie teilweise Textdekoration (z.B. unterstrichen) je nach Aktion angepasst. Hierbei ist immer die folgende Reihenfolge zu berücksichtigen:

a:link = normaler Hyperlink
a:visited = besuchter Hyperlink
a:hover = Mauszeiger befindet sich gerade über dem Hyperlink
a:active = beim Klick auf den Hyperlink


Border (Rahmen)

Für jedes Element kann ein Rahmen angezeigt werden. Folgende Angaben sollten hierfür prinzipiell angegeben werden, damit alle Browser dies auch korrekt darstellen:

border-color = Rahmenfarbe
border-width = Rahmenbreite
border-style = Rahmenart (solid, double, dotted, dashed, ridge)
top, right, bottom, left = Positionsangaben (optional)

border-color: green; border-width: 2px; border-style: solid; border: brown 2px double; border-top: green 20px solid;


Box-Modell

Für jedes Element, jeden Inhalt auf einer Webseite wird eine rechteckige Fläche durch den HTML-tag reserviert. Nun können über das Box-Modell die Grösse, Abstände bzw. das Design einer Seite erstellt. Es können folgende Abstände mit dem Box-Element auf alle Seiten definiert werden:

width = Breite
height = Höhe
border = Rahmen
margin = Aussenabstand, Abstand ausserhalb der Box
padding = Innenabstand, Abstand innerhalb der Box zum Inhalt
* Massangaben in px (Pixel), em (1em=100%), % (Prozent)
** Seitenangaben top (oben), right (rechts), bottom (unten), left


Auch hier gibt es Kurzschreibweisen. Haben alle 4 Seiten denselben Wert, reicht eine Angabe - z.B. "margin: 20px;" - dies bewirkt, das auf allen 4 Seiten ein Abstand von 20px eingehalten wird. In der Kurzversion können auch alle 4 Seiten definiert werden - z.B. "margin:20px 35px 15px 60px;" - die erste Zahl fängt oben an und dann im Uhrzeigersinn nach rechts, unten, links.
Ausserdem gibt es noch den Befehl 'auto', wenn man Inhalte mittig einer Webseite platzieren möchte (margin: 0px auto). Dann muss dem Element jeweils eine Breite noch mitgegeben werden (z.B. width: 500px).
Box-Modell (Rahmen und margin) auf p-tag angewandt

p { font-family: Arial; font-size: 12px; width: 200px; height: 200px; margin: 25px; background-color: yellow; border: 3px green solid; }

<p>Dieser Absatz sollte einen gelben Hintergrund und einen grünen Rahmen erhalten, ebenso 200x200 Pixel gross sein sowie einen Aussenabstand von 25 Pixel haben.</p>


Masse
Bei Schriftgrößen, Absatzabständen oder Rändern stehen die weit verbreiteten Masseinheiten zur Verfügung. Dabei sind absolute Angaben (z.B. Pixel) und relative Angaben (z.B. Prozent gegenüber "normal") möglich. Bei numerischen Bruchzahlen wird stets der Punkt als Dezimalzeichen benutzt (nicht Komma). Auch Minuswerte sind bei einigen Wertzuweisungen möglich, markiert wie üblich durch das Minuszeichen.

px, absolut/relativ: Steht für Pixel. Abhängig von der Pixeldichte des Ausgabegeräts, relativ also von Ausgabegerät zu Ausgabegerät, absolut dagegen auf ein und das selbe Ausgabegerät bezogen.
border-width:3px; margin-right:60px;

em, relativ: Steht für bezogen auf die Schriftgröße des Elements. Ausnahme: wenn die font-size-Eigenschaft (also die Schriftgröße) selbst mit dieser Maßangabe gesetzt wird, steht diese für bezogen auf die Schriftgröße des Elternelements. Browser haben oft die Standardgrösse 16 definiert. font-size:1.2em; line-height:1.5em;

%, relativ: Steht für Prozent. Je nach CSS-Eigenschaft relativ zur elementeigenen Größe, oder zu der des Elternelements, oder zu einem allgemeineren Kontext. Bei nebenstehendem Beispiel ist die Angabe zur Zeilenhöhe (line-height) relativ zur Schriftgröße (font-size) zu interpretieren. font-size:10px; line-height:120%;


Maximalwerte festlegen
Für alle Elemente können auch Maximalwerte bzw. Minimalwerte bezüglich Grösse angegeben werden. Hierfür werden auch die üblichen Massangaben verwendet.

min-width: Element kann breiter, aber nicht schmaler sein
max-width: Element kann schmaler, aber nicht breiter sein
min-height: Element kann höher, aber nicht niedriger sein
max-height: Element kann niedriger, aber nicht höher sein


Positionierung (Ausrichten von Elementen)

Es gibt folgende Möglichkeiten, um Elementen auf einer Webseite zu positionieren:

position: static (standard)
position: relative
position: absolute
position: fixed

Mit static wird standardmässig im normalen Textfluss positioniert, sofern nichts anderes bestimmt worden ist.
Relativ ist ähnlich wie static, hier können jedoch noch Seitenangaben (top=oben, right=rechts, bottom=unten, left=links) hinzugefügt werden und verschieben das Element aus dieser Position. Die nachfolgenden Elemente verhalten sich so, als wäre das Element nicht verschoben. Static und relativ sind beide im Textfluss der anderen Elemente.
Absolute Elemente werden mit den gesetzten Seitenangaben an einen Ort platziert und sind ausserhalb des normalen Textfluss, das heisst sie liegen über den anderen Elementen und beeinflussen somit nicht ihr Layout. Die absolute Position wird relativ zu den Rändern des Eltern-Elements berechnet, wenn dieses ebenfalls positioniert ist. Da sich der Seiteninhalt scrollen lässt, werden absolut positionierte Elemente mitgescrollt.
Fixed ist ähnlich wie absolute, jedoch bleibt das Element beim Scrollen stehen und die Positionierung orientiert sich am sichtbaren Browserfenster und nicht am übergeordneten Element.


z-index (Reihenfolge von Elementen)

Die Eigenschaft z-index gibt an, in welcher Reihenfolge Elemente auf dem Ausgabemedium dargestellt werden. Elemente mit einem grösseren z-index liegen dabei näher. Je größer der Wert, umso „höher“ liegt das Element. Ein Element mit z.B. dem z-index 10 überdeckt ein Element mit dem z-index 5. Der z-index funktioniert nur, wenn auch noch die 'position'-Angabe mitgegeben wird (nicht static).


display

Mit dem display-tag kann die Anzeige von Elementen unterdrückt werden oder die Art der Anzeige festgelegt werden. Da HTML-Eelmente grundsätzlich eine neue Zeile erfordern (Block-Elemente), gibt es mit dem Display-Befehl auch die Möglichkeit, Elemente nebeneinander anzuzeigen. Folgende Angaben sind möglich:

block = Erzwingt einen Block - das Element erzeugt eine neue Zeile.
inline = Erzwingt die Anzeige im Text - das Element wird im laufenden Textfluss angezeigt.
inline-block = Erzeugt äußerlich einen Block, für den Breite, Höhe und Außenabstand angegeben werden kann, belässt das Element jedoch im laufenden Textfluss.
list-item = wie block, jedoch mit einem Aufzählungszeichen (Bullet) davor.
none = Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen.

Beispiel zentrierte, horizontale Navigation

nav { list-style:none; margin: 0px; padding: 0px; text-align: center; } nav li { display: inline; }

<nav>

<ul>

<li>Kapitel 1</li>

<li>Kapitel 2</li>

<li>Kapitel 3</li>

</ul>

</nav>


float (Umfliessen von Elementen) / clear (Umfliessen beenden)

Über den float-Befehl werden Elemente ausgerichtet bzw. es können Elemente nebeneinander fliessen. Es gibt hier für die Befehle float: left / float: right, die es ermöglichen Elemente nebeneinander fliessen zu lassen. Hierfür wird dem fliessenden Element immer eine Breite angeben, damit das andere Element daneben stehen kann.

h1 { float: right; width: 300px; }

p { border: 1px solid black; width: 300px; }

<h1>Titel rechts platziert</h1>

<p>Inhalt links daneben</p>

 clear (Umfliessen beenden)
Die Angabe clear beendet das Umfließen anderer Elemente. Ein mit clear formatiertes Element ist das Erste, dass nicht mehr neben anderen Elementen steht. Es besteht die Möglichkeit, diesen Befehle entweder direkt im HTML für ein Einzelelement mit einem break style (br style="clear:both;) einzugeben oder direkt im CSS clear im entsprechenden Selektor (z.B. p-Selektor) einzubauen; beide Varianten sind im unterstehenden Beispiel ersichtlich.

Es können folgende Werte zu clear eingegeben werden:

left (beendet einen Umfluss mit float:left)
right (beendet einen Umfluss mit float:right)
both (beendet den Umfluss um beide Seiten)

h1 { float: left; } h2 { float: right; color: blue; } p { clear: both; color: red; background-color: white; }

<h1>Titel links platziert</h1>

<h2>Untertitel rechts platziert</h2>

<br style="clear:both;">

<p>Inhalt unterhalb der beiden Titel</p>


Overflow
Wenn der Viewport eines darzustellenden Elements nicht ausreicht, werden Scrollleisten eingeblendet. Die Eigenschaft overflow ermöglicht es, Inhalte grösser als das Element zu machen oder den Platz für den Inhalt eines Elements zu beschränken. Damit die Inhalte trotzdem erreichbar sind, können Scrollbalken erscheinen.

Eigenschaften:
overflow (Breite und Länge)
overflow-x (Breite)
overflow-y (Länge)

Werte:
auto, browserabhängig, die meisten Browser stellen Scrollbalken zur Verfügung
scroll, Inhalte sind per Scrollbalken erreichbar
visible, Inhalte sind sichtbar
hidden, Inhalte sind unsichtbar
no-display, das Element wird entfernt, so als ob display:none gesetzt wäre
no-content, der Inhalt wird nicht angezeigt, so als ob visibility:hidden gesetzt wäre


CLASS und ID (CSS Attribute)

Man kann eigene CSS-Selektoren definieren, die nicht an bereits bestehende HTML-tags (body, h1, p etc.) angebunden sind. Einerseits gibt es die Möglichkeit des Attributs class="klassenname" sowie des Attributs id="idname". Mit CLASS können mehrere Elemente im HTML-Dokument ausgezeichnet werden. Es können also wiederholende Designelemente bestimmt werden, z. B. Textstellen mit einer Hintergrundfarbe hervorheben oder einzelne Texte andersartig markieren. Den Klassen-Selektoren wird im CSS-Syntax ein Punkt . vorangestellt. Der Name ist frei wählbar und sollte aus Buchstaben bestehen und nicht die gleiche Bezeichnung wie ein HTML-Befehl haben. Klassenselektoren werden mit dem div-tag (Division) in einen ganzen Bereich oder mit dem span-tag (für einen einzelnen Bereich, auch Inline genannt) eingebunden. Beispiel Class-Attribut

.rot { color: #FF0000; }

Dieses Wort alleine ist <span class="rot">rot</span>.

<div class="rot">Dieser ganze Bereich ist rot.</div>

Dagegen wird die ID nur für ein einziges Element pro Seite verwendet. ID ist also zur eindeutigen Bestimmung eines Elementes, wie zum Beispiel die Steuerung einer Webseite, welche dank ID ein eigenes Design erhält. ID-Selektoren wird das Rauten-Zeichen # vorangestellt. Der ID-Name ist frei wählbar, sollte aus Buchstaben bestehen und nicht die gleiche Bezeichnung wie ein HTML-Befehl haben. ID-Selektoren werden im HTML entweder mit dem DIV-tag (für einen ganzen Bereich, auch Block genannt) oder mit dem SPAN-tag (einzelne Elemente eines Abschnittes) eingebunden. Beispiel ID-Attribut

#info { color: white; background-color: black; position: absolute; margin: 100px; width: 200px; height: 200px; }

<div id="info">Ich bin eine schwarze Box, die dank

absoluter Position immer zuvorderst auf der Seite steht.</div>


CSS3

CSS3 ist der neuste Webstandard und damit kann modernes Webdesign erstellt werden. Es können verschiedene Gestaltungselement wie Schatten und runde Rahmen individuell gestaltet werden, sowie einzelne Elemente transformiert werden.

Browser-Präfix
Nicht alle Browser unterstützen die neusten CSS3-Standards. Hierfür kann jedoch der Browser-Präfix eingesetzt werden, welcher es erlaubt, die CSS3-Eigenschaften schon in einem Draft- oder Beta-Zustand zu nutzen:
Firefox: -moz-
Chrome, Safari: -webkit-
Internet Explorer: -ms-
Opera: -o-


Beispiel:

p { background-color:orange; border:1px solid orange; /*border-radius*/ -webkit-border-radius:50px; -moz-border-radius:50px; -ms-border-radius:50px; -o-border-radius:50px; border-radius:50px; }


opacity (Deckkraft)
Mit opacity (Deckkraft) können Bilder oder auch andere Elemente halb-transparent dargestellt werden. Es gibt den Wert 0.1 (entspricht 10%) bis 1 (entspricht 100%). Hier kann über eine selbstgewählte Klasse oder ID die Deckkraft definiert und im HTML-tag eingebaut werden.

border-radius (abgerundete Ecken)
Sehr einfach können jetzt beliebigen Elementen über die CSS3-Anweisung border-radius abgerundete Ecken mit den Massangeben mitgegeben werden. Ferner kann die Rundung individuell für jede Ecke anhand der Seitenangaben bestimmt werden. z.B. border-radius: 50px oder border-bottom-right-radius: 100px 25px

box-/text-shadow (Box- und Textschatten)
In CSS3 ist es jetzt sehr einfach geworden, Elemente mit einem Schatten zu versehen. Der Schatten kann mit dem Attribut box-shadow in unterschiedliche Richtung, Größe und Härte versehen werden. Ebenso kann ein Text-Schatten mit dem Attribut text-shadow produziert werden. Insgesamt können vier Werte mitgeben werden (z.B. box-shadow: 5 -10 15 black;):
- 1. Wert steht für die x-Achse (horizontal)
- 2. Wert steht für die y-Achse (vertikal)
- 3. Wert für den Schlagschatten (weich/hart)
- 4. Wert definiert die Schattenfarbe

aside-Box mit Schatten:

aside { width: 100px; height: 100px; background-color: yellow; box-shadow: 10px -20px 10px red; }

<aside>Eine gelbe Box mit rotem Schatten</aside>


gradient (Farbverlauf)
In CSS3 gibt es den neuen Befehl gradient, welches ein Element mit einem Farbverlauf hinterlegt. Dieser kann in einen bestimmte Richtung (z.B. to bottom right) oder mit Grad (deg) angegeben werden.

<h1>Titel mit Schatten</h1>

h1 { background: linear-gradient(to bottom right, yellow, orange); }

h1 { background: linear-gradient(-90deg, blue, white); }


transform (Elemente umwandeln)
Mit den folgenden Befehlen sowie den dazugehörigen Möglichkeiten können beliebige Elemente umgewandelt werden (nebst x-/y-Achsen-Wert kommt noch der Wert deg = degree/Grad dazu):

transform: rotate(xxdeg); (rotieren von Elementen)
transform: scale(x, y); (skalieren von Elementen)
transform: skew(Xdeg, Ydeg); (neigen von Elementen)
transform: translate(x,y); (verschieben von Elementen)
transform-origin: 100% 100%; (Drehpunkt von Elementen bestimmen)


Beispiel obige Box mit Schatten wird 25 Grad nach rechts gedreht:

aside { width: 100px; height: 100px; background-color: yellow; box-shadow: 10px -20px 10px red; transform: rotate(25deg); }

<aside>eine nach rechts gedrehte Box</aside>

Vorherige Seite: HTML Nächste Seite: JS