Guten Tag GodLikerz
Heute führe ich euch etwas ein in css
So dann mal los...
CSS steht für Cascading Style Sheets, und sollen das Leben eines jeden Webmasters zumindest ein wenig erleichtern. CSS 1 wird von Netscape und dem IE in etwa komplett in den Versionen 5 unterstützt. CSS 2 wird bereits (fast komplett) von dem Netscape 6 unterstützt. Der IE 6 hängt noch ein wenig nach.
Über CSS kann man das Aussehen von bestimmten HTML Elementen definieren.
Ein einfaches Beispiel:
Nehmen wir an, das Sie diesen Code auf ca. 10 Unterseiten verwenden, z.B. in einem Menü, oder einem anderen Element. Möchten Sie nun, das der Text blau dargestellt wird, dann müssten Sie in ihren 10 Unterseiten jeweils die Farbangabe auf blau ändern.
Dies ist schon viel Aufwand, doch stellen Sie sich das einmal bei 100, 200 oder gar 300 Unterseiten vor?
Die Lösung bringt CSS mit sich. Über CSS kann man, wie bereits erwähnt das Aussehen, also die Formatierung von Elementen definieren. Folgende CSS Anweisung würde das oben beschriebene Problem lösen:
Diese CSS Anweisung wird in einer Datei *.css gespeichert, und in die jeweiligen HTML Dateien über eine Anweisung im <head> Bereich (siehe unten) eingebunden. Sie definiert, das alle <p> Tags blau dargestellt werden.
Stylesheets einbinden
Eine CSS Style Definition kann auf zwei Möglichkeiten in eine HTML Datei eingebunden werden. Zum einen, wie im obigen Fall, das die Stylesheet-Anweisungen in einer ausgelagerten *.css Datei vorliegen, oder, das die Styleanweisungen im <head> Bereich jeder Seite definiert werden.
Eine weitere Möglichkeit, ist die Verwendung des style-Attributes bei HTML Tags, die auf diese Weise direkt formatiert werden.
1. Einbindung einer ausgelagerten CSS Datei:
<link rel="stylesheet" href="style.css" type="text/css">
Diese Anweisung kommt in den Head-Bereich jeder HTML Seite, die die Style-Definitionen verwenden soll. Über das href-Attribut wird auf die Adresse der Stylesheet Datei verwiesen.
2. Styledefinition im head-Bereich
Die Styledefinitionen im <head> Bereich werden durch den <style> Tag umschlossen. Das obere Beispiel würde wie folgt eingebunden werden:
Hierbei steht man natürlich wiederum vor der Problematik, dass das Stylesheet bei einer Änderung in jeder Datei geändert werden muss.
3. Styledefinitionen bei einem Element
Man kann CSS Style, durch das style-Attribut direkt bei einem Element definieren. Das obere Beispiel würde wie folgt aussehen:
Elemente und Klassen
Nun, wenn Sie nach dem beschriebenen Schema vorgehen, können Sie jeden HTML Tag (jeden sichtbaren) über CSS vordefinieren. So definiert folgende CSS Anweisung, das alle Überschriften (<h1>) Rot sein sollen.
Was ist nun, wenn Sie mehrere Farben für <h1>-Überschriften definieren möchten. So soll z.B. eine Überschrift grün, die andere Rot sein.
Auch hierfür hat CSS eine Lösung. Man kann einzelne Klassen definieren. Diese Klassen sind ebenfalls Styledefinitionen (wie gewohnt), nur muss von dem HTML-Befehl direkt auf die Klasse verwiesen werden, wenn dieses Element über die jeweilige Klasse definiert werden soll.
Ein Beispiel veranschaulicht dies:
Alles anzeigen
Das Ergebnis im Browser (kann man sich schon vorstellen):
CSS Klassen anwenden
Über die class-Attribute muss also auf die Klassendefinition in der CSS Datei verwiesen werden. Eine Klasse erster Ebene beginnt mit einem Punkt, in geschweiften Klammern kommt die CSS Definition.
Was ist nun eine Klasse erster Ebene?
Eine Klasse erster Ebene ist für alle HTML Tags, die sich im <body> Bereich befinden, anwendbar.
Man kann auch Klassen definieren, die sich nur auf einen HTML Tag beschränken. Die Klasse kann dann von anderen Tags nicht mehr aufgerufen werden.
Diesen Sachverhalt kann man auf unser 2. Beispiel übertragen. Dabei müssen Sie die Klassendefinitonen wie folgt verändern.
Es werden wie Sie sehen, wiederum zwei Klassen definiert. Diese Klassen können jedoch nur von <h1> Tags aufgerufen werden. Ein Aufruf z.B. über <p class="rot"> würde nicht "funktionieren".
Mehrere HTML Befehle "gleichzeitig" definieren
Man kann auch mehrere HTML Befehle "in einem" über CSS definieren. So haben Sie z.B. eine Standardfarbe, allgemein für Überschriften. Folgende CSS Definition definiert, das die h1-h6 Tags alle Grün dargestellt werden sollen.
Nun, wenn man jetzt einen Überschriftstyp noch genauer definieren möchte, z.B. die Schriftart, dann kann man diese Definition einfach darunter setzten.
Alles anzeigen
Das Ergebnis sieht im Browser wie folgt aus:
Verschachtelte CSS Anweisungen
Zunächst werden alle Überschriften so definiert, das die Textfarbe Grün sein soll. In der zweiten Zeile bekommt speziell die Überschrift h2 noch die Eigenschaft, das Sie von der Schriftart Arial sein soll.
Kommentare in CSS
Ja, innerhalb einer Styledefinition können Sie Kommentare verwenden, diese dienen dem besseren Verständnis des CSS Codes. Kommentare werden vom Browser, der den CSS Code interpretiert einfach übersehen.
So jetzt seid ihr etwas in css eingeführt
MFG lassu
PS: Wer ernsthaft mit css coden möchte, sollte natürlich noch mehr dazu lernen und am besten ein handbuch kaufen!
[COLOR="Green"]~Lunatic Edit: Bitte nächstes mal Quelle angeben, CSS - Einstieg in CSS - Eine Einfhrung[/COLOR]
Heute führe ich euch etwas ein in css
So dann mal los...
CSS steht für Cascading Style Sheets, und sollen das Leben eines jeden Webmasters zumindest ein wenig erleichtern. CSS 1 wird von Netscape und dem IE in etwa komplett in den Versionen 5 unterstützt. CSS 2 wird bereits (fast komplett) von dem Netscape 6 unterstützt. Der IE 6 hängt noch ein wenig nach.
Über CSS kann man das Aussehen von bestimmten HTML Elementen definieren.
Ein einfaches Beispiel:
Nehmen wir an, das Sie diesen Code auf ca. 10 Unterseiten verwenden, z.B. in einem Menü, oder einem anderen Element. Möchten Sie nun, das der Text blau dargestellt wird, dann müssten Sie in ihren 10 Unterseiten jeweils die Farbangabe auf blau ändern.
Dies ist schon viel Aufwand, doch stellen Sie sich das einmal bei 100, 200 oder gar 300 Unterseiten vor?
Die Lösung bringt CSS mit sich. Über CSS kann man, wie bereits erwähnt das Aussehen, also die Formatierung von Elementen definieren. Folgende CSS Anweisung würde das oben beschriebene Problem lösen:
Diese CSS Anweisung wird in einer Datei *.css gespeichert, und in die jeweiligen HTML Dateien über eine Anweisung im <head> Bereich (siehe unten) eingebunden. Sie definiert, das alle <p> Tags blau dargestellt werden.
Stylesheets einbinden
Eine CSS Style Definition kann auf zwei Möglichkeiten in eine HTML Datei eingebunden werden. Zum einen, wie im obigen Fall, das die Stylesheet-Anweisungen in einer ausgelagerten *.css Datei vorliegen, oder, das die Styleanweisungen im <head> Bereich jeder Seite definiert werden.
Eine weitere Möglichkeit, ist die Verwendung des style-Attributes bei HTML Tags, die auf diese Weise direkt formatiert werden.
1. Einbindung einer ausgelagerten CSS Datei:
<link rel="stylesheet" href="style.css" type="text/css">
Diese Anweisung kommt in den Head-Bereich jeder HTML Seite, die die Style-Definitionen verwenden soll. Über das href-Attribut wird auf die Adresse der Stylesheet Datei verwiesen.
2. Styledefinition im head-Bereich
Die Styledefinitionen im <head> Bereich werden durch den <style> Tag umschlossen. Das obere Beispiel würde wie folgt eingebunden werden:
Hierbei steht man natürlich wiederum vor der Problematik, dass das Stylesheet bei einer Änderung in jeder Datei geändert werden muss.
3. Styledefinitionen bei einem Element
Man kann CSS Style, durch das style-Attribut direkt bei einem Element definieren. Das obere Beispiel würde wie folgt aussehen:
Elemente und Klassen
Nun, wenn Sie nach dem beschriebenen Schema vorgehen, können Sie jeden HTML Tag (jeden sichtbaren) über CSS vordefinieren. So definiert folgende CSS Anweisung, das alle Überschriften (<h1>) Rot sein sollen.
Was ist nun, wenn Sie mehrere Farben für <h1>-Überschriften definieren möchten. So soll z.B. eine Überschrift grün, die andere Rot sein.
Auch hierfür hat CSS eine Lösung. Man kann einzelne Klassen definieren. Diese Klassen sind ebenfalls Styledefinitionen (wie gewohnt), nur muss von dem HTML-Befehl direkt auf die Klasse verwiesen werden, wenn dieses Element über die jeweilige Klasse definiert werden soll.
Ein Beispiel veranschaulicht dies:
PHP-Quellcode
Das Ergebnis im Browser (kann man sich schon vorstellen):
CSS Klassen anwenden
Über die class-Attribute muss also auf die Klassendefinition in der CSS Datei verwiesen werden. Eine Klasse erster Ebene beginnt mit einem Punkt, in geschweiften Klammern kommt die CSS Definition.
Was ist nun eine Klasse erster Ebene?
Eine Klasse erster Ebene ist für alle HTML Tags, die sich im <body> Bereich befinden, anwendbar.
Man kann auch Klassen definieren, die sich nur auf einen HTML Tag beschränken. Die Klasse kann dann von anderen Tags nicht mehr aufgerufen werden.
Diesen Sachverhalt kann man auf unser 2. Beispiel übertragen. Dabei müssen Sie die Klassendefinitonen wie folgt verändern.
Es werden wie Sie sehen, wiederum zwei Klassen definiert. Diese Klassen können jedoch nur von <h1> Tags aufgerufen werden. Ein Aufruf z.B. über <p class="rot"> würde nicht "funktionieren".
Mehrere HTML Befehle "gleichzeitig" definieren
Man kann auch mehrere HTML Befehle "in einem" über CSS definieren. So haben Sie z.B. eine Standardfarbe, allgemein für Überschriften. Folgende CSS Definition definiert, das die h1-h6 Tags alle Grün dargestellt werden sollen.
Nun, wenn man jetzt einen Überschriftstyp noch genauer definieren möchte, z.B. die Schriftart, dann kann man diese Definition einfach darunter setzten.
PHP-Quellcode
Das Ergebnis sieht im Browser wie folgt aus:
Verschachtelte CSS Anweisungen
Zunächst werden alle Überschriften so definiert, das die Textfarbe Grün sein soll. In der zweiten Zeile bekommt speziell die Überschrift h2 noch die Eigenschaft, das Sie von der Schriftart Arial sein soll.
Kommentare in CSS
Ja, innerhalb einer Styledefinition können Sie Kommentare verwenden, diese dienen dem besseren Verständnis des CSS Codes. Kommentare werden vom Browser, der den CSS Code interpretiert einfach übersehen.
So jetzt seid ihr etwas in css eingeführt
MFG lassu
PS: Wer ernsthaft mit css coden möchte, sollte natürlich noch mehr dazu lernen und am besten ein handbuch kaufen!
[COLOR="Green"]~Lunatic Edit: Bitte nächstes mal Quelle angeben, CSS - Einstieg in CSS - Eine Einfhrung[/COLOR]