#W3C CSS Site index Search Copyright Deutsche Übersetzung der Seite "CSS tutorial starting with HTML + CSS" Originale Version: http://www.w3.org/Style/Examples/011/firstcss Aktuelle - übersetzte - Version: http://www.ich-lerne-css.de/Style/Examples/011/firstcss/ Übersetzer: A.Friedrich Bookmark: AddThis Social Bookmark Button Sehr geehrter Leser dieses Dokumentes - bitte beachten Sie dass es sich bei dieser Seite um die Übersetzung eines W3C Textes handelt. Der Original Text ist urheberrechtlich geschützt, bitte beachten Sie die im Originaldokument vermerkten Hinweise. Die Rechte an der Übersetzung selbst liegen allein beim Übersetzer. Der Übersetzer bedankt sich bei den folgenden Seiten für Ihre Unterstützung: HB. Für eventuell vorhandene Fehler in der Übersetzung kann keine Gewähr übernommen werden, das einzig massgebliche und legitime Dokument ist das englische W3C Original. Kommentare des Übersetzers sind als solche gekennzeichnet und unterliegen ebenfalls dem Copyright des Übersetzers. Diese sind nicht Bestandteil des englischen Originaldokumentes. CSS Tutorial HTML + CSS - ein Einstieg Inhalt * 1. HTML * 2. Farben * 3. Fonts * 4. Ein Navigations Menu * 5. Links stylen * 6. Horizontale Linie * 7. CSS Extern * Weitere Informationen Diese kleine CSS Tutorial richtet sich an all jene welche noch nie mit CSS zu tun hatten aber gerne über die Verwendung informiert sein möchten. Keine Sorge, es wird nicht allzu kompliziert. Erklärt wird wie Sie HTML - und CSS Dateien erzeugen und Beide miteinannder in Einklang bringen können. Im Anschluss können Sie sich gerne weitere Tutorials durchlesen und Ihrer Webseite weitere HTML/CSS Elemente hinzuzufügen. Oder - wenn Sie grössere Projekte vorhaben - entscheiden Sie sich gleich für die Verwendung eines HTML oder CSS Editors um Zeit zu sparen. Am Ende des Tutorials werden Sie eine HTML Seite erzeugt haben die in etwa so aussieht: [Link to the final HTML page] Die Ergebnisseite - komplett erstellt mit CSS. Ich habe nie behauptet dass das Ganze sei hübsch :-) Alert! Advanced: Hinweisbereiche wie dieser sind optional. Sie enthalten einige zusätzliche Informationen zum verwendeten HTML - und CSS Quelltext des Beispiels. Das "Ausrufezeichen!" am Beginn solcher Texte bedeutet dass es sich hier um anspruchsvollere Infos als im Rest des Textes handelt. Schritt 1: Erzeugen der HTML Seite Für dieses Tutorial wird die Verwendung eines einfachen Texteditors empfohlen, z.B. Notepad (unter Windows) , TextEdit (Mac) oder KEdit (KDE). Wenn Sie sich mit den Grundlagen vertraut gemacht haben können Sie auch gern zu richtigen HTML/CSS Editoren wechseln (welche in der Regel die Arbeit vereinfachen). Z.B. Style Master, Dreamweaver oder GoLive. Aber bei Ihrem ersten CSS Gehversuch sollten Sie sich nicht von den vielen Features eines solchen Editors ablenken lassen. Verwenden Sie bitte keinen Dokumenteneditor wie Microsoft Word oder OpenOffice. Diese Programme erzeugen oftmals im Quelltext Zusatzzeichen welche in HTML oder CSS nichts zu suchen haben. Wir benötigen ganz einfache Textdateien für unseren Quelltext. Schritt 1 wäre also einen beliebigen Text Editor zu starten (Notepad, TextEdit, KEdit oder etwas in dieser Richtung). Beginnen Sie mit einer leeren Datei und geben Sie das Folgende ein: Meine erste HTML/CSS Seite

Meine erste HTML/CSS Seite

Willkommen auf meiner ersten HTML/CSS Seite!

Es fehlen zwar noch ein paar Bilder, aber immerhin hat sie Style. Und es gibt schon Verlinkungen - auch wenn diese im Moment noch nirgendwo hinfüh ren…

Hier wird irgendwann einmal noch mehr stehen, aber im Moment fällt mir einfac h nichts ein.

Erstellt am 5 April 2004
von mir höchst persönlich.
Sie müssen das Ganze nicht unbedingt abtippen, kopieren Sie einfach den obigen Text in Ihren Texteditor. (Achten Sie bei der Verwendung von TextEdit auf dem Mac bitte darauf dass dieser auch wirklich einfachen Text produziert. Sie können dies in den Programmoptionen festlegen.) Alert! Advanced: Die erste Zeile im Quelltext gibt dem Browser zu verstehen welche HTML Version verwendet werden soll. In diesem Fall handelt es sich um HTML Version 4.01. Worte zwischen einem < und > werden als Tags bezeichnet. Wie Sie sehen können wird das Dokument von den zwei Tags und eingegrenzt. Der Bereich zwischen und wird für alle möglichen Arten von Informationen genutzt welche nicht auf dem Bildschirm ausgegeben werden. Bis jetzt enthält das Dokument nur einen Titel, aber später werden hier auch die CSS Style Sheet Informationen hinzugefügt. Das Tag zeigt an dass nun der eigentliche Text des Dokumentes beginnt. Prinzipiell wird alles auf dem Bildschirm angezeigt was hier zu finden ist - mit einer Aussnahme: Text zwischen dient als Kommentar für Sie selbst und wird vom Browser ignoriert. Eines der Tags in diesem Beipspiel erzeugt eine "Unordered List" (ungeordnete Liste), eine Aufzählung von Elementen ohne dass diese durchnummeriert werden. Einem Listenelement ist immer ein
  • Tag vorangestellt.

    erzeugt einen Absatz und einen "Anchor", genutzt für das Erzeugen von Links. der HTML Quelltext im Editor Der HTML Quelltext im Editor. Alert! Advanced: Wenn Sie weitere Details über die einzelnen Bedeutungen der HTML-Tags innerhalb der eckigen Klammern <...> erfahren möchten empfehlen wir Ihnen einen Besuch dieser Seite: Getting started with HTML. Aber nun ein paar Worte zur Struktur unserer HTML Beispielseite. * "ul" erstellt eine Liste mit einem verlinkten Element pro Eintrag. Diese werden wir als Navigations Menu verwenden um zu den anderen Seite unserer Webseite zu navigieren. Prinzipiell werden alle Unterseiten ein ähnliches Menu aufweisen. * Die Elemente "h1" und "p" beinhalten den wirklichen Inhalt dieser Einzelseite. Die Signatur am Ende der Seite ("address") wiederum wird auf allen Unterseiten zu finden sein. Nehmen Sie bitte zur Kenntnis das die Tags "li" und "p" nicht beendet wurden. In HTML (nicht in XHTML) ist es erlaubt auf die Tags

    • and

    zu verzichten..so wie hier geschehen. Sie können sie natürlich auch hinzufügen wenn Sie möchten, ich habe sie jetzt nur aus Gründen der besseren Lesbarkeit weggelassen. Lassen Sie uns davon ausgehen dass es sich hier um eine Webseite mit vielen ähnlichen Unterseiten handelt. Wie heutzutage üblich besitzt die Seite ein Navigations Menu um zu den einzelnen Unterseiten zu navigieren, verschiedene Texte pro Unterseite und eine immer gleiche Signatur am Seitenende. Wählen Sie nun "Speichern unter..." im Datei Menu Ihres Editors und speichern Sie die Datei unter dem Namen "mypage.html" z.B. auf Ihrem Desktop ab. Bitte schliessen Sie den Editor noch nicht, wir werden ihn noch benötigen. (Achten Sie bitte darauf dass Ihr Editor der Datei nicht noch eine zusätzliche Endung .txt anhängt - die Datei muss unbedingt die Endung .html besitzen) Als nächstes öffnen Sie mypage.html in einem beliebigen Browser. Entweder doppelklicken Sie dafür mit der Maus auf den Dateinamen im z.B. Dateimanager um den Standardbrowser zu öffnen - oder Sie wählen im Browser die Option "Datei öffnen...". Eine dritte Möglichkeit ist es die Datei per drag-n-drop direkt in einen geöffneten Browser zu ziehen. Soweit sogut - aber - wie Sie sehen schaut die Seite noch ziemlich langweilig aus.... Schritt 2: Farben Vermutlich sehen Sie nur schwarzen Text auf weissem Hintergrund, das hängt aber auch von der Einstellung Ihres Browsers ab. Ein einfacher Weg die Seite aufzuwerten ist das Hinzufügen von Farben. (Bitte lassen Sie den Browser geöffnet) Wir werden damit beginnen CSS Style Sheets direkt in der HTML Seite einzubetten. Später werden wir den CSS Quelltext in eine separate Datei auslagern. Separate CSS Dateien machen dann Sinn wenn Sie den gleichen CSS Quelltext in mehreren Einzelseiten immer wieder verwenden möchten. Sie müssen dann das Ganze nicht immer wieder aufs Neue schreiben. Aber jetzt werden wir ersteinmal alles in eine Datei packen. Wir beginnen mit dem Hinzufügen eines [etc.] Die erste Zeile zeigt dass es sich hier um CSS handelt ("text/css"). In der zweiten Zeile bestimmen wir dass alle Folge-Style Sheets für das "body" Element gelten sollen. Die dritte Zeile formatiert den gesamten Text mit der Farbe lila und die letzte Zeile setzt die Hintergrundfarbe auf einen grün-weiss-Ton. Alert! Advanced: Style Sheets in CSS basieren auf Regeln. Jede Regel besteht aus drei Teilen: 1. Ein Selector (in unserem Beispiel "body") welcher dem Browser mitteilt welche Elemente des Dokumentes von der Regel beeinflusst werden sollen 2. Die Eigenschaft (hier sind es die Eigenschaften 'color' und 'background-color') welche festlegt auf welche Art ein Element verändert werden soll 3. Der Wert ('purple' und '#d8da3d') um den Eigenschaften oben einen Wert zuzuweisen Unser Beispiel zeigt dass Regeln zusammengefasst werden können. Normalerweise hätten wir zwei separate Regeln implementieren müssen: body { color: purple } body { background-color: #d8da3d } aber weil beide Regeln das gleiche Element beeinflussen haben wir nur einmal "body" geschrieben und die Eigenschaften und Werte des Elementes eingefügt. Für weitere Selektoren lesen Sie auch Kapitel 2 von Lie & Bos. Der Hintergrund des body Elements entspricht dem gesamten Hintergrund einer Seite. Wir haben kein CSS für weitere Elemente festgelegt (p, li, address...) so dass diese standardmässig einen transparenten Hintergrund erhalten werden. Die Eigenschaft 'color' legt die Farbe des Textes im body Element fest. Alle Elemente innerhalb des body Elements werden diese Textfarbe ebenfalls übernehmen - es sei denn sie wird explizit für ein anderes Element neu festgelegt (das werden wir später durchführen). Nun speichern Sie die Datei bitte wieder ab und wechseln Sie zurück zu dem noch immer geöffneten Browser. Mit einem Klick auf das "Aktualisieren" Icon im Browser sollte die Anzeige von der vormals "langweiligen" Seite zu einer farbenfroheren Variante wechseln. Der Text im Dokument sollte nun lila über einem grün-gelben Hintegrund dargestellt werden. Screenshot einer farbigen Seite im Konqueror So sieht unsere Seite nun im Browser mit Farben aus. Alert! Advanced: Farben können in CSS auf verschiedenen Wegen dargestellt werden. Unser Beispiel zeigt zwei von ihnen: mit dem englischen Namen ("purple") oder mit Hilfe des hexadezimalen Farbcodes ("#d8da3d"). Es sind über 140 Farbnamen verfügbar und durch den Hexa-Code können über 16 Millionen Farben erzeugt werden. Die Seite Adding a touch of style gibt weiteren Aufschluss über die Nutzung dieser Codes. Schritt 3: Fonts Eine andere einfache Möglichkeit um Ihre Seite aufzuwerten ist die Verwendung unterschiedlicher Schriftarten (Fonts) für die einzelnen Seitenelemente. Lassen Sie uns den Text mit dem Font "Georgia" versehen und die h1 Überschrift mit dem Font "Helvetica.". Sie können natürlich niemals wissen welche Schriftarten vom Browser eines Seitenbesuchers dargestellt werden können (so bietet Linux z.B. andere Standardfonts als Windows), also bestimmen Sie Alternativ-Fonts im Falle des fehlenden Haupt-Fonts. Wird z.B. der Font Georgia vermisst soll der Text in Times New Roman oder Times angezeigt werden. Klappt das auch nicht so soll irgendein Font mit Serifen eingesetzt werden. Wenn Helvetica fehlt soll die Anzeige mit Geneva, Arial oder SunSans-Regular erfolgen. Klappt das nun auch nicht so erfolgt die Anzeige mit einer beliebigen Serifen-losen Schriftart. Fügen Sie unserem Dokument in Ihrem Texteditor die folgenden Zeilen (Zeilen 7-8 und 11-13) hinzu: Meine erste HTML/CSS Seite [etc.] Wenn Sie die Datei erneut abspeichern und auf "Aktualisieren" klicken sollten im Text und der Überschrift verschiedene Schriftarten Einsatz finden. Screenshot with fonts added Nun unterscheiden sich die Fonts vom Text und der Überschrift. Schritt 4: Ein Navigations Menu Die Liste am Beginn der HTML Seite soll einmal unser Menu darstellen. Viele Webseiten besitzen ein Navigations Menu am Beginn oder Rand der Seite. So wie wir in Kürze... Wir werden das Menu im linken Bereich platzieren - das ist etwas interessanter als im Kopfbereich der Seite. Das Menu befindet sich bereits in der HTML Seite. Es besteht aus der