Lieber Leser, liebe Leserin,
in diesem schriftlichen Tutorial, möchte ich Sie dazu einladen, sich mit den Grundzügen (engl. "Basics") von Cascading Style Sheets auseinanderzusetzen.
Dies funktioniert zwar nicht so einfach, als einmal mit dem Finger zu schnipsen, dennoch ist es ziemlich leicht zu erlernen.
Mitbringen sollten Sie vor allem einen ordentlichen Editor (Anmerkung: notepad++), einen fähigen Webbrowser (Anmerkung: Google Chrome), sowie ein gewisses Maß an Interesse und Lernbereitschaft.
Ebenfalls erforderlich ist ein Grundwissen bei dem Erstellen und der Nutzung von (X)HTML Dateien.
Sie bringen diese Anforderung mit? Dann mal los!
Cascading Style Sheets
Cascading Style Sheets dienen dazu, um es simpel auszudrücken, das Design vom eigentlichen Inhalt zu trennen.
Wir lagern dazu sogenannte CSS-Regeln in eine .css Datei ab, welche wir dann in unserer (X)HTML Datei im <head>-Bereich einfügen.
Dies können wir durch folgende Zeile leicht funktionieren lassen:
Bitte beachten Sie, dass Sie bei der Verwendung eines XHTML-Dokuments diesen Tag schließen müssen. Dies können sie folgendermaßen tun:
Die oben genannte Verwendung, sollte nichts neues für Sie darstellen.
Eine kleine Legende zeigt ihnen, wofür diese Attribute stehen:
In dem oben genannten Beispiel befindet sich also meine .css Datei in demselben Ordner wie mein HTML-Dokument, und diese .css Datei trägt den Namen "style.css".
Soweit alles verstanden? Prima, dann mal weiter im Text.
Selektoren
Ein Selektor gibt eine oder mehrere Bedinungen vor, welche auf Elemente im HTML-Dokument zutreffen können, und sofern wir Übereinstimmungen haben, werden diese selektierten Bereiche von den CSS-Regeln betroffen.
Als ein einfaches Beispiel möchte ich Ihnen, folgenden Aufbau eines HTML-Dokumentes zeigen:
Anhand eines style-Attributes, welches Ihnen bekannt sein sollte, konnten wir inline diese verschiedenen Paragraphen unterschiedlich formatieren und durch andere Farben visualisieren.
Anhand von Selektoren kann dies ganz einfach in der style.css Datei ablaufen.
Ich möchte Ihnen ein paar gängige Selektoren vorstellen.
Soweit alles verstanden? Dann auf zum nächsten Punkt.
Selektoren auf Elemente eines HTML-Dokumentes anwenden
Nehmen wir nun das oben genannte Beispiel-Dokument erneut zur Hand.
Wir wollen nun diese drei Paragraphen in blauer Schrift anzeigen.
Die dazugehörige CSS-Eigenschaft heißt "color" und kann vordefinierte Konstanten wie z.B red, blue, green, aber auch diverse Farbcode wie z.B #000000 als Werte annehmen.
Anhand der oben genannten Selektoren, können wir die Paragraphen nun auf zwei Wegen selektieren.
Zum Einen mit dem *-Selektor, zum Anderen mit dem A-Selektor.
Haben Sie das direkt gewusst? Dann sind Sie auf einem guten Weg!
Schauen wir uns beide Möglichkeiten an.
Zuerst müssen wir dazu den Aufbau einer solchen CSS-Regel erläutern.
Eine CSS-Regel besteht aus einem Selektor, Eigenschaften und den dazugehörigen Werten, ein möglicher Aufbau wäre also wie folgt dargestellt möglich.
Wir haben nach jedem Statement, was aus dem Paar Eigenschaft und Wert besteht den Fall vorliegen, dass wir dieses Statement mit einem ";" beenden müssen.
Gut nun formulieren wir diesen generellen Aufbau passend zu unserer Aufgabe um.
Beispiel: *-Selektor
Beispiel A-Selektor
Da unser Element hier nicht "A", sondern der Paragraph ist, sieht der A-Selektor wie folgt aus:
Beide Lösungen sind möglich!
Der Unterschied besteht darin, dass wir mit dem *-Selektor jedes Element ansprechen, mit dem A-Selektor (in diesem Fall) nur jeden Paragraphen.
Um den Unterschied deutlich zu machen setzen wir noch ein Div-Container unter den letzten Paragraphen:
Bei dem *-Selektor sehen wir jetzt, dass der Text in diesem Container ebenfalls gefärbt wird, was er hingegen beim A-Selektor nicht wird.
ID- und Klassen Selektoren
Diese Selektoren werden ausführlich in einem weiterführenden Tutorial behandelt.
Daraus folgt, dass wir an dieser Stelle erst einmal eine Pause einlegen und dass Sie das neu erworbene Wissen testen werden.
Bis dahin,
Fabian
in diesem schriftlichen Tutorial, möchte ich Sie dazu einladen, sich mit den Grundzügen (engl. "Basics") von Cascading Style Sheets auseinanderzusetzen.
Dies funktioniert zwar nicht so einfach, als einmal mit dem Finger zu schnipsen, dennoch ist es ziemlich leicht zu erlernen.
Mitbringen sollten Sie vor allem einen ordentlichen Editor (Anmerkung: notepad++), einen fähigen Webbrowser (Anmerkung: Google Chrome), sowie ein gewisses Maß an Interesse und Lernbereitschaft.
Ebenfalls erforderlich ist ein Grundwissen bei dem Erstellen und der Nutzung von (X)HTML Dateien.
Sie bringen diese Anforderung mit? Dann mal los!
Cascading Style Sheets
Cascading Style Sheets dienen dazu, um es simpel auszudrücken, das Design vom eigentlichen Inhalt zu trennen.
Wir lagern dazu sogenannte CSS-Regeln in eine .css Datei ab, welche wir dann in unserer (X)HTML Datei im <head>-Bereich einfügen.
Dies können wir durch folgende Zeile leicht funktionieren lassen:
Bitte beachten Sie, dass Sie bei der Verwendung eines XHTML-Dokuments diesen Tag schließen müssen. Dies können sie folgendermaßen tun:
Die oben genannte Verwendung, sollte nichts neues für Sie darstellen.
Eine kleine Legende zeigt ihnen, wofür diese Attribute stehen:
- rel: Bezeichnet die Beziehung zwischen dem Dokument und der einzubindenden Datei.
- href: Bezeichnet den Pfad inkl. Namen der Datei, welche eingebunden werden soll.
- type: Bezeichnet den MIME-Typ der einzubindenden Datei.
In dem oben genannten Beispiel befindet sich also meine .css Datei in demselben Ordner wie mein HTML-Dokument, und diese .css Datei trägt den Namen "style.css".
Soweit alles verstanden? Prima, dann mal weiter im Text.
Selektoren
Ein Selektor gibt eine oder mehrere Bedinungen vor, welche auf Elemente im HTML-Dokument zutreffen können, und sofern wir Übereinstimmungen haben, werden diese selektierten Bereiche von den CSS-Regeln betroffen.
Als ein einfaches Beispiel möchte ich Ihnen, folgenden Aufbau eines HTML-Dokumentes zeigen:
Anhand eines style-Attributes, welches Ihnen bekannt sein sollte, konnten wir inline diese verschiedenen Paragraphen unterschiedlich formatieren und durch andere Farben visualisieren.
Anhand von Selektoren kann dies ganz einfach in der style.css Datei ablaufen.
Ich möchte Ihnen ein paar gängige Selektoren vorstellen.
- *-Selektor: Selektiert jedes Element - Verwendung: *{ Hier die Anweisungen }
- A-Selektor( Auch E-Selektor genannt
Selektiert - Selektiert jedes Element vom Typ A( oder ggf. E ) - Verwendung: z.B : p { Hier die Anweisungen } - selektiert jeden Paragraphen - .class-Selektor: Selektiert jedes Element der Klasse "class" - Verwendung: .meineKlasse { Hier die Anweisungen }
- #id-Selektor: Selektiert jedes Element mit der ID "id" - Vewendung: #meineID { Hier die Anweisungen }
Soweit alles verstanden? Dann auf zum nächsten Punkt.
Selektoren auf Elemente eines HTML-Dokumentes anwenden
Nehmen wir nun das oben genannte Beispiel-Dokument erneut zur Hand.
Wir wollen nun diese drei Paragraphen in blauer Schrift anzeigen.
Die dazugehörige CSS-Eigenschaft heißt "color" und kann vordefinierte Konstanten wie z.B red, blue, green, aber auch diverse Farbcode wie z.B #000000 als Werte annehmen.
Anhand der oben genannten Selektoren, können wir die Paragraphen nun auf zwei Wegen selektieren.
Zum Einen mit dem *-Selektor, zum Anderen mit dem A-Selektor.
Haben Sie das direkt gewusst? Dann sind Sie auf einem guten Weg!
Schauen wir uns beide Möglichkeiten an.
Zuerst müssen wir dazu den Aufbau einer solchen CSS-Regel erläutern.
Eine CSS-Regel besteht aus einem Selektor, Eigenschaften und den dazugehörigen Werten, ein möglicher Aufbau wäre also wie folgt dargestellt möglich.
Wir haben nach jedem Statement, was aus dem Paar Eigenschaft und Wert besteht den Fall vorliegen, dass wir dieses Statement mit einem ";" beenden müssen.
Gut nun formulieren wir diesen generellen Aufbau passend zu unserer Aufgabe um.
Beispiel: *-Selektor
Beispiel A-Selektor
Da unser Element hier nicht "A", sondern der Paragraph ist, sieht der A-Selektor wie folgt aus:
Beide Lösungen sind möglich!
Der Unterschied besteht darin, dass wir mit dem *-Selektor jedes Element ansprechen, mit dem A-Selektor (in diesem Fall) nur jeden Paragraphen.
Um den Unterschied deutlich zu machen setzen wir noch ein Div-Container unter den letzten Paragraphen:
Bei dem *-Selektor sehen wir jetzt, dass der Text in diesem Container ebenfalls gefärbt wird, was er hingegen beim A-Selektor nicht wird.
ID- und Klassen Selektoren
Diese Selektoren werden ausführlich in einem weiterführenden Tutorial behandelt.
Daraus folgt, dass wir an dieser Stelle erst einmal eine Pause einlegen und dass Sie das neu erworbene Wissen testen werden.
Bis dahin,
Fabian
edit: Formatierung
Von daher sollte er das ganze über htmlentities ausgeben.