Arbeitsblatt: CSS-Einführung

CSS Sinn und Zweck CSS ermöglicht das Designen der Webseiten (Schriftarten, Farben, Layout etc.) HTML Inhalte und Strukturierung (durch Tags) CSS Design, Aussehen CSS in HTML einbinden Absatz mit blauem Text Absatz mit blauem Text, nur Grossbuchstaben und fetter Schrift Einige Eigenschaften color:blue; Schriftfarbe backgroundcolor:blue; Hintergrundfarbe fontsize:10pt; Schriftgrösse fontweight:bold; fetter Text CSS für ganze Seiten Zweck: Es muss z.B. nicht jeder einzelne Absatz mit Eigenschaften (z.b. Schriftgrösse) ausgestattet werden. Es können im HeadBereich allgemeine Eigenschaften definiert werden. Zum Beispiel können alle Absätze mit dem gleichen Design ausgestattet werden. CSSEigenschaften Inhalt der Seite CSSEigenschaften für die ganze Seite definieren Der folgende Code ist ein Beispiel, welches im Bereich einer Seite eingefügt werden muss, um alle Absätze (p) blau, mit Grossbuchstaben und fett zu gestalten. Seite 1 von 4 p color: blue; texttransform: uppercase; fontweight: bold; Klassen in CSS Wenn mehrere verschiedene Teile der Webseite (zum Beispiel ein . und ein .Element) mit einem gemeinsamen Design ausstatten möchte, dann kann man Klassen benutzen. Klassen werden im headTeil mit einem Punkt eingeleitet. (z.B. .blau) Alles aus dem BodyTeil, welches die Eigenschaften einer bestimmten Klasse annehmen soll, wird mit class. bezeichnet. (z.B. .) Wie die Klassen heissen (in diesem Beispiel „blau) kann selbst bestimmt werden Wir wollen, dass beide Elemente im BodyTag mit blauer Schriftfarbe geschrieben werden: .blau color: blue; Ein fetter, blauer Text Ein kursiver, blauer Text Verschachtelung von CSSTags schwarzer fetter Text schwarzer fetter Text in Absatz Wir wollen alle fetten Texte blau, aber nur wenn sie in Absätzen sind: b color:blue; Auch hier sind Klassen möglich. Zum Beispiel: b.blau . Auslagerung der StyleDefinitionen (nicht prüfungsrelevant) Schönes Programmieren ist, wenn das Design ganz vom Inhalt getrennt ist. Daher gibt es die Möglichkeit, alles was im HeadBereich zwischen und steht, in ein Seite 2 von 4 sogenanntes Stylesheet zu schreiben. Das Stylesheet ist eine separate Datei mit der Endung *.css. (z.B. styles.css) Das Stylesheet wird auf der eigentlichen Seite mit der folgenden Zeile im HeadBereich eingebunden: (ohne EndTag) Farben Farben wie zum Beispiel die Schrift oder Hintergrundfarbe können mit dem englischen Namen angegeben werden (z.B. green, blue oder black) oder sie können genau definiert werden. Dazu wird ein Hexadezimalcode benutzt. Dieser besteht aus einem und einer sechsstelligen Nummer, welche auf der Webseite ausgesucht werden kann. Danach sieht eine dunkelviolette Eigenschaft so aus: color: #1b001b; CSS box model Beim CSS box model handelt es sich um ganz normales CSS. Das Modell hilft dem Programmierer, genau zu berechnen, wie gross die Aussen und Innenabstände, die Rahmen, sowie Breite und Höhe sein müssen bzw. dürfen, damit das Element genau so erscheint, wie es der Programmierer will. Die gesamte Breite bzw. Höhe eines Elements berechnet sich folgendermassen: width height padding border margin D.h. width Breite und height Höhe Ein Menüpunkt, der zum Beispiel width:40px; border:0; margin:5px; padding:5px; hat, muss mindestens 60px Platz haben, ansonsten kommt es zu unschönen Umbrüchen. ist ein HTMLTag, der eine Art „Raum oder „Container auf der Webseite darstellt. Ihn diesen Container kann man seinen Inhalt packen. Der Vorteil eines Containers spätestens beim Positionieren der Elemente deutlich. Enthält ein Container ein Menü sowie einen Copyrighthinweis, ein anderer Container den Inhalt (bestehend aus einem Titel sowie mehreren Absätzen ), so Seite 3 von 4 muss man nur die beiden Container positionieren. Der sich im Container befindende Inhalt wird so automatisch mit positioniert, was sehr viel einfacher ist, als jedes Element einzeln zu positionieren. Positionieren Das Positionieren von Elementen erfolgt durch CSS und wird ähnlich wie bei der Schriftgrösse gemacht. Um ein Element zu positionieren muss zuerst die Eigenschaft position auf absolute (position:absolute;) gesetzt werden. Positioniert wird mit den CSSEigenschaften top, left und right. Für die Eigenschaften top, left und right können Werte in Form von Pixeln oder prozentualen Angaben verwendet werden. top Abstand von oberem Bildschirmrand (z.B. top:10px;) left Abstand von unterem Bildschirmrand (z.B. left:10%;) right Abstand von rechtem Bildschirmrand (z.B. right:20px;) Beispiel: .kopf position:absolute; left:20%; width:60%; right:20%; top:10px; height:70px; .inhalt position:absolute; left:20%; width:60%; right:20%; top:90px; height:450px; In diesem Beispiel wird ein Element der Klasse kopf 20% der Bildschirmbreite vom linken und rechten Rand, sowie 10px vom oberen Rand entfernt positioniert. Die Höhe des Elements der Klasse kopf wird auf 70px festgelegt. Das Element der Klasse inhalt wird mit 10px Abstand an das obere Element genau gleich positioniert. Dazu muss zuerst berechnet werden, wie weit das Element der Klasse kopf in den Bildschirm hineinragt. Das wären 10px Abstand von oben 70px Höhe 10px SollAbstand zwischen den Elementen 90px Abstand von oben. Das Element der Klasse inhalt wird 450px hoch sein. Seite 4 von 4