CSS
CSS ist für das Design der Website verantwortlich. Jede CSS Anweisung besteht aus einem Ort (z.B. ein Schlafzimmer, um sich das ganze bildlich vorzustellen), einer Eigenschaft dieses Orts (wie Vorhänge, Teppiche) und einem Stil ( wie die Farbe, oder die Größe der Fliesen im Badezimmer). Als einfaches Beispiel, um den Aufbau zu verstehen:
schlafzimmer {
vorhänge: rosa;
teppich: kunstfell;
}
oder:
badezimmer {
fliese: 5cm weiß;
vorhänge: grau;
}
CSS mit HTML verwenden
Ähnlich wie bei einem Haus, hat HTML keine Zimmer, aber dafür Elemente und um deren Stil ( in CSS nennt man das Style) kümmert man sich mit CSS. Um einen Hintergrund in HTML zu ändern macht man folgendes:
p {
background-color: red;
}
zur Erkärung:
p: hier wird durch den Selektor das Element ausgewählt, dem man einen neuen Style verpassen möchte. Hier ist es das <p>-Element, aber ACHTUNG!!! den Namen packt man in CSS nicht in <>.
background-color: Dies ist das Property, mit dem man angibt, dessen Style man festlegen möchte. Hier ist es das background-color-Property des <p>-Elements, das die Hintergrundfarbe steuer.
Zwischen dem Property und dem Wert steht ein Doppelpunkt.
red: durch red, wird die Hintergrundfarbe auf rot gesetzt. Am Ende wird ein Semikolon gesetzt.
Alle Styles für das <p>-Element werden in die geschweiften Klammern gepackt.
Das ganze nennt man dann eine Regel.
Wenn man dem <p>- Element noch einen Rahmen geben will, macht man das wie folgt:
p {
background-color: red;
border: 1px solid gray;
}
Der Rahmen ist 1 Pixel breit (1px) und grau (gray).
Wie baut man CSS in HTML ein?
so baut man das Ganze in den Code ein. Die CSS Regeln kommen genau zwischen die <style>- Start- und End-Tags.
Die Überschriften ändern
Um die Überschriften zu ändern, muss man als Selektor h1, h2, und und und auswählen und anschließend, genau wie bei der background-color, definieren, was man mit den Elementen machen möchte. Hier soll die Schrift ohne Serifen sein und die definierte Farbe ist grau.
Um den Code ein wenig zu verkürzen, kann man die Regeln auch für zwei Selektoren innerhalb einer Klammer definieren:
Wenn man eine der Überschriften unterstreichen möchte, macht man das z.B. so:
Es ist egal, wie viele Regeln man für ein Element aufstellt. Jede Regel wird den vorangehenden hinzugefügt.
Selektoren
Um das mit den Selektoren ein wenig besser zu verstehen, zeige ich es anhand eines Hierarchie-Baumes:
Der h1, h2 Selektor findet alle h1 und h2 Elemente innerhalb des Codes.
Zur kurzen Erklärung: man kann nur die Elemente im Body Styles geben, deshalb ist das <head>-Element und seine Kinder ausgelassen.
Was macht man wenn man Seiten hat die verlinkt sind?
Damit man nicht jede einzelne Seite einzeln bei neuen Veränderungen bearbeiten muss, gibt es hier einen Trick:
- man packt die Regeln für die Hauptseite in eine CSS-Datei
- man erstellt in dem HTML-Code der Hauptseite einen externen Link auf die CSS Datei
- Den gleichen externen Link erstellt man dann innerhalb dem Code der „Nebenseiten“
Die CSS Datei erstellen
Die CSS Datei muss in den selben Ordner gepackt werden, wie auch der HTML-Code der Neben-, und der Hauptseite. Der Ordner in dem sich dann alles befindet, nennt man Wurzelverzeichnis.
Beim kopieren der Regeln ist zu beachten, dass die <style>-Tags herausgenommen werden.
Aus dem HTML-Code auf das externe CSS zugreifen
Hierzu brauchen wir das HTML-Element <link>:
so könnte das dann aussehen, wenn die CSS Datei „Programmieren.css“ heißen würde. Die <style>-Elemente braucht man nicht mehr und man kann sie somit löschen.
Das <link>-Element wird verwendet, um externe Informationen einzubinden. Dieses ist ein leeres Element und hat somit kein Ende-Tag.
Der Typ der Information ist „text/css“, das heißt ein CSS-Stylesheet.
Das Attribut rel gibt an, in welcher Beziehung die Information zu der HTML-Datei steht. In diesem Beispiel bindet man ein Stylesheet ein, also verwendet man den Wert“stylesheet“.
Und das Stylesheet befindet sich in dem href „Programmieren.css“.
Bei den Nebenseiten, muss man nun auch einen link auf das externe Stylesheet schreiben. Je nachdem, in welchem Ordner sich die Nebenseiten befinden, kann es sein, dass man anstatt nur „Programmieren.css“, „../Programmieren.css“ schreiben muss. Dies kommt vor, wenn sich die Nebenseiten in einem Ordner innerhalb des Wurzel-Ordners befinden, dann muss man einen relativen Pfad angeben.
Zur Veranschaulichung, wie ich das meine nehme ich das Beispiel aus meiner Vorlesung:
Hier müsste man in den Nebenseiten „elixir.html“ und „wegbeschreibung.html“ den relativen Pfad:“../bar.css“ verwenden, da sich die beiden Dateien nochmals in einem Ordner innerhalb des Wurzel-Ordners befinden.
SOOO das wars mit HTML 4a und jetzt geht es weiter mit HTML 4b
Vererbung
So wie wir Menschen unsere Haarfarbe, oder Augenfarbe von unseren Eltern vererbt bekommen, so können Elemente Styles von ihren Eltern erben. Wenn man z.B. das font-family-Property für den Selektor p wählen, dann erben das auch die Elemente die darunter stehen. Aber ACHTUNG!! Es werden nicht alle Styles vererbt. In der Regel werden alle Styles vererbt, die beeinflussen, wie der Text aussieht. Rahmen-Properties werden nicht vererbt. Um das ganze ein wenig klarer darzustellen, folgt ein Baum, der zeigt an welche Elemente der p Selektor vererbt, wenn man bei ihm das font-family-Property setzt:
Wenn man das font-family-Property in das <body>-Element verschiebt, vererbt sich das an die folgenden Elemente:
Vererbung überschreiben
Wenn man z.B. das Property font-family im <body>-Element eingerichtet hat und man möchte nicht für alle Elemente eine serifenlose Schrift benutzen, dann kann man die Vererbung überschreiben. Das geht ganz einfach: man schreibt einfach für das Element, das eine Ausnahme sein soll, eine extra Regel. Also in dem Beispiel das ich grade genannt habe also:
Hier ist wichtig zu wissen, dass CSS immer die spezifischere Regel verwendet.Wenn man also eine Regel für den body hat und eine spezifischere für das <em>-Element, so wird die spezifischere genommen.
Kommentare in CSS: Kommentare stehen zwischen /* und */.
Was passiert jetzt, wenn man einzelne Absätze verschieden gestalten möchte?
Dann benutzt man Klassen! Wenn man HTML und CSS verwendet, kann man eine lasse von Elementen definieren und dann einen Style auf alle Elemente verwenden, die zu einer Klasse gehören.
Was ist eine Klasse?
Könnt ihr euch noch an die Cubs erinnern, die man in der Grundschule gegründet hat? in denen musste man bestimmten Regeln zustimmen und so ist das auch bei einer Klasse. Die Elemente stimmen (zwar unfreiwillig durch den Programmierer) den Style-Standards ihrer Klasse zu.
Die Erstellung einer Klasse hat zwei Schritte: Erst gibt man dem Element eine Klasse, indem man dem Start-Tag im HTML ein class-Attribut hinzufügen, und dann wählt man diese Klasse im CSS. Zum Beispiel:
Einen Selektor für die Klasse erstellen
In CSS erstellt man dann eine Klasse und wählt ein Element in dieser Klasse, indem man einen Klassenselektor schreibt:
Jetzt muss man nur noch jedem Element, dessen Text grün dargestellt werden soll, das entsprechende class-Attribut hinzufügen.
und wenn man das mit allen <blockquote>-Elementen machen möchte?
Dann macht man folgendes in CSS:
und was wenn alle Elemente innerhalb der Klasse den gleichen Style haben sollen?
dann schreibt man nicht einen riesigen Selektor, sondern schreibt die Regel ganz einfach so:
Wie Menschen auch in mehreren Clubs, oder Vereinen Mitglied sein können, so können Elemente auch zu mehreren Klassen gehören. Wenn ein Element (z.B. das <p>-Element) zu mehreren Klassen gehören soll, dann gibt man alle Klassennamen im Wert des class-Attributs an. Die Reihenfolge ist dabei egal.
Man verwendet mehrere Klassen, um einem Element Styles zu geben, die man in verschiedenen Klassen definiert hat.
Was ist, wenn ein Element durch mehrere Selektoren ausgewählt wird?
Hier kann es dann zu einem Konflikt kommen, denn es gibt mehrere Regeln für ein Element der wieder so gelöst wird, dass die spezifischere Regel für ein Element zählt. Hier ein Beispiel:
Wenn alle Selektoren gleich spezifisch sind, dann verwendet man die Ordnung der Selektoren im Stylesheet. Das heißt, man verwendet die Regel, die in der CSS Datei als letzte ausgeführt wird.
E-Portfolio Annick 