#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:
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
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