CSS Tutorial - Inhaltsverzeichnis

Transkript

1 CSS Tutorial - Inhaltsverzeichnis - HTML.net 1 von :31 CSS Tutorial - Inhaltsverzeichnis Einführung Eine kurze Einführung in das Tutorial und was Sie lernen können werden. Lektion 1: Was ist CSS? Ein klein wenig darüber, warum CSS entwickelt wurde und warum es clever ist, CSS anstatt HTML beim layouten und designen zu verwenden. Lektion 2: Wie funktioniert CSS? Lernen Sie die grundlegende Syntax und erstellen Sie Ihr erstes Stylesheet. Lektion 3: Farben und Hintergründe Lernen Sie, wie sie Ihrer Webseite Farben und Hintergrundfarben hinzufügen und wie Sie Hintergrundbilder verwenden. Lektion 4: Zeichensätze (Fonts) In dieser Lektion werden Sie etwas über Schriftarten erfahren und wie Sie diese mit Hilfe von CSS einsetzen können. Lektion 5: Text In dieser Lektion werden Sie in die unglaublichen Möglichkeiten eingeführt, die Ihnen CSS bietet, um Ihren Text zu layouten. Lektion 6: Links Wie können Sie Ihren Links tolle und nützliche Effekte geben und wie arbeitet man mit Pseudoklassen. Lektion 7: Identifikation und Gruppierung von Elementen (class und id) Ein genauer Blick auf die Verwendung von class und id, um Eigenschaften für bestimmte Elemente festzulegen. Lektion 8: Gruppierung von Elementen (span und div) Ein genauer Blick auf die Verwendung von span und div, weil genau diese beiden HTML-Elemente von zentraler Bedeutung für CSS sind. Lektion 9: Das Box-Modell Das Box-Modell in CSS beschreibt Kästen, die um HTML-Elemente herum generiert werden. Lektion 10: Das Box-Modell - Außen- und Innenabstand (margin und padding) Ändern Sie die Präsentation von Elementen durch den Einsatz der Eigenschaften margin und padding. Lektion 11: Das Box-Modell - Umrandung (border) Lernen Sie die endlosen Möglichkeiten kennen, wenn Sie Umrandungen auf Ihren Seiten einsetzen. Lektion 12: Das Box-Modell - Breite und Höhe In dieser Lektion schauen wir uns genauer an, wie einfach man Breite und Höhe eines Elementes definieren kann. Lektion 13: Schwimmende Positionierung von Elementen (float) Ein Element kann mit Hilfe der Eigenschaft float auf der linken oder rechten Seite eines Dokumentes positioniert werden. Lektion 14: Positionierung von Elementen Mit der CSS-Positionierung können Sie ein Element an einer beliebigen Stelle auf Ihrer Seite platzieren. Lektion 15: Ebene auf Ebene mit z-index (Layer) In dieser Lektion zeigen wir, wie sich verschiedene Elemente überlappen können. Lektion 16: Web-Standards und Validierung Diese letzte Lektion ist über W3C-Standards und wie Sie prüfen können, ob Ihr CSS korrekt ist.

2 Einführung - HTML.net 1 von :32 Einführung Cascading Style Sheets (CSS) sind ein fantastisches Werkzeug, um Ihre Webseiten zu layouten, ihnen ein Aussehen zu verpassen. Sie können viel Zeit sparen und es eröffnen sich völlig neue Wege, Webseiten zu designen. CSS ist ein Muss für jeden, der sich mit Webdesign beschäftigt. Mit diesem Tutorial können Sie in ein paar Stunden mit CSS beginnen. Es ist einfach zu verstehen und alle nötigen Techniken werden erläutert. CSS erlernen macht Spaß. Denken Sie daran, dass Sie sich genügend Zeit nehmen und mit allem, was Sie kennenlernen werden, experimentieren, während Sie das Tutorial durcharbeiten Um CSS zu nutzen, sollten Sie über grundlegende HTML-Kenntnisse verfügen. Sollten Sie mit HTML nicht vertraut sein, bearbeiten Sie bitte zuerst unser HTML-Tutorial, bevor sie hier mit CSS weitermachen. Welche Software benötige ich? Bitte vermeiden Sie die Benutzung von Software wie z.b. FrontPage, DreamWeaver oder Word für dieses Tutorial. Diese Art von Software kann Ihnen beim Erlernen von CSS nicht behilflich sein. Im Gegenteil, sie wird Sie einschränken und die Lernkurve signifikant abflachen. Alles was Sie benötigen ist ein einfacher kostenloser Texteditor. Mit Microsoft Windows wird z.b. ein Programm ausgeliefert, welches Notepad heißt. Dieses finden Sie normalerweise im Startmenü unter Programme Zubehör. Alternativ dazu können Sie natürlich auch einen vergleichbaren Editor verwenden, wie z.b. Pico unter Linux oder Simple Text auf einem Macintosh. Ein einfacher Texteditor ist ideal für das erlernen von HTML und CSS, weil dieser den Code, welchen Sie schreiben, in keiner Weise beeinflußt. Aus diesem Grunde können Erfolge oder Mißerfolge nur Ihnen zugeschrieben werden und nicht der Software. Sie können jeden Browser nutzen, um dieses Tutorial zu bearbeiten. Ein Hinweis sei uns noch erlaubt: Halten Sie Ihren Browser immer up-to-date und benutzen die aktuelle Version. Ein Browser und ein einfacher Texteditor ist alles was Sie brauchen. Los geht s! << Inhaltsverzeichnis Lesson 1: Was ist CSS? >>

3 Lesson 1: Was ist CSS? - HTML.net 1 von :36 Lektion 1: Was ist CSS? Vielleicht haben Sie schon einmal von CSS gehört allerdings ohne zu wissen, was sich dahinter verbirgt. In dieser Lektion werden Sie erfahren, was CSS ist und was CSS für Sie tun kann. CSS ist das Akronym für Cascading Style Sheets. Was kann ich mit CSS machen? CSS ist eine Stilsprache, die das Aussehen von HTML-Dokumenten definiert. CSS kann man z.b. zum festlegen von Schriftarten, Farben, Rändern, Linien, Höhen, Breiten, Hintergrundbildern, für fortgeschrittener Positionierung und viele andere Sachen benutzen. Warten Sie ab! HTML kann zum layouten von Webseiten (miß-)braucht werden. Aber CSS bietet mehr Möglichkeiten und ist zudem viel genauer und ausgereifter. CSS wird von allen Browsern unterstützt. Nach ein paar Lektionen dieses Tutorials werden Sie in der Lage sein, Ihre eigenen Stylesheets mit CSS zu erstellen und Ihren Webseiten ein neues großartiges Aussehen verleihen. Wo ist der Unterschied zwischen CSS und HTML? Mit HTML werden Inhalte strukturiert. Mit CSS wird der strukturierte Inhalt formatiert. Okay, es klingt ein bißchen technisch und verwirrend. Aber bitte lesen Sie weiter. Alles wird sehr bald einen Sinn ergeben. Vor langer langer Zeit, Madonna war Jungfrau und ein Typ namens Tim Berners Lee erfand das Internet, da wurde HTML wirklich nur genutzt um Text zu strukturieren. Ein Autor konnte seinen Text markieren, indem er festlegte das ist eine Überschrift oder das ist ein Textabsatz. Dies wurde mit HTML-Tags wie <h1> und <p> bewerkstelligt. Als das Internet populärer wurde, versuchten Designer nach Möglichkeiten zu suchen, den Online-Dokumenten Layouts zu verpassen. Um diesem Rechnung zu tragen, erfanden die Browserhersteller (zu der Zeit Netscape und Microsoft) neue HTML-Tags. So z.b. <font>, welcher von den ursprünglichen Tags abwich, da er ein Layoutmittel war und kein Strukturierungswerkzeug. Dies führte auch zu einer Situation, in der eigentliche Struktur-Tags, wie z.b. <table>, mehr und mehr für das Layout von Seiten mißbraucht wurden, anstatt dem Geschriebenen Struktur zu verleihen. Viele neue Layout-Tags, wie <blink> wurden nur von einem Browsertyp unterstützt. Mitteilungen wie: Sie benötigen Browser X, um diese Seite zu sehen bzw. Optimiert für Browser X waren auf immer mehr Webseiten zu lesen. CSS wurde erfunden um diese Situation zu beheben, indem es Webdesignern mit ausreichenden Gestaltungsmöglichkeiten ausstattete, die von allen Browsern unterstützt wurden. Gleichzeitig macht die Trennung von Aussehen und Inhalt einer Seite die Pflege selbiger viel einfacher. Welche Vorteile bringt mir CSS? CSS war eine Revolution im Webdesign. Die konkreten Vorteile sind u.a.: Kontrolle über das Layout vieler Webseiten aus einer einzigen Style-Sheet-Datei heraus; präzisere Kontrolle über das Layout; verschiedene Layouts für verschiedene Medientypen (Bildschirmanzeige, Druck etc.); eine Vielzahl von fortgeschrittenen und anspruchsvolle Techniken.

4 Lesson 1: Was ist CSS? - HTML.net 2 von :36 In der nächsten Lektion schauen wir uns etwas genauer an, wie CSS eigentlich funktioniert und womit man am besten beginnt. << Einführung Lesson 2: Wie funktioniert CSS? >>

5 Lesson 2: Wie funktioniert CSS? - HTML.net 1 von :33 Lektion 2: Wie funktioniert CSS? In dieser Lektion werden Sie lernen, Ihr erstes Style-Sheet zu erstellen. Sie werden das Grundmodell von CSS kennenlernen und wir werden zeigen, welche Codezeilen notwendig sind, um CSS in einem HTML-Dokument zu verwenden. Viele der Eigenschaften, die in Cascading Style Sheets (CSS) verwendet werden, ähneln denen von HTML. Wenn Sie bisher HTML für Layoutzwecke verwendet haben, werden Sie wahrscheinlich viele Codes wiedererkennen. Schauen wir uns ein konkretes Beispiel an. Die grundlegende CSS-Syntax Nehmen wir an, wir möchten ein schönes Rot als Hintergrundfarbe für unsere Webseite: In HTML hätten wir es so gemacht: <body bgcolor="#ff0000"> Mit CSS erreichen wir das gleiche Resultat so: body {background-color: #FF0000; Wie Sie sehen, sind die Codes in HTML und CSS mehr oder weniger identisch. Das soeben gezeigte Beispiel zeigt Ihnen auch das grundlegende CSS-Modell: Aber wo soll der CSS-Code hin, werden Sie jetzt fragen. Genau dazu kommen wir jetzt. CSS im HTML-Dokument anwenden Es gibt drei Möglichkeiten, wie Sie CSS in einem HTML-Dokument verwenden können. Diese Methoden werden alle nachfolgend beschrieben. Wir empfehlen, dass Sie sich auf die letzte der drei Möglichkeiten konzentrieren. Methode 1: In-line (Attribut-Stil) Eine Möglichkeit CSS in HTML zu verwenden, ist das Attribut style. Auf dem obigen Beispiel mit dem roten Seitenhintergund aufbauend, kann dieser wie folgt eingefügt werden:

6 Lesson 2: Wie funktioniert CSS? - HTML.net 2 von :33 <html> <head> <title>example</title> </head> <body style="background-color: #FF0000;"> <p>das ist eine rote Seite.</p> </body> </html> Methode 2: In-document (Tag-Stil) Ein weiterer Weg ist, die CSS-Codes über den HTML-Tag <style> einzubinden, z.b. so: <html> <head> <title>example</title> <style type="text/css"> body {background-color: #FF0000; </style> </head> <body> <p>das ist eine rote Seite.</p> </body> </html> Methode 3: Extern (Verweis auf ein Style Sheet) Die von uns empfohlene Methode ist, auf ein sog. externes Stylesheet zu verweisen. In alles Beispielen des Tutorials werden wir diese Methode anwenden. Ein externes Stylesheet ist einfach eine Textdatei mit der Endung.css. Wie jede andere Datei auch, können Sie das Stylesheet auf Ihrem Webserver oder Ihrer Festplatte speichern. Nehmen wir an, Ihr Stylesheet heißt style.css und befindet sich im Ordner style. Bildlich dargestellt, sieht das wie folgt aus: Der Trick bei dem Ganzen ist nun, aus dem HTML-Dokument (default.htm) auf das Stylesheet (style.css) zu verweisen. Solch ein Verweis kann mit einer Zeile HTML-Code bewerkstelligt werden: <link rel="stylesheet" type="text/css" href="style/style.css" /> Sehen Sie, der Pfad zu unserem Stylesheet wird mit Hilfe des Attributes href angegeben. Die Codezeile muss in den Kopfteil des HTML-Dokumentes, zwischen die <head> und </head>-tags, eingefügt werden. Etwa so: <html> <head> <title>mein Dokument</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body>

7 Lesson 2: Wie funktioniert CSS? - HTML.net 3 von :33... Dieser Verweis gibt dem Browser vor, dass er das Layout aus der angegebenen CSS-Datei verwenden soll, wenn er das HTML-Dokument darstellt. Das wirklich clevere an dieser Lösung ist, dass verschiedene HTML-Dokumente auf dieses gleiche Stylesheet verweisen können. Mit anderen Worten, eine CSS-Datei kann verwendet werden, um bei vielen HTML-Dokumenten das Layout festzulegen. Setzen wir, was soeben gelernt haben, praktisch um. Probieren Sie selbst! Öffnen Sie Notepad (bzw. den Texteditor Ihrer Wahl) und erstellen Sie zwei Dateien ein HTML-Dokument und eine CSS-Datei mit folgenden Inhalten: default.htm <html> <head> <title>mein Dokument</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>mein erstes Stylesheet</h1> </body> </html> style.css body { background-color: #FF0000; Nun speichern Sie beide Dateien in denselben Ordner. Denken Sie daran, die Dateien mit Ihren richtigen Endungen (.css bzw..htm ) zu speichern. Öffnen Sie die default.htm in Ihrem Browser und Sie sehen, dass die Seite einen roten Hintergrund hat.

8 Lesson 2: Wie funktioniert CSS? - HTML.net 4 von :33 Herzlichen Glückwunsch! Sie haben soeben Ihr erstes Stylesheet erstellt. Fahren Sie mit der nächsten Lektion fort, in der wir einen Blick auf einige der Eigenschaften in CSS werfen werden. << Lesson 1: Was ist CSS? Lesson 3: Farben und Hintergründe >>

9 Lesson 3: Farben und Hintergründe - HTML.net 1 von :33 Lektion 3: Farben und Hintergründe In dieser Lektion werden Sie lernen, wie Sie Ihrer Webseite Farben und Hintergrundfarben geben. Wir werden auch fortgeschrittenere Methoden betrachten, mit denen man Hintergrundbilder positioniert und kontrolliert. Die folgenden CSS-Eigenschaften werden erklärt: color background-color background-image background-repeat background-attachment background-position background Vordergrundfarbe: die Eigenschaft color Die Eigenschaft color beschreibt die Vordergrundfarbe (i.allg. die Schriftfarbe) eines Elementes. Nehmen wir an, wir möchten, dass alle Überschriften in einem Dokument rot sind. Alle Überschriften sind mit dem HTML-Element <h1> markiert. Der nachfolgende Code setzt die Farbe von <h1>-elementen auf rot. h1 { color: #ff0000; Farben können als Hexadezimalwerte, wie im obigen Beispiel (#ff0000), mit dem jeweiligen englischen Farbnamen ( red ) oder als RGB-Werte (rgb(255,0,0)) angegeben werden. Hintergrundfarbe: die Eigenschaft background-color Die Eigenschaft background-color beschreibt die Hintergrundfarbe eines Elementes. Das Element <body> enthält jeglichen Inhalt eines HTML-Dokumentes. Darum sollte, um die Hintergrundfarbe der ganzen Seite zu ändern, die Eigenschaft background-color dem <body>-element zugewiesen werden. Sie können auch anderen Elementen, wie z.b. Überschriften oder normalem Text, eine Hintergrundfarbe zuweisen. Im folgenden Beispiel sind dem <body>- und den <h1>-elementen verschiedene Hintergrundfarben zugewiesen. body { background-color: #FFCC66; h1 { color: #990000; background-color: #FC9804;

10 Lesson 3: Farben und Hintergründe - HTML.net 2 von :33 Beachten Sie, dass wir dem Element <h1> zwei Eigenschaften zugewiesen haben und diese mit einem Semikolon voneinander getrennt haben. Hintergrundbilder: die Eigenschaft background-image Die CSS-Eigenschaft background-image wird benutzt, um ein Hintergrundbild einzufügen. Als Beispiel für ein Hintergrundbild, verwenden wir den Schmetterling. Sie können sich die Grafik herunterladen, um sie auf Ihrem Rechner zu verwenden (Rechtsklick auf das Bild und dann Bild speichern als auswählen). Sie können natürlich auch jedes andere Bild, das Ihnen gefällt, verwenden. Um das Bild mit dem Schmetterling als Hintergrundbild auf Ihrer Webseite einzubinden, müssen Sie einfach nur dem <body> die Eigenschaft background-image zuweisen und den Ort des Bildes angeben. body { background-color: #FFCC66; background-image: url("butterfly.gif"); h1 { color: #990000; background-color: #FC9804; Achtung: Bitte achten Sie darauf, wie wir den Speicherplatz des Bildes angegeben haben. url("butterfly.gif") bedeutet, dass sich das Bild im gleichen Ordner wie das Stylesheet befindet. Sie können auch auf Bilder in anderen Ordnern oder gar irgendwo im Internet verweisen, indem Sie url("../images/butterfly.gif") oder die volle Adresse des Bildes url(" verwenden. Wiederholung des Hintergrundbildes: die Eigenschaft background-repeat Haben Sie im obigen Beispiel bemerkt, dass sich standardmäßig der Schmetterling sowohl horizontal als auch vertikal wiederholt, bis der ganze Bildschirm bedeckt ist? Die Eigenschaft background-repeat kontrolliert

11 Lesson 3: Farben und Hintergründe - HTML.net 3 von :33 dieses Verhalten. In der folgenden Tabelle sehen Sie die vier verschiedenen Werte, die background-repeat annehmen kann, erläutert. Wert Beschreibung Beispiel background-repeat: repeat-x Das Bild wird horizontal wiederholt background-repeat: repeat-y Das Bild wird vertikal wiederholt background-repeat: repeat Das Bild wird sowohl horizontal als auch vertikal wiederholt background-repeat: no-repeat Das Bild wird nicht wiederholt Um z.b. die Wiederholung des Hintergrundbildes zu verhindern, sollte unser Code wie folgt aussehen: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; h1 { color: #990000; background-color: #FC9804; Hintergrundbild fixieren: die Eigenschaft backgroundattachment Die Eigenschaft background-attachment legt fest, ob sich ein Hintergrundbild mitscrollen läßt oder nicht. Ein fixiertes Hintergrundbild läßt sich von einem Leser nicht mit dem Text scrollen, währenddessen sich ein nicht fixiertes zusammen mit dem anderen Inhalt der Seite nach oben aus dem Bild schieben läßt. Die folgende Tabelle zeigt die zwei verschiedenen Möglichkeiten für die Eigenschaft background-attachment. Klicken Sie auf die Beispiele, um den Unterschied zwischen scrollbar und fixiert zu sehen. Wert Beschreibung Beispiel background-attachment: scroll Das Bild scrollt mit der Seite - nicht fixiert background-attachment: fixed Das Bild ist fixiert Im nachfolgenden Code ist das Hintergrundbild fixiert. body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; h1 { color: #990000; background-color: #FC9804;

12 Lesson 3: Farben und Hintergründe - HTML.net Positionieren des Hintergrundbildes: die Eigenschaft background-position Standardmäßig wird das Hintergrundbild in der oberen linken Ecke das Bildschirmes festgesetzt. Mit der Eigenschaft background-position können Sie dies ändern und das Bild frei nach Ihren Wünschen auf dem Bildschirm positionieren. Es gibt mehrere Wege, dem background-position Werte zuzuweisen. Aber alle haben die Gemeinsamkeit, dass sie als ein Paar Koordinaten angegeben sind. Der Wert 100px 200px z.b. positioniert das Hintergrundbild im Browserfenster 100 Pixel von der linken Seite und 200 Pixel von oben. Diese Koordinaten können als Prozentwert der Bildschirmbreite, feste Größen (Pixel, Zentimeter usw.) oder mit den Worten top (oben), bottom (unten), center (zentriert), left (links) und right (rechts) angegeben werden. Die folgende Darstellung verdeutlicht das Prinzip: In der folgenden Tabelle sehen Sie einige Beispiele. Wert Beschreibung Beispiel background-position: 2cm 2cm background-position: 50% 25% background-position: top right Das Bild befindet sich 2 cm vom linken und 2 cm vom oberen Rand der Seite entfernt Das Bild ist zentriert und ein Viertel vom oberen Rand entfernt Das ist ist in der oberen rechten Ecke der Seite positioniert Beispiel anzeigen Beispiel anzeigen Beispiel anzeigen Das nachfolgende Codebeispiel positioniert das Hintergrundbild in der unteren rechten Ecke: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; 4 von :33

13 Lesson 3: Farben und Hintergründe - HTML.net 5 von :33 background-position: right bottom; h1 { color: #990000; background-color: #FC9804; Kombination der Hintergrundeigenschaften: die Eigenschaft background Die Eigenschaft background ist eine Abkürzung für alle Eigenschaften aus dieser Lektion (außer color). Mit background können Sie mehrere Eigenschaften in eine zusammenfassen und so Ihr Stylesheet verkürzen und leichter lesbar machen. Schauen Sie z.b. diese fünf Zeilen an: background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; Bei Verwendung von background kann der gleiche Effekt mit nur einer Codezeile erreicht werden: background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom; Die Reihenfolge ist dabei wie folgt: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] Wird eine Eigenschaft ausgelassen, wird automatisch der Standardwert der jeweiligen Eigenschaft eingesetzt. Werden z.b. background-attachment und background-position aus dem Beispiel entfernt: background: #FFCC66 url("butterfly.gif") no-repeat; werden diese beiden Eigenschaften auf ihre Standardwerte (in unserem Falle scroll und top left) gesetzt. Zusammenfassung: In dieser Lektion haben Sie bereits neue Techniken gelernt, deren Umsetzung in HTML so nicht möglich wäre. Der Spaß geht in der nächsten Lektion weiter, in der wir die breite Palette an Möglichkeiten behandeln, was

14 Lesson 3: Farben und Hintergründe - HTML.net 6 von :33 man mit CSS und Schriften (fonts) alles machen kann. << Lesson 2: Wie funktioniert CSS? Lesson 4: Schriftarten (Fonts) >>

15 Lesson 4: Schriftarten (Fonts) - HTML.net 1 von :33 Lektion 4: Zeichensätze (Fonts) In dieser Lektion werden Sie mehr darüber erfahren, wie Zeichensätze mit Hilfe von CSS eingebunden werden können. Wir werden auch zeigen, wie man dem Problem begegnen kann, dass eine bestimmte (besondere) Schriftart, welche Sie für Ihre Webseite ausgesucht haben, nicht angezeigt wird, wenn auf dem betreffenden Rechner selbige Schriftart nicht installiert ist. Die folgenden CSS-Eigenschaften werden wir anschauen: font-family font-style font-variant font-weight font-size font Zeichensatzfamilie: die Eigenschaft font-family Die Eigenschaft font-family wird verwendet, um eine priorisierende Liste der Zeichensätze anzugeben, in der ein bestimmtes Element oder eine Webseite angezeigt werden soll. Wenn der erste Zeichensatz nicht auf dem Computer, mit dem die Seite betrachtet wird, installiert ist, wird der nächstfolgende probiert, bis ein vorhandener bzw. passender Zeichensatz gefunden ist. Es gibt zwei Arten, wie man Zeichensätze kategorisieren kann: Schriftfamilien und generische (gattungsmäßige) Familien. Die beiden Ausdrücke werden nachfolgend erklärt. Schriftfamilien Beispiele für eine Schriftfamilie (oft auch nur Schriftart oder font genannt) sind z.b. Arial, Times New Roman oder Tahoma. generische Familien Generische (oder gattungsmäßige) Familien können wohl am besten als Gruppen von Schriftartfamilien beschrieben werden, die ein ähnliches Aussehen haben. Als Beispiel sei hier sans-serif genannt, welches Schriftarten umfaßt, die keine Füßchen haben. Der Unterschied kann auch wie folgt dargestellt werden:

16 Lesson 4: Schriftarten (Fonts) - HTML.net 2 von :33 Wenn man die Zeichensätze für seine Webseite auflistet, beginnt man im allgemeinen mit dem bevorzugten Zeichensatz und ergänzt dann ein paar Alternativen. Wir empfehlen, dass Sie diese Liste mit einer generischen Familie abschließen. So ist sichergestellt, dass zumindest ein Zeichensatz der gleichen Familie zur Darstellung der Seite herangezogen wird, wenn keine der angegebenen Zeichensätze vorhanden ist. Ein Beispiel für solch eine priorisierende Liste der Zeichensätze könnte wie folgt aussehen: h1 { font-family: arial, verdana, sans-serif; h2 { font-family: "Times New Roman", serif; Überschriften, die mit <h1> markiert wurden, werden in der Schrift Arial angezeigt. Falls dieser Zeichensatz nicht auf dem Computer des Nutzers installiert ist, wird stattdessen Verdana verwendet. Sollten beide Schriften nicht verfügbar sein, wird ein Zeichensatz aus der sans-serif-familie für die Überschriften benutzt. Bitte beachten Sie, dass Schriftartnamen, die Leerzeichen enthalten, in Anführungsstrichen geschrieben werden müssen. Siehe "Times New Roman" im obigen Beispiel. Schriftstil: die Eigenschaft font-style Die Eigenschaft font-style weißt dem betreffenden Element die Stile normal (kein Stil), italic (kursiv) oder oblique (schräg) zu. Im folgenden Beispiel werden alle Überschriften, die mit <h2> markiert sind, kursiv geschrieben. h1 { font-family: arial, verdana, sans-serif; h2 { font-family: "Times New Roman", serif; font-style: italic; Schriftvarianten: die Eigenschaft font-variant Mit der Eigenschaft font-variant kann man zwischen normal oder small-caps wählen. Bei small-caps benutzt die Schriftart anstatt der Kleinbuchstaben (lower-case), kleiner geschriebene Großbuchstaben (uppercase). Verwirrt? Sehen Sie sich die Beispiele an: Wenn font-variant auf small-caps gesetzt ist und keine "small-caps"-variante der Schriftart vorhanden ist, wird der Browser den Text in Großbuchstaben anzeigen.

17 Lesson 4: Schriftarten (Fonts) - HTML.net 3 von :33 h1 { font-variant: small-caps; h2 { font-variant: normal; Schriftgewichtung: die Eigenschaft font-weight Mit der Eigenschaft font-weight gibt man an, wie fett oder schwer eine Schriftart angezeigt werden soll. Eine Schrift kann entweder normal oder bold (fett) dargestellt werden. Einige Browser unterstützen auch die Angabe der Zahlen (nur volle Hunderter) um eine feiner abgestufte Darstellung zu erreichen. p { font-family: arial, verdana, sans-serif; td { font-family: arial, verdana, sans-serif; font-weight: bold; Schriftgröße: die Eigenschaft font-size Die Schriftgröße wird durch die Eigenschaft font-size festgelegt. Man kann viele verschiedene Einheiten (z.b. Pixel und Prozentwerte) verwenden um die Größen zu beschreiben. In diesem Tutorial werden wir uns auf die meistgebrauchten und zweckmäßigsten Einheiten konzentrieren. Beispiele sind: h1 { font-size: 30px; h2 { font-size: 12cm; h3 { font-size: 120%; p { font-size: 1em;

18 Lesson 4: Schriftarten (Fonts) - HTML.net 4 von :33 Es gibt einen grundlegenden Unterschied zwischen den vier obigen Einheiten. px und pt bringen die Schrift auf eine absolute Größe, während es % und em dem Nutzer erlaubt, die Größe so zu verändern, dass es ihm/ihr passend erscheint. Viele Internetnutzer sind behindert, älter, sehbehindert oder leiden unter der schlechten Qualität Ihres Monitors. Um Ihre Webseite für jederman zugänglich zu machen, sollten Sie veränderbare Einheiten, wie % oder em, verwenden. Nachfolgend sehen Sie, wie man die Ausgabegröße des Textes bei Mozilla Firefox und Internet Explorer verändern kann. Probieren Sie's - nette Spielerei oder was meinen Sie? Kombination der vorgenannten: die Eigenschaft font Mit Hilfe der font-eigenschaft können Sie alle Schrift-Eigenschaften in dieser einen Eigenschaft vereinen. Stellen Sie sich z.b. die folgenden vier Codezeilen vor, die die Schrifteigenschaften für <p> angeben: p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif;

19 Lesson 4: Schriftarten (Fonts) - HTML.net 5 von :33 Wenn man diese Kombination verwendet, kann der Code vereinfacht werden: p { font: italic bold 30px arial, sans-serif; Die Reihenfolge der Werte für font ist: [font-style] [font-variant] [font-weight] [font-size] [font-family] Zusammenfassung Sie haben nun einige Möglichkeiten der Schriftveränderung kennengelernt. Denken Sie daran, einer der größten Vorteile CSS zu nutzen ist, dass Sie die Schrift zu jederzeit auf Ihrer ganzen Webseite in nur ein paar Minuten verändern können. CSS spart Zeit und macht Ihr Leben einfacher. In der nächsten Lektion werden wir uns Möglichkeiten zur Formatierung von Texten anschauen. << Lesson 3: Farben und Hintergründe Lesson 5: Text >>

20 Lesson 5: Text - HTML.net 1 von :36 Lektion 5: Text Texte zu formatieren, ist eine der Hauptaufgaben für jeden Webdesigner. In dieser Lektion werden wir zeigen, welche unglaublichen Möglichkeiten CSS bietet, um einen Text nach mehr aussehen zu lassen. Die folgenden Eigenschaften werden beschrieben: text-indent text-align text-decoration letter-spacing text-transform Texteinrückung: die Eigenschaft text-indent Die Eigenschaft text-indent erlaubt es Ihnen, Ihrem Text einen eleganten Touch zu geben, indem Sie die erste Zeile eines Absatzes einrücken. Im folgenden Beispiel werden alle Absätze, die mit <p> markiert sind, um 30px eingerückt: p { text-indent: 30px; Textausrichtung: die Eigenschaft text-align Die CSS-Eigenschaft text-align ist mit dem Attribut align vergleichbar, welches in älteren HTML-Versionen verwendet wurde. Text kann entweder left (links), right (rechts) oder center (zentriert) ausgerichtet werden. Außerdem steht der Wert justify für Blocksatz zur Verfügung, d.h. jede Zeile wird so gestreckt, dass alle gleich lang sind. Dies kennen Sie vielleicht aus Zeitungen und Zeitschriften. Im unten stehenden Beispiel ist der Text in Tabellenköpfen <th> (table header) rechts ausgerichtet, während er in normalen Tabellenzellen <td> zentriert wird. Zusätzlich werden normale Absätze im Blocksatz geschrieben: th { text-align: right; td { text-align: center; p { text-align: justify;

21 Lesson 5: Text - HTML.net 2 von :36 Textdekoration: die Eigenschaft text-decoration Mit der Eigenschaft text-decoration ist es möglich, Texte verschiedenartig zu dekorieren oder Ihnen Effekte zu verleihen. Sie können Texte unterstreichen, durchstreichen oder eine Linie darüber zeichnen lassen. Im folgenden Beispiel sind <h1>-überschriften unterstrichen, <h2>-überschriften haben eine Linie über dem Text und <h3>-überschriften sind durchgestrichen. h1 { text-decoration: underline; h2 { text-decoration: overline; h3 { text-decoration: line-through; Laufweite (Abstand zwischen den Buchstaben): die Eigenschaft letter-spacing Die Laufweite von Text kann mit der Eigenschaft letter-spacing verändert werden. Der Wert, den die Eigenschaft annimmt, ist einfach der gewünschte Abstand der Buchstaben. Wenn Sie z.b. eine Laufweite von 3px für Ihre Textabsätze <p> und 6px für <h1>-überschriften wünschen, kann der nachfolgende Code verwendet werden. h1 { letter-spacing: 6px; p { letter-spacing: 3px; Texttransformation: die Eigenschaft text-transform Mit der Eigenschaft text-transform kann man die Groß- und Kleinschreibung eines Textes kontrollieren. Sie können wählen zwischen capitalize, uppercase oder lowercase wählen, egal wie der Ursprungstext im HTML-Code aussieht. Nehmen wir das Wort überschrift. Es kann dem Nutzer als ÜBERSCHRIFT oder Überschrift präsentiert werden. Nachfolgend stehen die vier möglichen Werte für text-transform: capitalize Schreibt den ersten Buchstaben jedes Wortes groß, z.b.: john doe wird zu John Doe. uppercase Schreibt alle Buchstaben groß, z.b.: john doe wird zu JOHN DOE.

22 Lesson 5: Text - HTML.net 3 von :36 lowercase Schreibt alle Buchstaben klein, z.b.: JOHN DOE wird zu john doe. none Keine Transformation der Text wird so angezeigt, wie er im HTML-Code steht. Als Beispiel nehmen wir eine Namensliste. Die Namen sind alle mit <li> (Listenelement) markiert. Sagen wir, wir möchten, dass die Namen mit Großbuchstaben beginnen und Überschriften komplett in Großbuchstaben geschrieben werden sollen. Schauen Sie bei diesem Beispiel auch in den Quellcode. Sie werden sehen, dass der Text eigentlich in Kleinbuchstaben geschrieben ist. h1 { text-transform: uppercase; li { text-transform: capitalize; Zusammenfassung In den letzten drei Lektionen haben Sie schon einige CSS-Eigenschaften kennengelernt, aber es gibt noch viel mehr. In der nächsten Lektion werfen wir einen Blick auf Links. << Lesson 4: Schriftarten (Fonts) Lesson 6: Links >>

23 Lesson 6: Links - HTML.net 1 von :37 Lektion 6: Links Sie können Ihr Wissen aus den vorangegangenen Lektionen auch auf Links anwenden (Farben verändern, Schriftarten, Unterstreichungen usw.) Neu ist aber, dass CSS es Ihnen erlaubt, dies abhängig davon zu gestalten, ob der Link schon besucht (visited) oder noch nicht besucht (link) wurde, gerade angeklickt wird (active) oder nur der Mauszeiger über dem Link platziert ist (hover). Dadurch kann man seiner Webseite tolle und nützliche Effekte hinzufügen. Um diese Effekte zu steuern, benutzt man sog. Pseudoklassen (pseudoclasses). Was ist eine Pseudoklasse? Eine Pseudoklasse erlaubt es Ihnen zwischen verschiedenen Zuständen oder Ereignissen zu unterscheiden, wenn Sie eine Eigenschaft für einen HTML-Tag festlegen. Sehen wir uns ein Beispiel an. Wie Sie wissen, werden Links in HTML mit <a>-tags markiert. In CSS nutzen wir wiederum a zum ansprechen der Links im HTML-Dokument: a { color: blue; Ein Link kann verschiedene Zustände haben. Er kann z.b. besucht oder noch nicht besucht worden sein. Sie können die folgenden Pseudoklassen verwenden, um dies darzustellen: a:link { color: blue; a:visited { color: red; Man benutzt a:link und a:visited für unbesuchte und besuchte Links. Links, die gerade angeklickt werden, werden mir der Pseudoklasse a:active angesprochen und die, die gerade mit dem Mauszeiger überfahren (gehovert) werden, mit a:hover. Wir schauen uns jetzt jede der vier Pseudoklassen genauer an, geben Beispiele und Erklärungen. Die Pseudoklasse :link Die Pseudoklasse :link wird für Links zu Seiten benutzt, die der Nutzer vorher noch nicht besucht hat. Im untenstehenden Beispiel sind die nicht besuchten Links hellblau. a:link { color: #6699CC;

24 Lesson 6: Links - HTML.net 2 von :37 Die Pseudoklasse :visited Die Pseudoklasse :visited wird für Links zu bereits besuchten Seiten benutzt. Der nachfolgende Beispielcode färbt alle besuchten Links dunkelviolett: a:visited { color: #660099; Die Pseudoklasse :active Die Pseudoklasse :active benutzt man für aktive Links, also solche, die gerade angeklickt werden. Das nachfolgende Beispiel gibt den aktiven Links eine gelbe Hintergrundfarbe: a:active { background-color: #FFFF00; Die Pseudoklasse :hover Die Pseudoklasse :hover wird angewendet, wenn der Mauszeiger auf einem Link platziert wird. Das kann verwendet werden, um interessante Effekte zu kreieren. Wenn man beispielsweise möchte, dass seine Links orange und kursiv geschrieben werden, wenn der Mauszeiger sie berührt, dann sollte das CSS so aussehen: a:hover { color: orange; font-style: italic; Beispiel 1: Effekt, wenn der Mauszeiger auf dem Link ist Es ist sehr beliebt, verschiedene Effekte für das Überfahren von Links in eine Webseite einzubauen. Wir schauen uns aus diesem Grund ein paar Extra-Beispiele für die Pseudoklasse :hover an. Beispiel 1a: Laufweite

25 Lesson 6: Links - HTML.net 3 von :37 Wie Sie vielleicht noch aus Lektion 5 wissen, kann die Laufweite über die Eigenschaft letter-spacing verändert werden. Diese Eigenschaft kann auch Links zugewiesen werden, um einen speziellen Effekt zu erreichen: a:hover { letter-spacing: 10px; font-weight:bold; color:red; Beispiel 1b: GROSSSCHREIBUNG und kleinschreibung In Lektion 5 haben wir auch die Eigenschaft text-transform betrachtet, die zwischen Groß- und Kleinbuchstaben umschalten kann. Auch dieses kann für Link-Effekte benutzt werden: a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; Diese beiden Beispiele geben Ihnen einen kurzen Einblick in die fast unendlichen Möglichkeiten, verschiedene Eigenschaften zu kombinieren. Sie können sicherlich auch Ihre eigenen Effekte erstellen - probieren Sie's! Beispiel 2: Unterstreichung der Links entfernen Eine uns oft gestellte Frage ist: Wie entferne ich den Strich unter den Links? Überlegen Sie sich genau, ob es wirklich nötig ist, die Unterstreichung zu entfernen, da es die Benutzbarkeit (Usability) Ihrer Webseite erheblich herabsetzen kann. Die Menschen haben sich an blaue unterstrichene Links gewöhnt und wissen, dass man darauf klicken kann. Sogar meine Mutter weiß das! Wenn Sie die Unterstreichung und die Farbe von Links ändern, kann es durchaus sein, dass einige Nutzer irritiert sind und nicht in den vollen Genuss aller Inhalte Ihrer Seiten kommen. Mit dem eben gelesenen im Hinterkopf wieder zurück zum Beispiel: Es ist eigentlich sehr einfach die Unterstreichungen der Links zu entfernen. Erinnern Sie sich noch an die Eigenschaft text-decoration aus Lektion 5? Diese konnte man verwenden um festzulegen, ob ein Text unterstrichen ist oder nicht. Um einen Unterstrich zu entfernen, setzt man den Wert für text-decoration auf none (kein). a { text-decoration:none; Alternativ dazu, können Sie text-decoration auch für alle vier Pseudoklassen setzen.

26 Lesson 6: Links - HTML.net 4 von :37 a:link { color: blue; text-decoration:none; a:visited { color: purple; text-decoration:none; a:active { background-color: yellow; text-decoration:none; a:hover { color:red; text-decoration:none; Zusammenfassung In dieser Lektion haben Sie Pseudoklassen kennengelernt und Eigenschaften aus den vorhergehenden Lektionen angewandt. Dies sollte Ihnen eine kleine Vorstellung davon geben, was für Möglichkeiten in CSS stecken. In der nächsten Lektion werden wir uns anschauen, wie man nur ausgewählten Elementen oder Elementgruppen Eigenschaften zuweist. << Lesson 5: Text Lesson 7: Identifikation und Gruppierung von Elementen (class und id) >>

27 Lesson 7: Identifikation und Gruppierung von Elementen (class und id) von :37 Lektion 7: Identifikation und Gruppierung von Elementen (class und id) Manchmal möchte man einen speziellen Stil nur einem bestimmten Element oder eine Gruppe von Elementen zuweisen. In dieser Lektion werden wir uns genauer anschauen, wie man class und id nutzen kann, um Eigenschaften für ausgewählte Elemente festzulegen. Wie kann man eine spezielle Überschrift andersfarbig als alle anderen Überschriften einer Webseite gestalten? Wie kann man Links zu verschiedenen Kategorien gruppieren und jeder Gruppe ein eigenes Aussehen verleihen? Das sind nur ein paar Beispiele, derer wir uns in dieser Lektion annehmen. Gruppieren von Elementen in Klassen (class) Nehmen wir an, wir haben zwei Listen mit Links zu verschiedenen Traubensorten, die zur Herstellung von Weiß- oder Rotwein genommen werden. Der HTML-Code sieht wie folgt aus: <p>grapes for white wine:</p> <ul> <li><a href="ri.htm">riesling</a></li> <li><a href="ch.htm">chardonnay</a></li> <li><a href="pb.htm">pinot Blanc</a></li> </ul> <p>grapes for red wine:</p> <ul> <li><a href="cs.htm">cabernet Sauvignon</a></li> <li><a href="me.htm">merlot</a></li> <li><a href="pn.htm">pinot Noir</a></li> </ul> Wir wollen aber, dass die Weißweinlinks gelb und die Rotweinlinks rot werden und die restlichen Links auf der Seite blau bleiben. Um dies zu erreichen, teilen wir die Links in zwei Kategorien. Dies wird gemacht, indem man jedem Link mit dem Attribut class eine Klasse zuschreibt. Lassen Sie uns für das obige Beispiel Klassen vergeben: <p>grapes for white wine:</p> <ul> <li><a href="ri.htm" class="weisswein">riesling</a></li> <li><a href="ch.htm" class="weisswein">chardonnay</a></li> <li><a href="pb.htm" class="weisswein">pinot Blanc</a></li> </ul> <p>grapes for red wine:</p> <ul> <li><a href="cs.htm" class="rotwein">cabernet Sauvignon</a></li> <li><a href="me.htm" class="rotwein">merlot</a></li> <li><a href="pn.htm" class="rotwein">pinot Noir</a></li> </ul>

28 Lesson 7: Identifikation und Gruppierung von Elementen (class und id) von :37 Jetzt können wir für Links der Klasse weisswein spezielle Eigenschaften vergeben. Für rotwein analog. a { color: blue; a.weisswein { color: #FFBB00; a.rotwein { color: #800000; Wie man in dem Beispiel sieht, kann man Eigenschaften von Elementen einer bestimmten Klasse mit Hilfe von.classname im Stylesheet des Webdokumentes festlegen. Identifikation eines bestimmten Elementes (id) Zusätzlich zu der Gruppierung der Elemente ist es möglich einzelne Elemente anzusprechen. Dazu braucht man das Attribut id. Das besondere an dem Attribut id ist, dass es kein weiteres Element im selben Dokument geben kann, welches die selbe id trägt. Jede id muss einzigartig sein. In anderen Fällen nutzen Sie besser das Attribut class. Lassen Sie uns nun ein Anwendungsbeispiel für id anschauen: <h1>kapitel 1</h1>... <h2>kapitel 1.1</h2>... <h2>kapitel 1.2</h2>... <h1>kapitel 2</h1>... <h2>kapitel 2.1</h2>... <h3>kapitel 2.1.2</h3>... Dies hier oben könnten Überschriften eines jeden Dokumentes sein, welches in Kapitel und Absätze eingeteilt ist. Es ist wohl nicht ganz unlogisch, für jedes Kapitel eine id zu vergeben: <h1 id="k1">kapitel 1</h1>... <h2 id="k1-1">kapitel 1.1</h2>... <h2 id="k1-2">kapitel 1.2</h2>... <h1 id="k2">kapitel 2</h1>... <h2 id="k2-1">kapitel 2.1</h2>... <h3 id="k2-1-2">kapitel 2.1.2</h3>...

29 Lesson 7: Identifikation und Gruppierung von Elementen (class und id) von :37 Nehmen wir an, die Überschrift für Kapitel 1.2 muss unbedingt rot sein. Dies können wir mit CSS wie folgt bewerkstelligen: #k1-2 { color: red; Wie zu sehen war, definiert man die Eigenschaften eines bestimmten Elementes, indem man #idname im Stylesheet des Dokumentes schreibt. Zusammenfassung In dieser Lektion haben wir die gelernt, dass es durch Benutzung von Klassen (class) und Identifikation einzelner Elemente (id) möglich ist, jenen Elementen spezielle Eigenschaften zuzuweisen. In der nächsten Lektion werden wir einen genaueren Blick auf zwei HTML-Elemente werfen, die meist in Verbindung mit CSS verwendet werden: <span> und <div>. << Lesson 6: Links Lesson 8: Gruppierung von Elementen (span und div) >>

30 Lesson 8: Gruppierung von Elementen (span und div) - HTML.net 1 von :37 Lektion 8: Gruppierung von Elementen (span und div) Die Elemente <span> und <div> werden zum gruppieren und strukturieren eines Dokumentes benutzt und sehr oft mit den Attributen class und id verwendet. In dieser Lektion werfen wir einen genaueren Blick auf die Benutzung von <span> und <div>, da genau diese beiden HTML-Elemente von zentraler Bedeutung für den Aufbau von Webseiten mit Hilfe von CSS ist. Gruppieren mit <span> Gruppieren mit <div> Gruppieren mit <span> Das Element <span> ist ein neutrales Element, welches dem Dokument eigentlich nichts hinzufügt. Aber zusammen mit CSS, kann <span> dazu benutzt werden, um visuelle Besonderheiten an bestimmten Textstellen im Dokument einzufügen. Nehmen wir dieses Goethe-Zitat: <p>edel sei der Mensch, hilfreich und gut.</p> Heben wir die Tugenden, die der Mensch laut Herrn Goethe haben sollte, rot hervor. Zu diesem Zweck, können wir diese mit <span> markieren. Jedem span wird dann eine Klasse (class) zugeordnet, die wir im Stylesheet definieren können: <p><span class="tugend">edel</span> sei der Mensch, <span class="tugend">hilfreich</span> und <span class="tugend">gut</span>.</p> Das zugehörige CSS: span.tugend { color:red; Natürlich können Sie auch id nutzen, um den <span>-elementen einen Stil zuzuordnen. Aber bitte denken Sie daran, dass jede der drei <span>-elemente eine eigene id bekommt, so wie Sie es in der letzten Lektion gelernt haben. Gruppieren mit <div> Während <span>, wie im vorhergehenden Beispiel gesehen, innerhalb eines Block-Level-Element gebraucht wird, wird <div> benutzt, um eines oder mehrere Block-Level-Element zu gruppieren.

31 Lesson 8: Gruppierung von Elementen (span und div) - HTML.net 2 von :37 Neben diesem Unterschied funktioniert das gruppieren mit <div> aber mehr oder weniger in der gleichen Art und Weise. Schauen wir uns ein Beispiel mit den jeweils letzten drei Bundeskanzlern von SPD bzw. CDU/CSU, aufgeteilt nach den Parteien, denen diese entstammen: <div id="spd"> <ul> <li>gerhard Schröder</li> <li>helmut Schmidt</li> <li>willy Brandt</li> </ul> </div> <div id="cducsu"> <ul> <li>angela Merkel</li> <li>helmut Kohl</li> <li>kurt Georg Kiesinger</li> </ul> </div> Und in unserem Stylesheet benutzen wir das Gruppieren genauso wie im obigen Beispiel: #spd { background:red; color:white; #cducsu { background:black; color:white; Im dem oben stehenden Beispielen haben wir <div> und <span> nur für einfache Sachen, wie Texte und Hintergrundfarben herangezogen. Beide Elemente haben das Potenzial, viel fortgeschrittenere Sachen zu bewältigen, z.b.. Aber dies wird nicht mehr in dieser Lektion behandelt werden. Mehr darüber später im Tutorial. Zusammenfassung In Lektion 7 und 8 haben Sie etwas über die Selektoren id und class und die Elemente span und div gelernt. Sie sollten nun mehr oder weniger in der Lage sein, alle Teile Ihrers Dokumentes zu gruppieren oder identifizieren. Dies ist ein großer Schritt in Richtung Meistern von CSS. In Lektion 9 führen wir Sie in das Box-Modell ein. << Lesson 7: Identifikation und Gruppierung von Elementen (class und id) Lesson 9: Das Box-Modell >>

32 Lesson 9: Das Box-Modell - HTML.net 1 von :38 Lektion 9: Das Box-Modell Das Box-Modell in CSS beschreibt die Boxen (oder Kästen), die für HTML-Elemente generiert werden. Das Box-Modell enthält auch Optionen zum einstellen von Außenabständen (margin), Rändern (border), Innenabständen (padding) und Inhalten (content) für jedes Element. Die folgende Grafik zeigt, wie das Box-Modell konstruiert ist: Das Box-Modell in CSS Die Abbildung sieht wahrscheinlich ziemlich theoretisch aus, also lassen Sie uns das Modell in einem Beispiel mit einer Überschrift und ein bißchen Text verwenden. Der Beispielcode zeigt einen Auszug aus der engl. Version der Vereinbarung über die Menschenrechte und lautet wie folgt: <h1>article 1:</h1> <p>all human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood</p> Wenn man ein bißchen Farbe und Schriftinformationen hinzufügt, kann das Beispiel wie folgt dargestellt werden:

33 Lesson 9: Das Box-Modell - HTML.net 2 von :38 Das Beispiel enthält zwei Elemente: <h1> und <p>. Das Box-Modell für die beiden Elemente kann man wie folgt darstellen: Auch wenn es ein wenig kompliziert aussieht, zeigt die Grafik, wie jedes HTML-Element von diesen Kästen umgeben ist. Diese Kästen können über CSS gesteuert werden. <% ' The properties which regulate the different boxes are: padding, margin and border. The next two lessons deal with exactly these three properties: ' ' ' Lesson 10: The box model - margin & padding ' Lesson 11: The box model - border ' When you have finished these two lessons, you will master the box model and be able to layout your documents much finer and more precise than in the old fashion using tables in HTML. %> Zusammenfassung In dieser Lektion haben wir das Box-Modell eingeführt. In den folgenden drei Lektionen werden wir uns genauer anschauen, wie man Elemente mit Hilfe des Box-Modells erstellt und kontrolliert. << Lesson 8: Gruppierung von Elementen (span und div) Lesson 10: Außen- und Innenabstand (margin und padding) >>

34 Lesson 10: Außen- und Innenabstand (margin und padding) - CSS Tutoria von :38 Lektion 10: Außen- und Innenabstand (margin und padding) In der vorhergehenden Lektion haben wir das Box-Modell vorgestellt. In dieser Lektion werden wir zeigen, wie man die Darstellung von Elementen durch die Eigenschaften Außenabstand (margin) und Innenabstand (padding) verändern kann. Außenabstand (margin) eines Elementes Innenabstand (padding) eines Elementes Außenabstand (margin) eines Elementes Ein Element hat vier Seiten: rechts, links, oben und unten (right, left, top und bottom). Der Außenabstand margin ist die Entfernung jeder Seite zum Nachbarelement (oder den Rändern des Web-Dokuments). Um dies zu visualisieren gibt ein eine Abbildung in Lektion 9. Als erstes Beispiel setzen wir Außenabstände für das Webdokument selbst, also für das Element <body>. Die Abbildung zeigt, wie die Ränder unserer Seiten gesetzt werden sollen. Der CSS-Code dafür würde wir folgt aussehen: body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; Sie können aber auch diese elegantere Version wählen:

35 Lesson 10: Außen- und Innenabstand (margin und padding) - CSS Tutoria von :38 body { margin: 100px 40px 10px 70px; Sie können diese Außenabstände für nahezu jedes HTML-Element definieren. Wir können z.b. für alle Textabsätze, die mit <p> markiert wurden, einen Außenabstand festlegen: body { margin: 100px 40px 10px 70px; p { margin: 5px 50px 5px 50px; Innenabstand (padding) eines Elementes Der Innenabstand (padding) kann auch als Füllung verstanden werden. Dies macht Sinn, da der Abstand zu anderen Elementen nicht verändert wird, sondern nur den inneren Abstand vom Rand (border) zum Inhalt des Elementes angibt. Die Benutzung von padding wollen wir durch dieses einfache Beispiel von Überschriften mit farbigen Hintergründen verdeutlichen: h1 { background: yellow; h2 { background: orange; Wenn man den Überschriften jetzt einen Innenabstand gibt, verändert man die Größe des farbigen Bereichs um den Text der Überschriften:

36 Lesson 10: Außen- und Innenabstand (margin und padding) - CSS Tutoria von :38 h1 { background: yellow; padding: 20px 20px 20px 80px; h2 { background: orange; padding-left:120px; Zusammenfassung Sie sind auf dem besten Weg das CSS-Box-Modell zu meistern. In der nächsten Lektion werfen wir einen genaueren Blick darauf, wie man Umrandungen farbig gestaltet kann. << Lesson 9: Das Box-Modell Lesson 11: Umrandung (border) >>

37 Lesson 11: Umrandung (border) - HTML.net 1 von :39 Lektion 11: Umrandung (border) Umrandungen (border) können für viele Sachen verwendet werden, z.b. als Dekorationselement oder um die Eigenständigkeit zweier Sachen zu unterstreichen. CSS bietet unendliche Möglichkeiten, bei der Verwendung von Umrandungen. border-width border-color border-style Beispiele border Breite der Umrandung: die Eigenschaft border-width Die Breite der Umrandung wird mit der Eigenschaft border-width eingestellt. Diese kann die Werte thin (dünn), medium (mittel) und thick (dick) oder einen numerischen Wert in Pixeln annehmen. Die Abbildung verdeutlicht das System: Farbe der Umrandung: die Eigenschaft border-color Die Eigenschaft border-color gibt an, welche Farbe die Umrandung hat. Werte können die normalen Farbwerte, z.b. #123456, rgb(123,123,123) oder yellow sein. Arten der Umrandung: die Eigenschaft border-style Es gibt verschiedene Umrandungsarten, aus denen Sie auswählen können. Nachfolgend werden acht Typen gezeigt, wie sie vom Internet-Explorer 5.5 interpretiert werden (in anderen Browser ist es normalerweise ähnlich, wenn nicht gar gleich). Alle sind in der Farbe gold und der Breite thick, können aber natürlich auch in jeder anderen Farbe und Breite angezeigt werden. Die Werte none oder hidden können benutzt werden, wenn man keinerlei Umrandung wünscht.

38 Lesson 11: Umrandung (border) - HTML.net 2 von :39 Beispiele Die drei soeben beschriebenen Eigenschaften können auch für jedes Element separat miteinander kombiniert werden und somit immer neue Umrandungen schaffen. Um dies zu zeigen, schauen wir und ein Dokument an, in dem wir verschiedene Umrandungen für <h1>, <h2>, <p> und <ul> definiert haben. Das Ergebnis mag nicht hübsch aussehen, aber es zeigt doch einige der zahlreichen Möglichkeiten: h1 { border-width: thick; border-style: dotted; border-color: gold; h2 { border-width: 20px; border-style: outset; border-color: red; p { border-width: 1px; border-style: dashed; border-color: blue; ul { border-width: thin; border-style: solid; border-color: orange;

39 Lesson 11: Umrandung (border) - HTML.net 3 von :39 Man kann auch besondere Eigenschaften für den oberen, unteren, linken und rechten Rand (border-top, border-bottom, border-right oder border-left) vergeben. Das folgende Beispiel zeigt wie: h1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; Kombination: die Eigenschaft border Wie auch bei vielen anderen Eigenschaften, können die Werte der Umrandungseigenschaften in der Eigenschaft border zusammengefaßt werden. Schauen wir uns ein Beispiel an: p { border-width: 1px; border-style: solid; border-color: blue; Kann kombiniert werden zu: p { border: 1px solid blue; Zusammenfassung In dieser Lektion haben wir mehr über die unendlich vielen Möglichkeiten erfahren, die CSS bei der Gestaltung von Umrandungen bietet. In der nächsten Lektion sehen wir, wie man die Größe der Boxen (des Box-Modells) mit width und height (Breite und Höhe) festlegen kann. << Lesson 10: Außen- und Innenabstand (margin und padding) Lesson 12: Breite und Höhe >>

40 Lesson 12: Breite und Höhe - HTML.net 1 von :39 Lektion 12: Breite und Höhe Bisher haben wir uns noch nicht viel um die Größe der Elemente, mit denen wir gearbeitet haben, gekümmert. In dieser Lektion werden wir sehen, wie einfach man Breite (width) und Höhe (height) eines Elementes einstellen kann. width height Festlegen der Breite: die Eigenschaft width Mit der Eigenschaft width, kann man die gewünschte Breite eines Elementes angeben. Diese einfache Beispiel erstellt eine Box, in der Text dargestellt werden kann: div.box { width: 200px; border: 1px solid black; background: orange; Festlegen der Höhe: die Eigenschaft height Im obigen Beispiel wird die Höhe der Box durch ihren Inhalt bestimmt. Man kann aber die Höhe eines Elementes auch mit der Eigenschaft height beeinflussen. Als Beispiel weisen wir der Box aus unserem Beispiel eine Höhe von 500 Pixel zu: div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; Zusammenfassung Die Lektionen 9, 10, 11 und 12 gaben eine Einführung in das Box-Modell von CSS. Vielleicht haben Sie bisher Tabellen in HTML benutzt um Ihre Layouts zu erstellen. Mit dem Box-Modell von CSS sollten Sie nun in der Lage sein, elegante Layouts präziser und in Übereinstimmung mit den Empfehlungen des W3C zu erstellen. << Lesson 11: Umrandung (border) Lesson 13: Schwimmende Positionierung von Elementen (float) >>

41 Lesson 13: Schwimmende Positionierung von Elementen (float) - HTML.net 1 von :39 Lektion 13: Schwimmende Positionierung von Elementen (float) Ein Element kann mit Hilfe der Eigenschaft float auf der linken oder rechten Seite eines Dokumentes (oder der beinhaltenden Box siehe Lektion 9 für eine Beschreibung des Box-Modells) positioniert werden. Nachfolgende Inhalte umfließen dieses Element. Die Nachfolgende Abbildung zeigt das Prinzip: Wenn wir z.b. Text haben möchten, der ein Bild umschließt, sähe das Ergebnis wie folgt aus: Wie wird das gemacht? Der HTML-Code für das obige Beispiel sieht wie folgt aus: <div id="picture"> <img src="bill.jpg" alt="bill Gates"> </div> <p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p> Um das Bild links zu positionieren und es durch den Text umfließen zu lassen, muss man nur die Breite der

42 Lesson 13: Schwimmende Positionierung von Elementen (float) - HTML.net 2 von :39 Box um das Bild angeben und dessen Eigenschaft float auf left setzen: #picture { float:left; width: 100px; Ein weiteres Beispiel: Spalten Diese Positionierungsart kann auch für Spalten in einem Dokument genutzt werden. Um die Spalten zu erstellen, müssen Sie nur die gewünschten Bereiche im HTML-Code mit <div> markieren: <div id="column1"> <p>haec disserens qua de re agatur et in quo causa consistat non videt...</p> </div> <div id="column2"> <p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p> </div> <div id="column3"> <p>nam nihil esset in nostra potestate si res ita se haberet...</p> </div> Jetzt setzen wir die Breite jeder Spalte auf z.b. 33% und dann wird jeder Spalte noch die Eigenschaft float mit dem Wert left zugewiesen: #column1 { float:left; width: 33%; #column2 { float:left; width: 33%; #column3 { float:left; width: 33%; float kann entweder auf die Werte left (links), right (rechts) or none (nicht) gesetzt werden. Aufhebung des Umflusses: die Eigenschaft clear

43 Lesson 13: Schwimmende Positionierung von Elementen (float) - HTML.net 3 von :39 Die Eigenschaft clear wird benutzt, um die Elemente zu kontrollieren, die dem schwimmend positionierten Element nachfolgen. Standardmäßig werden nachfolgende Elemente herangezogen, um freien Platz neben dem schwimmend positionierten Element aufzufüllen. Schauen Sie in das obige Beispiel, wo der Text automatisch neben das Bild von Bill Gates gezogen wird. Die Eigenschaft clear kann die Werte left (links), right (rechts), both (beides) oder none (nichts) annehmen. Das Prinzip ist folgendes: Wenn clear z.b. auf both für eine Box gesetzt wird, dann wird der obere Rand (margin) dieser Box unter dem unteren Rand (margin) von evtl. schwimmend positionierten Boxen liegen. <div id="picture"> <img src="bill.jpg" alt="bill Gates"> </div> <h1>bill Gates</h1> <p class="floatstop">causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p> Um den Text vom umfließen des Bildes abzuhalten, kann man die folgenden Zeilen unserem CSS hinzufügen: #picture { float:left; width: 100px;.floatstop { clear:both; Zusammenfassung float ist in vielen Situationen nützlich und wird oft zusammen mit der Positionierung benutzt. In der nächsten Lektion werden wir uns anschauen, wie man eine Box entweder relativ oder absolut positioniert. << Lesson 12: Breite und Höhe Lesson 14: Positionierung von Elementen >>

44 Lesson 14: Positionierung von Elementen - HTML.net 1 von :40 Lektion 14: Positionierung von Elementen Mit der CSS-Positionierung können Sie ein Element exakt dort in Ihrem Dokument platzieren, wo Sie es wünschen. Zusammen mit float (siehe Lektion 13), ergeben sich viele Möglichkeiten ein präzises Layout zu erstellen. Die folgenden Punkte werden in dieser Lektion behandelt: Das Prinzip hinter der CSS-Positionierung Absolute Positionierung Relative Positionierung Das Prinzip hinter der CSS-Positionierung Stellen Sie sich ein Browserfenster als Koordinatensystem vor: Das Prinzip hinter der CSS-Positionierung ist, dass jede Box irgendwo in diesem Koordinatensystem positioniert werden kann. Nehmen wir an, wir möchten eine Überschrift positionieren. Unter Zuhilfenahme des Box-Modells (siehe Lektion 9) wird die Überschrift, wie folgt, erscheinen: Wenn wir diese Überschrift 100 Pixel vom oberen und 200 Pixel vom linken Dokumentenrand positionieren wollen, können wir die folgenden Zeilen in unsere CSS-Datei schreiben: h1 { position:absolute; top: 100px; left: 200px;

45 Lesson 14: Positionierung von Elementen - HTML.net 2 von :40 Das Ergebnis wäre dies: Wie Sie sehen, ist das Positionieren mit CSS ein sehr präzises Werkzeug, um Elemente zu platzieren. Es ist viel einfacher, als die Benutzung von Tabellen, transparenten Bildern o.ä. Absolute Positionierung Ein Element, das absolut positioniert ist, nimmt keinem Platz im Dokument ein. D.h. es hinterläßt keinen leeren Platz, nachdem es positioniert wurde. Um ein Element absolut zu positionieren, wird die Eigenschaft position auf den Wert absolute gesetzt. Nachfolgend können die Eigenschaften left, right, top und bottom verwendet werden, um die Box zu platzieren. Als Beispiel für die absolute Positionierung nehmen wir vier Boxen, jede in einer Ecke des Dokumentes: #box1 { position:absolute; top: 50px; left: 50px; #box2 { position:absolute; top: 50px; right: 50px; #box3 { position:absolute; bottom: 50px; right: 50px; #box4 { position:absolute; bottom: 50px; left: 50px;

46 Lesson 14: Positionierung von Elementen - HTML.net 3 von :40 Relative Positionierung Um ein Element relativ zu positionieren, wird die Eigenschaft position auf den Wert relative gesetzt. Der Unterschied zwischen absoluter und relativer Positionierung liegt in der Berechnung der Position. Die Position eines relativ positionierten Elementes wird von der eigentlichen Stelle im Dokument aus berechnet. D.h. man verschiebt das Element nur nach rechts, links, oben oder unten. Das Element nimmt nach der Positionierung trotzdem noch seinen ursprünglichen Platz im Dokument ein, obwohl es woanders dargestellt wird. Als Beispiel für die relative Positionierung, positionieren wir drei Bilder relativ zu ihren ursprünglichen Plätzen auf der Seite. Wenn Sie genau hinschauen, sehen Sie, dass die Bilder leere Stellen an den Originalstellen hinterlassen: #hund1 { position:relative; left: 350px; bottom: 150px; #hund2 { position:relative; left: 150px; bottom: 500px; #hund3 { position:relative; left: 50px; bottom: 700px; Zusammenfassung In den vergangenen Lektionen haben Sie gelernt, wie man Elemente schwimmend und absolut bzw. relativ positioniert. Diese Methoden geben Ihnen viele Möglichkeiten, Ihre Seiten ohne altmodische Praktiken (Tabellen und transparente Bilder) in HTML zu gestalten. Benutzen Sie stattdessen CSS. Es ist präziser, gibt Ihnen viele Vorteile und ist einfacher zu pflegen. << Lesson 13: Schwimmende Positionierung von Elementen (float) Lesson 15: Ebene auf Ebene mit z-index (Layer) >>

47 Lesson 15: Ebene auf Ebene mit z-index (Layer) - HTML.net 1 von :40 Lektion 15: Ebene auf Ebene mit z-index (Layer) CSS arbeitet in drei Dimensionen Breite, Höhe und Tiefe. Die ersten beiden haben wir in den vorhergehenden Lektionen behandelt. In dieser Lektion lernen wir, wie verschiedene Elemente zu Ebenen werden. Kurz gesagt, die Reihenfolge in der sich Elemente überlappen. Zu diesem Zweck, kann man jedem Element eine Nummer zuweisen (z-index). Das System ist, dass ein Element mit einer höheren Nummer, ein Element mit einer niedrigeren Nummer überlappt. Spielen wir eine Runde Poker und haben einen Royal Flush (10 bis Ass in der gleichen Farbe). Unsere Hand kann mit Hilfe von z-index wie folgt dargestellt werden: In diesem Beispiel folgen die Zahlen aufeinander (1-5). Das gleiche Resultat würde aber entstehen, wenn die Zahlen weiter auseinander liegen würden. Wichtig ist nur die chronologische Ordnung der Zahlen. Der CSS-Code für das Kartenbeispiel könnte wie folgt aussehen: #karo_zehn { position: absolute; left: 100px; top: 100px; z-index: 1; #karo_bube { position: absolute; left: 115px; top: 115px; z-index: 2; #karo_dame { position: absolute; left: 130px; top: 130px; z-index: 3; #karo_koenig { position: absolute; left: 145px; top: 145px; z-index: 4; #karo_ass { position: absolute; left: 160px; top: 160px; z-index: 5;