CSS Grundwissen

Tutorial wurde erstellt von: StyLer

Was ist CSS?
Die Quellcodes
CSS Syntax
CSS Datein einbinden
Globale CSS Regeln
Lokale Class Regeln
Lokale ID Regeln
Verknüpfungen von Regeln
Zusammenfassung


Was ist CSS?

Cascading-StyleSheet .css ist heutzutage die Stylesheetsprache überhaupt. Und nein, es ist keine Programmiersprache, genau so wie HTML. Mit CSS kann man das aussehen von Elementen oder auch ganze Bereiche bestimmen. Das praktische und nützliche für Javascript ist das positionieren von Elementen und das setzen des Z-Index´s. Hier nehm ich als Beispiel das Javascript-Script 'Lightbox'. Bei klick auf ein Bild, löst das eine Javascript-Ketten-Reaktion aus und das Bild wird zur mitte hin gezoomt und drum herum wird alles dunkler. Das kennt ihr sicherlich Das ganze funktioniert nur dank CSS.


Die Quellcodes

Unsere CSS Datei:


div  /* Ich bin Global für alle Divs */
{
	border: 1px solid #0000FF;
}

.NameDerRegel  /* Ich bin lokal und gelte nur als class */
{
	border: 1px solid #FF0000;
}


#NameDieserRegel  /* Ich bin auch Lokal aber gelte für jede ID mit diesem Namen */
{
	border: 1px solid #00FF00;
}

Unsere Div-Elemente:


<div>Global</div>
<div class="NameDerRegel">Lokal : NameDerRegel</div>
<div id="NameDieserRegel">Lokal : NameDieserRegel</div>


CSS Syntax

CSS:


RegelName
{
    Angabe-Name: Angabe-Parameter;
}

Hier zu möchte ich weniger was zu sagen also mach ich es kurz. Erst kommt entweder ein Vorzeichen oder wenn man eine globale Regel anwenden möchte, kein Vorzeichen. Gefolgt von RegelName. Um eine Angabe zu machen, kommt zu erst der Angabe-Name gefolgt mit einem doppelpunkt und dann die Angabe-Parameter, die diese Angabe benötigt. Am schluss noch ein; um diese Angabe zu vervollständigen. Also im ganzen, nicht zu schwer.


CSS Datei einbinden

HTML:

<link rel="stylesheet" type="text/css" media="screen" href="_stylesheet.css" />

Das nun kein HTML Tutorial aber ich erkläre euch das Link-Element. mit rel geben wir an, worum es handelt, bei uns um stylesheet. type ist im grunde das gleiche, wir geben an das es sich um text/css handelt. Nun kommt etwas praktisches, das media-Attribut. Es gibt an, wofür diese CSS Datei ist. Man kann hier sowohl screen als auch handheld, tv, projection (...) angeben. Screen ist also der Computer-Bildschirm, Handheld das Handy, Projection der Projektor/Leinwand. All ist hier aber auch möglich. Und mit href geben wir an, wo die Datei zu finden ist und wie sie heißt. Ein Link-Element wird immer zwischen <head> und </head> platziert.


Globale CSS Regeln

CSS:

div  /* Ich bin Global für alle Divs */
{
	border: 1px solid #0000FF;
}

Wie man sieht, kommt erst ein name im unserem Falle div, da es für alle Div-Elemente gelten soll und der Block wird mit { eingeleitet und mit } geschlossen.

Warum ist diese Regel global?
Weil sie einen reservierten Namen trägt und kein vorzeichen.

Es gibt folgende Vorzeichen: . und # Dazu aber später mehr. Wir geben also mit dieser Regel an, das alle Div-Elemente eine blaue Umrandung erhalten sollen. Gehn wir also zu der nächsten Regel.


Lokale Class Regeln

CSS:

.NameDerRegel  /* Ich bin lokal und gelte nur als class */
{
	border: 1px solid #FF0000;
}

Unsere lokale Class Regel lautet also NameDerRegel. Wie ich schon sagte, namen sind schwer Warum gilt sie als lokal? Da sie das vorzeichen . hat und nur dann wirksam ist, wenn sie einem HTML-Element als Class zugewiesen wurde. Das seht ihr hier: 

HTML:

<div class="NameDerRegel">
    Lokal : NameDerRegel
</div>

Die Regel gibt an, das Elemente mit dieser Class also eine rote Umrandung erhalten werden. Überschreibt unsere lokale Class Regel die globale Regel? Ja tut sie! Aber es werden nur die CSS Angaben überschrieben, die miteinander übereinstimmen. Also überschreibt unsere lokale Regel, die Border-Angabe der globalen Regel. Hätte unsere globale Regel noch die font-size Angabe aber unsere lokale Regel nicht, dann würde die font-size Angabe der globalen Regel, auch für unsere lokale Regel gelten.


Lokale ID Regeln

CSS:


#NameDieserRegel  /* Ich bin auch Lokal aber gelte für jede ID mit diesem Namen */
{
    border: 1px solid #00FF00;
}

Der Name dieser Regel ist NameDieserRegel und hat das Vorzeichen #. Wie der Titel schon sagt, ist dies eine ID Regel und wird nicht ganz so oft verwendet. Alle HTML-Elemente die, diesen Namen als ID tragen, werden also eine grüne Umrandung haben. Wie nutzt man diese Regel seht Ihr hier: 

HTML:

<div id="NameDieserRegel">
    Lokal : NameDieserRegel
</div>


Verknüpfungen von Regeln

Man kann mehrere Regeln miteinander verknüpfen wenn sie so gut wie alle die gleichen Angaben haben sollen. Sollen also alle Texte innerhalb von P-, Div- und Pre-Elementen die Text-Farbe Schwarz und die Text-Größe 16 erhalten, dann sieht dies wie folgt aus: 

CSS:


p, div, pre
{
	color: #000;
	font-size: 16px;
}

Es ist also sehr leicht seine CSS Regeln zu kombinieren. Es geht noch komplexer, aber das zeige ich euch hier nicht. Ich finde auch, dass man es nicht übertreiben sollte um die Übersicht zu behalten.


Zusammenfassung

Es gibt also globale und lokale Regeln. Lokale Regeln haben Vorzeichen. Class Regeln nutzen . und ID Regeln # als Vorzeichen. Eine Regel kann die vorigen Angaben überschreiben sofern die Angabe-Namen übereinstimmen.
Man kann mehrere Regeln verknüpfen um Zeit und Zeilen zu sparen, aber durch eine weitere Regel, lassen sich diese Verknüpfungen auch vereinzelnt verändern oder erweitern.

CSS ist also ein mächtiges Werkzeug um die Seite so zu gestalten wie man sie haben möchte. Bei Barieere-Freien Seiten ist CSS sehr wichtig und der Quelltext der CSS-Datei kann sogar DinA4-Seiten lang sein/werden. Aber auch bei Tabellen-Seiten wird CSS genutzt um Hintergrundgrafiken zu verwenden oder um das Design, das zuvor in Photoshop und Co. erstellt wurde, auch zu 1:1 umzusetzen. CSS wird also heutzutage immer verwendet, mit ein paar ausnahmen vielleicht.