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; }
Beispiel anzeigen 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; }
Beispiel anzeigen 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; }
Beispiel anzeigen 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("http://www.html.net/butterfly.gif") 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 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 Beispiel anzeigen background-repeat: repeat-y Das Bild wird vertikal wiederholt Beispiel anzeigen background-repeat: repeat Das Bild wird sowohl horizontal als auch vertikal wiederholt Beispiel anzeigen background-repeat: no-repeat Das Bild wird nicht wiederholt Beispiel anzeigen
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; }
Beispiel anzeigen Hintergrundbild fixieren: die Eigenschaft ‘background-attachment’ 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 Beispiel anzeigen background-attachment: fixed Das Bild ist fixiert Beispiel anzeigen
Im nachfolgenden Code ist das Hintergrundbild fixiert.
Beispiel anzeigen 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 Das Bild befindet sich 2 cm vom linken und 2 cm vom oberen Rand der Seite entfernt Beispiel anzeigen background-position: 50% 25% Das Bild ist zentriert und ein Viertel vom oberen Rand entfernt Beispiel anzeigen background-position: top right Das ist ist in der oberen rechten Ecke der Seite positioniert 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; background-position: right bottom; }
h1 { color: #990000; background-color: #FC9804; }
Beispiel anzeigen 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.
Wird eine Eigenschaft ausgelassen, wird automatisch der Standardwert der jeweiligen Eigenschaft eingesetzt. Werden z.B. background-attachment und background-position aus dem Beispiel entfernt:
… 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 man mit CSS und Schriften (fonts) alles machen kann.
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:
<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> ... 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. Herzlichen Glückwunsch! Sie haben soeben Ihr erstes Stylesheet erstellt.
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.
Diese HTML-Einführung ist auch als interaktives Lernprogramm "HTML-Tutor" an der PH Freiburg verfügbar.
Bitte beachten Sie: Meine HTML-Einführung beschreibt - neben ein paar allgemeinen, "ewig gültigen" Grundideen und Hinweisen zur Usability - nur die HTML-Version 3.2. Für aktuellere HTML-Dokumentationen verweise ich auf Stefan Münz und die vielen sonstigen Referenzen.
Wegweiser Das hier ist nicht ein lineares Handbuch, sondern ein Hypertext. Sie können ihn auf viele verschiedene Arten lesen, je nachdem, was Sie erreichen wollen. Was wollen Sie erreichen?
Ich möchte den kompletten Text am Bildschirm lesen. Ich möchte den kompletten Text als Handbuch auf Papier ausdrucken. Ich möchte im Inhaltsverzeichnis herumblättern. Das ist mir alles zu lang, ich möchte eine Kurz-Info. Ich möchte rasch einen bestimmten HTML-Befehl nachschlagen. Ich möchte kurz erfahren, wofür WWW und HTML überhaupt gut sind. Ich kenne mich im WWW schon recht gut aus und möchte alles über die HTML-Befehle erfahren. Ich möchte nur rasch eine kurze Information im WWW veröffentlichen. Ich möchte eine umfangreiche Information gut strukturiert im WWW veröffentlichen. Ich möchte eine tolle Liste von heißen Verbindungen zu kühlen Quellen zusammenstellen. Ich möchte, dass meine Informationen möglichst bunt und modern aussehen. Ich möchte, dass meine Informationen von möglichst vielen Leuten gelesen werden. Ich möchte mehr über die Hintergründe von WWW und HTML erfahren. Ich möchte die HTML-Einführung auf meinem Computer off-line lesen. Ich möchte die HTML-Einführung in einer Schulung verwenden. Ich möchte eigentlich etwas ganz anderes.
Ich möchte den kompletten Text lesen. Vorwort Grundlagen Textelemente Hypertext-Links Bilder und Töne Layout Spezialeffekte Interaktion mit dem Benutzer Geschichte und Geschichten Entwicklungen für die Zukunft Wörterbuch (Glossar) Referenzen Liste der HTML-Befehle (Index)
Ich möchte das komplette Handbuch auf Papier ausdrucken. Für das Ausdrucken der HTML-Einführung auf Papier gibt es zwei Möglichkeiten: Entweder Sie lesen die HMTL-Files (siehe komplettes Handbuch) und drucken jeden Teil mit dem Druck-Befehl (print) Ihres Web-Browsers auf Ihrem lokalen Drucker aus, oder Sie laden eines der folgenden Files auf Ihren PC herunter: ftp://ftp.boku.ac.at/www/htmleinf.ps (PostScript, ca. 1 MByte) ftp://ftp.boku.ac.at/www/htmleinf.ps.gz (mit gnuzip komprimiert, ca. 300 kBytes) http://www.boku.ac.at/htmleinf/htmleinf.pdf (PDF, ca. 1 MByte) Das PostScript-File kann nur direkt auf einen PostScript-fähigen Drucker kopiert werden. Es ergibt einen Printout von ungefähr 100 Seiten. Bitte, beachten Sie in beiden Fällen die Copyright-Bestimmungen.
Ich möchte einen bestimmten HTML-Befehl nachschlagen. Verwenden Sie den Textsuche-Befehl Ihres Web-Browsers in der alphabetischen Liste der HTML-Befehle oder im ausführlichen Inhaltsverzeichnis.
Ich möchte kurz erfahren, wofür WWW und HTML überhaupt gut sind. Vorwort Was ist WWW? Was ist HTML? Was kann ich im WWW veröffentlichen? Wie kann ich Web-Pages erstellen? Wie kann ich etwas im WWW veröffentlichen?
Ich möchte rasch eine kurze Information im WWW veröffentlichen. Vorwort Verwendung von MS-Word Aufbau eines HTML-Files Absätze und Zeilenumbruch Buchstaben und Sonderzeichen Wie kann ich meine HTML-Files erstellen? Wie kann ich meine HTML-Files im WWW verfügbar machen?
Ich möchte eine umfangreiche Information gut strukturiert im WWW veröffentlichen. Vorwort Frisch geplant ist halb gewonnen! Aufteilung der Information auf einzelne HTML-Files Inhalt und Form Richtige HTML Format der Markup-Befehle (HTML-Tags) Aufbau eines HTML-Files Textelemente Hypertext-Links Inhaltsverzeichnisse Wie kann ich meine HTML-Files erstellen? Wie kann ich meine HTML-Files im WWW veröffentlichen?
Ich möchte eine Liste von "heißen" Verbindungen zusammenstellen. Vorwort Suchhilfen im WWW URLs Verweise zu anderen Informationen Listen von Verweisen Format der Listen
Ich möchte, dass meine Informationen bunt und modern aussehen Vorwort Frisch geplant ist halb gewonnen! die Wirkung auf die Menschen Inhalt und Form Richtige HTML Bilder und Töne Farben Trennlinien hervorgehobene Wörter hervorgehobene Absätze Überschriften Listen und Aufzählungen Layout und Spezialeffekte
Ich möchte, dass meine Informationen von vielen Leuten gelesen werden. Vorwort Frisch geplant ist halb gewonnen! Wie kann ich meine HTML-Files im WWW veröffentlichen? Was soll ich im WWW veröffentlichen? Wie werden meine Informationen gesucht? Wie kann ich Reklame für meine Informationen machen? Schlagwörter für Suchhilfen Schönes Layout die Wirkung auf die Menschen Günstige Aufteilung Richtige HTML Inhalt und Form Zugriffe zählen
Ich möchte mehr über die Hintergründe von WWW und HTML erfahren. Vorwort Geschichte und Geschichten WWW - Was ist das? Was darf ich im WWW veröffentlichen? Was soll ich im WWW veröffentlichen? Inhalt und Form Richtige HTML Referenzen
Inhaltsverzeichnis Vorwort Grundlagen WWW - Was ist das? Inhalt Was darf ich im WWW veröffentlichen? Was soll ich im WWW veröffentlichen? Frisch geplant ist halb gewonnen! Inhalt und Form Richtige HTML Was ist richtig? Weltweite Zusammenarbeit oder Firmenabhängigkeit Format der Markup-Befehle (HTML-Tags) Aufbau eines HTML-Files
Ihr wollt auch ere heimet auf der Landkarte eintragen?!?
Falls ja, müss ihr mir nur eine Private Mail schreiben, mit !genauer! Adresse angeben. Wenn ihr das gemacht habt schreibe ich euch zurück, und gebe ein o.k. Danach heist es nur noch warten.
Sie sind vermutlich noch nicht im Forum angemeldet - Klicken Sie hier um sich kostenlos anzumelden
15.03.2008 20:04
