Ãbungen zu CSS

Inhalte

EinfÃ¼hrung
- Repetition der wichtigsten Punkte zu HTML
CSS
Aufgabe

EinfÃ¼hrung

Du hast bereits gelernt, wie du eine Seite mit HTML erstellst. Die Formatierung und das ganze optische Erscheinungsbild kann komplett mit CSS (Cascading Style Sheets) geregelt werden. Somit wird das Aussehen einer Seite komplett von deren Inhalt getrennt. So kannst du mit einer einzigen CSS-Datei alle deine HTML-Seiten formatieren.

Die folgende Seite wiederholt die Themen der EinfÃ¼hrung. Wenn dir alles klar ist, kannst du gleich zum Auftrag springen.

↑nach oben

Repetition der wichtigsten Punkte zu HTML

Die folgenden, HTML-relevanten Begriffe sollten dir bekannt sein. Zur Repetition, und weil wir diese weiter verwenden wollen, werden sie jedoch nochmals kurz erklÃ¤rt:

Seitenaufbau: Am einfachsten ist der Aufgabu einer Seite mit verschachtelten <div>-Tags.
Tag: Mit T. wird ein HTML-Element bezeichnet. Beispiele fÃ¼r Tags sind z.B. <div>Inhalt</div> oder auch <img src="bildpfad" alt="Bild">.

↑nach oben

CSS

CSS, eine AbkÃ¼rzung fÃ¼r "Cascading Style Sheets" (engl. fÃ¼r stufenfÃ¶rmige oder (hintereinander) geschachtelte Gestaltungsvorlagen), ist eine Scriptsprache, die die Trennung von Design und Inhalt erlaubt. WÃ¤hrend in HTML die Inhalte angelegt werden, wird die Seite anschliessend mit CSS formatiert. Im folgenden wird die Einbindung und Struktur von CSS dargestellt und anschliessend folgen verschiedene MÃ¶glichkeiten, um Stile auf HTML-Elemente anzuwenden.

↑nach oben

Einbinden

CSS-Angaben kÃ¶nnen entweder direkt in einer HTML-Datei (Ã¼blicherweise im <head>-Bereich) eingebaut werden.

Definition im Header

Der folgende Code-block zeigt die CSS-Definition im Header:

<style type="text/css">
<!--

[An dieser Stelle folgen die style-Angaben]

-->
</style>

Zu beachten sind die HTML-Kommentare. Sie verhindern ein irrtÃ¼mliches Interpretieren von CSS-Angaben als HTML durch den Browser.

Definition in eigenem Dokument

Alle CSS-Angaben erfolgen dabei in einem (oder mehreren) separaten Dokument.

Ebenfalls im Headerbereich wird nun die Datei Ã¼ber den folgenden Befehl eingebunden:

<link href="[Dateipfad]" rel="stylesheet" type="text/css" media="[Medientyp]" >

FÃ¼r jede CSS-Datei muss dabei eine solche Zeile eingefÃ¼gt werden. Eine CSS-Datei kann dabei jedoch in beliebig viele HTML-Dateien eingebunden werden. Der Vorteil dieser Methode ist, dass das Design einer Homepage zentral definiert verÃ¤ndert werden kann.

Eine Kombination der beiden Methoden ist grundsÃ¤tzlich mÃ¶glich, aber selten empfehlenswert.

↑nach oben

ID (speziell bei <div>-Tags)

Es kÃ¶nnen auch CSS-Eigenschaften fÃ¼r Tags mit einer bestimmten ID festgelegt werden. Dies wird besonders im Zusammenhang mit <div>-Tags verwendet, welche die Seite strukturieren (vgl. den Auftrag unten). Gehen wir von der folgenden Seitenstruktur aus:

<div id="container">
	<div id="header"></div>
	<div id="navigation"></div>
	<div id="content"></div>
</div>

Wenn wir nun ein bestimmtes <div>-Tag formatieren wollen, kÃ¶nnen wir das mit der Struktur #[Element-ID] tun. Wollen wir zum Beispiel den Container zentriert und mit gelbem Hintergrund definieren, geschieht dies Ã¼ber den folgenden Code:

#container {
	position:relative;
	margin: 0 auto;
	background: #FFFF00;
}

So kann jeses <div>-Tag genau platziert werden. Am besten verwendest du dafÃ¼r die Attribute left, top, height und width.

↑nach oben

Klassen

Als dritte Variante kannst du CSS-Klassen definieren, welche du schliesslich im HTML auf ein Tag anwenden kannst. So kannst du zum Beispiel eine Klasse "meldung" erfassen, um damit wichtige Informationen zu kennzeichnen:

.meldung {
	color: #FF0000;
	font-weight: bold;
	border: 1px solid bold;
}

Jeder Klassenname muss mit einem Punkt beginnen. Im HTML rufst du die Klasse folgendermassen auf (Absatz, auf den die Klasse "meldung" angewendet wird):

<p class="meldung">Das ist ein Absatz, der mit der Klasse "Meldung" formatiert ist.</p>

↑nach oben

Auftrag

Zeit: 40min in der Lektion / 30 min als Hausaufgabe

Gehe zu kadr.ch/css, und erstelle eine neue Seite. Merke dir unbedingt die Nummer deiner neuen Seite, welche dir gross angezeigt wird. Wenn du willst, kannst du dich auch registrieren, dann kannst nur du selbst deine Seite bearbeiten.

Wie sicher fÃ¼hlst du dich im Umgang mit CSS? WÃ¤hle eine der untenstehenden Ãbungen zu CSS.

Weitere Informationen zu den CSS-Befehlen findest du unter http://www.css4you.de/ (deutsch), kadr.ch/css-referenz (englisch) oder direkt auf der Bearbeitungsseite unter "CSS-Referenz"

Schwierigkeitsgrad 1	Schwierigkeitsgrad 2	Schwierigkeitsgrad 3
Bearbeite die folgenden Aufgaben der Reihe nach. Kopiere den CSS- und den HTML-Code in die entsprechenden Felder auf deiner Seite. CSS kennenlernen - spiele etwas im CSS herum, um die verschiedenen Befehle kennen zu lernen. Ãndere die Hintergrundfarbe zu einer dunklen, edel wirkenden, Farbe. Formatiere den Container so, dass er in der Mitte steht. Die Schrift auf deiner Seite soll komplett in Arial und etwas kleiner erscheinen. Die Schrift im Inhaltsbereich soll etwas Abstand zum Rahmen erhalten. Formatiere die Links neu. Gestalte den Header mit einer Hintergrundfarbe und einer anderen Schrift. Wenn du willst, kannst du auf kadr.ch/verlauf einen Verlauf fÃ¼r den Hintergrund erstellen.	Kopiere nur den HTML-Code und schreibe den ganzen CSS-Code dazu selbst. Gestalte eine ansprechende Seite. Folgende Tipps kÃ¶nnten dir dabei helfen. WÃ¤hle eine geeignete Hintergrundfarbe Zentriere den Container Text sollte etwas Abstand zum Rand erhalten Gestalte einen attraktiven Header	Erstelle eine eigene HTML-Struktur und fÃ¼ge den Beispieltext ein. Gestalte mit CSS eine ansprechende Seite. Du kannst dich an den gegebenen Beispielen dieses Dokuments und an den angegebenen Referenz-Seiten orientieren.

Schwierigkeitsgrad 1

Schwierigkeitsgrad 2

Schwierigkeitsgrad 3

Bearbeite die folgenden Aufgaben der Reihe nach.

Kopiere den CSS- und den HTML-Code in die entsprechenden Felder auf deiner Seite.
CSS kennenlernen - spiele etwas im CSS herum, um die verschiedenen Befehle kennen zu lernen.
Ãndere die Hintergrundfarbe zu einer dunklen, edel wirkenden, Farbe.
Formatiere den Container so, dass er in der Mitte steht.
Die Schrift auf deiner Seite soll komplett in Arial und etwas kleiner erscheinen.
Die Schrift im Inhaltsbereich soll etwas Abstand zum Rahmen erhalten.
Formatiere die Links neu.
Gestalte den Header mit einer Hintergrundfarbe und einer anderen Schrift. Wenn du willst, kannst du auf kadr.ch/verlauf einen Verlauf fÃ¼r den Hintergrund erstellen.

Kopiere nur den HTML-Code und schreibe den ganzen CSS-Code dazu selbst. Gestalte eine ansprechende Seite. Folgende Tipps kÃ¶nnten dir dabei helfen.

WÃ¤hle eine geeignete Hintergrundfarbe
Zentriere den Container
Text sollte etwas Abstand zum Rand erhalten
Gestalte einen attraktiven Header

Erstelle eine eigene HTML-Struktur und fÃ¼ge den Beispieltext ein.
Gestalte mit CSS eine ansprechende Seite.
Du kannst dich an den gegebenen Beispielen dieses Dokuments und an den angegebenen Referenz-Seiten orientieren.

Abgabe:
Sende mir den Link zu deiner Seite per Email.

↑nach oben

Quellcodes

CSS-Vorlage

body { background: #0000FF; } #container { position:relative; width:900px; } #header { border:1px solid #FFFFFF; text-align:right; font-size:40px; color:#FFFF00; height:100px; } #content { background:#FFFFFF; } .meldung { color:#FF0000; font-weight:bold; } a:link { color:#FF0000; } a:visited { color:#00FF00; } a:hover { color:#000000; }

HTML-Vorlage

<div id="container"> <div id="header">Seite von [dein Name]</div> <div id="content"> <h1>CSS-Testseite</h1> <p class="meldung">Diese Seite ist im Informatikunterricht an der Schule Musterfingen entstanden</p> <h2>Einführung</h2> <p>Das ist die CSS-Testseite von [dein Name]. Auf dieser Seite werden die Möglichkeiten von CSS getestet und ausprobiert. Geübt werden verschiedene Formatierungsmöglichkeiten an einem Märchen der Gebrüder Grimm.</p> <h1>Rotkäppchen</h1> <p>Quelle: <a href="http://www.maerchenlexikon.de/Grimm/khm-texte/khm026.htm">http://www.maerchenlexikon.de/Grimm/khm-texte/khm026.htm</a>, 30.10.2012</p> <p>Es war einmal eine kleine süsse Dirne, die hatte jedermann lieb, der sie nur ansah, am allerliebsten aber ihre Grossmutter, die wusste gar nicht, was sie alles dem Kinde geben sollte. Einmal schenkte sie ihm ein Käppchen von rotem Sammet, und weil ihm das so wohl stand und es nichts anders mehr tragen wollte, hiess es nur das Rotkäppchen. </p> <p>Eines Tages sprach seine Mutter zu ihm: "Komm, Rotkäppchen, da hast du ein Stück Kuchen und eine Flasche Wein, bring das der Grossmutter hinaus; sie ist krank und schwach und wird sich daran laben. Mach dich auf, bevor es heiss wird, und wenn du hinauskommst, so geh hübsch sittsam und lauf nicht vom Weg ab, sonst fällst du und zerbrichst das Glas, und die Grossmutter hat nichts. Und wenn du in ihre Stube kommst, so vergiss nicht, guten Morgen zu sagen und guck nicht erst in allen Ecken herum." "Ich will schon alles gut machen", sagte Rotkäppchen zur Mutter, und gab ihr die Hand darauf. </p> <p>Die Grossmutter aber wohnte draussen im Wald, eine halbe Stunde vom Dorf. Wie nun Rotkäppchen in den Wald kam, begegnete ihm der Wolf. Rotkäppchen aber wusste nicht, was das für ein böses Tier war, und fürchtete sich nicht vor ihm. "Guten Tag, Rotkäppchen", sprach er. "Schönen Dank, Wolf." "Wo hinaus so früh, Rotkäppchen?" "Zur Grossmutter." "Was trägst du unter der Schürze?" "Kuchen und Wein: gestern haben wir gebacken, da soll sich die kranke und schwache Grossmutter etwas zugut tun und sich damit stärken." "Rotkäppchen, wo wohnt deine Grossmutter?" "Noch eine gute Viertelstunde weiter im Wald, unter den drei grossen Eichbäumen, da steht ihr Haus, unten sind die Nusshecken, das wirst du ja wissen", sagte Rotkäppchen. </p> <p>Der Wolf dachte bei sich: "Das junge zarte Ding, das ist ein fetter Bissen, der wird noch besser schmecken als die Alte: du musst es listig anfangen, damit du beide erschnappst." </p> <p>Da ging er ein Weilchen neben Rotkäppchen her, dann sprach er: "Rotkäppchen, sieh einmal die schönen Blumen, die ringsumher stehen, warum guckst du dich nicht um? Ich glaube, du hörst gar nicht, wie die Vöglein so lieblich singen? Du gehst ja für dich hin, als wenn du zur Schule gingst, und ist so lustig haussen in dem Wald".</p> <p>Rotkäppchen schlug die Augen auf, und als es sah, wie die Sonnenstrahlen durch die Bäume hin- und her tanzten und alles voll schöner Blumen stand, dachte es: "Wenn ich der Grossmutter einen frischen Strauss mitbringe, der wird ihr auch Freude machen; es ist so früh am Tag, dass ich doch zu rechter Zeit ankomme", lief vom Wege ab in den Wald hinein und suchte Blumen. Und wenn es eine gebrochen hatte, meinte es, weiter hinaus stände eine schönere, und lief darnach, und geriet immer tiefer in den Wald hinein. Der Wolf aber ging geradeswegs nach dem Haus der Grossmutter, und klopfte an die Türe. "Wer ist draussen?" "Rotkäppchen, das bringt Kuchen und Wein, mach auf." "Drück nur auf die Klinke", rief die Grossmutter, "ich bin zu schwach und kann nicht aufstehen." Der Wolf drückte auf die Klinke, die Türe sprang auf und er ging, ohne ein Wort zu sprechen, gerade zum Bett der Grossmutter und verschluckte sie. Dann tat er ihre Kleider an, setzte ihre Haube auf, legte sich in ihr Bett und zog die Vorhänge vor.</p> <p>Rotkäppchen aber war nach den Blumen herumgelaufen, und als es so viel zusammen hatte, dass es keine mehr tragen konnte, fiel ihm die Grossmutter wieder ein, und es machte sich auf den Weg zu ihr. Es wunderte sich, dass die Türe aufstand, und wie es in die Stube trat, so kam es ihm so seltsam darin vor, dass es dachte: "Ei, du mein Gott, wie ängstlich wird mir?s heute zumut, und ich bin sonst so gerne bei der Grossmutter!" Es rief "Guten Morgen", bekam aber keine Antwort. Darauf ging es zum Bett und zog die Vorhänge zurück: da lag die Grossmutter, und hatte die Haube tief ins Gesicht gesetzt und sah so wunderlich aus. </p> <p>"Ei, Grossmutter, was hast du für grosse Ohren!" "Dass ich dich besser hören kann." "Ei, Grossmutter, was hast du für grosse Augen!" "Dass ich dich besser sehen kann." "Ei, Grossmutter, was hast du für grosse Hände!" "Dass ich dich besser packen kann." "Aber, Grossmutter, was hast du für ein entsetzlich grosses Maul!" "Dass ich dich besser fressen kann." </p> <p>Kaum hatte der Wolf das gesagt, so tat er einen Satz aus dem Bette und verschlang das arme Rotkäppchen. Wie der Wolf sein Gelüsten gestillt hatte, legte er sich wieder ins Bett, schlief ein und fing an überlaut zu schnarchen. </p> <p>Der Jäger ging eben an dem Haus vorbei und dachte: "Wie die alte Frau schnarcht, du musst doch sehen, ob ihr etwas fehlt." Da trat er in die Stube, und wie er vor das Bette kam, so sah er, dass der Wolf darin lag. "Finde ich dich hier, du alter Sünder", sagte er, "ich habe dich lange gesucht." Nun wollte er seine Büchse anlegen, da fiel ihm ein, der Wolf könnte die Grossmutter gefressen haben, und sie wäre noch zu retten: schoss nicht, sondern nahm eine Schere und fing an, dem schlafenden Wolf den Bauch aufzuschneiden. Wie er ein paar Schnitte getan hatte, da sah er das rote Käppchen leuchten, und noch ein paar Schnitte, da sprang das Mädchen heraus und rief: "Ach wie war ich erschrocken, wie war?s so dunkel in dem Wolf seinem Leib!" Und dann kam die alte Grossmutter auch noch lebendig heraus und konnte kaum atmen. Rotkäppchen aber holte geschwind grosse Steine, damit füllten sie dem Wolf den Leib, und wie er aufwachte, wollte er fortspringen, aber die Steine waren so schwer, dass er gleich niedersank und sich totfiel.</p> <p>Da waren alle drei vergnügt; der Jäger zog dem Wolf den Pelz ab und ging damit heim, die Grossmutter ass den Kuchen und trank den Wein, den Rotkäppchen gebracht hatte, und erholte sich wieder, Rotkäppchen aber dachte: "Du willst dein Lebtag nicht wieder allein vom Weg ab in den Wald laufen, wenn dir?s die Mutter verboten hat." </p> <p>Es wird auch erzählt, dass einmal, als Rotkäppchen der alten Grossmutter wieder Gebackenes brachte, ein anderer Wolf ihm zugesprochen und es vom Wege habe ableiten wollen. Rotkäppchen aber hütete sich und ging gerade fort seines Wegs und sagte der Grossmutter, dass es dem Wolf begegnet wäre, der ihm guten Tag gewünscht, aber so bös aus den Augen geguckt hätte: "Wenn?s nicht auf offener Strasse gewesen wäre, er hätte mich gefressen." "Komm", sagte die Grossmutter, "wir wollen die Türe verschliessen, dass er nicht herein kann." </p> <p>Bald darnach klopfte der Wolf an und rief: "Mach auf, Grossmutter, ich bin das Rotkäppchen, ich bring dir Gebackenes." Sie schwiegen aber still und machten die Türe nicht auf: da schlich der Graukopf etlichemal um das Haus, sprang endlich aufs Dach und wollte warten, bis Rotkäppchen abends nach Hause ginge, dann wollte er ihm nachschleichen und wollt?s in der Dunkelheit fressen. Aber die Grossmutter merkte, was er im Sinn hatte. </p> <p>Nun stand vor dem Haus ein grosser Steintrog, da sprach sie zu dem Kind: "Nimm den Eimer, Rotkäppchen, gestern hab ich Würste gekocht, da trag das Wasser, worin sie gekocht sind, in den Trog." Rotkäppchen trug so lange, bis der grosse, grosse Trog ganz voll war. Da stieg der Geruch von den Würsten dem Wolf im die Nase, er schnupperte, und guckte hinab, endlich machte er den Hals so lang, dass er sich nicht mehr halten konnte und anfing, zu rutschen: so rutschte er vom Dach herab, gerade in den grossen Trog hinein, und ertrank. Rotkäppchen aber ging fröhlich nach Haus, und tat ihm niemand etwas zuleid.</p> </div></div>

Beispieltext

RotkÃ¤ppchen Quelle: http://www.maerchenlexikon.de/Grimm/khm-texte/khm026.htm, 30.10.2012 Es war einmal eine kleine sÃ¼sse Dirne, die hatte jedermann lieb, der sie nur ansah, am allerliebsten aber ihre Grossmutter, die wusste gar nicht, was sie alles dem Kinde geben sollte. Einmal schenkte sie ihm ein KÃ¤ppchen von rotem Sammet, und weil ihm das so wohl stand und es nichts anders mehr tragen wollte, hiess es nur das RotkÃ¤ppchen. Eines Tages sprach seine Mutter zu ihm: "Komm, RotkÃ¤ppchen, da hast du ein StÃ¼ck Kuchen und eine Flasche Wein, bring das der Grossmutter hinaus; sie ist krank und schwach und wird sich daran laben. Mach dich auf, bevor es heiss wird, und wenn du hinauskommst, so geh hÃ¼bsch sittsam und lauf nicht vom Weg ab, sonst fÃ¤llst du und zerbrichst das Glas, und die Grossmutter hat nichts. Und wenn du in ihre Stube kommst, so vergiss nicht, guten Morgen zu sagen und guck nicht erst in allen Ecken herum." "Ich will schon alles gut machen", sagte RotkÃ¤ppchen zur Mutter, und gab ihr die Hand darauf. Die Grossmutter aber wohnte draussen im Wald, eine halbe Stunde vom Dorf. Wie nun RotkÃ¤ppchen in den Wald kam, begegnete ihm der Wolf. RotkÃ¤ppchen aber wusste nicht, was das fÃ¼r ein bÃ¶ses Tier war, und fÃ¼rchtete sich nicht vor ihm. "Guten Tag, RotkÃ¤ppchen", sprach er. "SchÃ¶nen Dank, Wolf." "Wo hinaus so frÃ¼h, RotkÃ¤ppchen?" "Zur Grossmutter." "Was trÃ¤gst du unter der SchÃ¼rze?" "Kuchen und Wein: gestern haben wir gebacken, da soll sich die kranke und schwache Grossmutter etwas zugut tun und sich damit stÃ¤rken." "RotkÃ¤ppchen, wo wohnt deine Grossmutter?" "Noch eine gute Viertelstunde weiter im Wald, unter den drei grossen EichbÃ¤umen, da steht ihr Haus, unten sind die Nusshecken, das wirst du ja wissen", sagte RotkÃ¤ppchen. Der Wolf dachte bei sich: "Das junge zarte Ding, das ist ein fetter Bissen, der wird noch besser schmecken als die Alte: du musst es listig anfangen, damit du beide erschnappst." Da ging er ein Weilchen neben RotkÃ¤ppchen her, dann sprach er: "RotkÃ¤ppchen, sieh einmal die schÃ¶nen Blumen, die ringsumher stehen, warum guckst du dich nicht um? Ich glaube, du hÃ¶rst gar nicht, wie die VÃ¶glein so lieblich singen? Du gehst ja fÃ¼r dich hin, als wenn du zur Schule gingst, und ist so lustig haussen in dem Wald". RotkÃ¤ppchen schlug die Augen auf, und als es sah, wie die Sonnenstrahlen durch die BÃ¤ume hin- und her tanzten und alles voll schÃ¶ner Blumen stand, dachte es: "Wenn ich der Grossmutter einen frischen Strauss mitbringe, der wird ihr auch Freude machen; es ist so frÃ¼h am Tag, dass ich doch zu rechter Zeit ankomme", lief vom Wege ab in den Wald hinein und suchte Blumen. Und wenn es eine gebrochen hatte, meinte es, weiter hinaus stÃ¤nde eine schÃ¶nere, und lief darnach, und geriet immer tiefer in den Wald hinein. Der Wolf aber ging geradeswegs nach dem Haus der Grossmutter, und klopfte an die TÃ¼re. "Wer ist draussen?" "RotkÃ¤ppchen, das bringt Kuchen und Wein, mach auf." "DrÃ¼ck nur auf die Klinke", rief die Grossmutter, "ich bin zu schwach und kann nicht aufstehen." Der Wolf drÃ¼ckte auf die Klinke, die TÃ¼re sprang auf und er ging, ohne ein Wort zu sprechen, gerade zum Bett der Grossmutter und verschluckte sie. Dann tat er ihre Kleider an, setzte ihre Haube auf, legte sich in ihr Bett und zog die VorhÃ¤nge vor. RotkÃ¤ppchen aber war nach den Blumen herumgelaufen, und als es so viel zusammen hatte, dass es keine mehr tragen konnte, fiel ihm die Grossmutter wieder ein, und es machte sich auf den Weg zu ihr. Es wunderte sich, dass die TÃ¼re aufstand, und wie es in die Stube trat, so kam es ihm so seltsam darin vor, dass es dachte: "Ei, du mein Gott, wie Ã¤ngstlich wird mir?s heute zumut, und ich bin sonst so gerne bei der Grossmutter!" Es rief "Guten Morgen", bekam aber keine Antwort. Darauf ging es zum Bett und zog die VorhÃ¤nge zurÃ¼ck: da lag die Grossmutter, und hatte die Haube tief ins Gesicht gesetzt und sah so wunderlich aus. "Ei, Grossmutter, was hast du fÃ¼r grosse Ohren!" "Dass ich dich besser hÃ¶ren kann." "Ei, Grossmutter, was hast du fÃ¼r grosse Augen!" "Dass ich dich besser sehen kann." "Ei, Grossmutter, was hast du fÃ¼r grosse HÃ¤nde!" "Dass ich dich besser packen kann." "Aber, Grossmutter, was hast du fÃ¼r ein entsetzlich grosses Maul!" "Dass ich dich besser fressen kann." Kaum hatte der Wolf das gesagt, so tat er einen Satz aus dem Bette und verschlang das arme RotkÃ¤ppchen. Wie der Wolf sein GelÃ¼sten gestillt hatte, legte er sich wieder ins Bett, schlief ein und fing an Ã¼berlaut zu schnarchen. Der JÃ¤ger ging eben an dem Haus vorbei und dachte: "Wie die alte Frau schnarcht, du musst doch sehen, ob ihr etwas fehlt." Da trat er in die Stube, und wie er vor das Bette kam, so sah er, dass der Wolf darin lag. "Finde ich dich hier, du alter SÃ¼nder", sagte er, "ich habe dich lange gesucht." Nun wollte er seine BÃ¼chse anlegen, da fiel ihm ein, der Wolf kÃ¶nnte die Grossmutter gefressen haben, und sie wÃ¤re noch zu retten: schoss nicht, sondern nahm eine Schere und fing an, dem schlafenden Wolf den Bauch aufzuschneiden. Wie er ein paar Schnitte getan hatte, da sah er das rote KÃ¤ppchen leuchten, und noch ein paar Schnitte, da sprang das MÃ¤dchen heraus und rief: "Ach wie war ich erschrocken, wie war?s so dunkel in dem Wolf seinem Leib!" Und dann kam die alte Grossmutter auch noch lebendig heraus und konnte kaum atmen. RotkÃ¤ppchen aber holte geschwind grosse Steine, damit fÃ¼llten sie dem Wolf den Leib, und wie er aufwachte, wollte er fortspringen, aber die Steine waren so schwer, dass er gleich niedersank und sich totfiel. Da waren alle drei vergnÃ¼gt; der JÃ¤ger zog dem Wolf den Pelz ab und ging damit heim, die Grossmutter ass den Kuchen und trank den Wein, den RotkÃ¤ppchen gebracht hatte, und erholte sich wieder, RotkÃ¤ppchen aber dachte: "Du willst dein Lebtag nicht wieder allein vom Weg ab in den Wald laufen, wenn dir?s die Mutter verboten hat." Es wird auch erzÃ¤hlt, dass einmal, als RotkÃ¤ppchen der alten Grossmutter wieder Gebackenes brachte, ein anderer Wolf ihm zugesprochen und es vom Wege habe ableiten wollen. RotkÃ¤ppchen aber hÃ¼tete sich und ging gerade fort seines Wegs und sagte der Grossmutter, dass es dem Wolf begegnet wÃ¤re, der ihm guten Tag gewÃ¼nscht, aber so bÃ¶s aus den Augen geguckt hÃ¤tte: "Wenn?s nicht auf offener Strasse gewesen wÃ¤re, er hÃ¤tte mich gefressen." "Komm", sagte die Grossmutter, "wir wollen die TÃ¼re verschliessen, dass er nicht herein kann." Bald darnach klopfte der Wolf an und rief: "Mach auf, Grossmutter, ich bin das RotkÃ¤ppchen, ich bring dir Gebackenes." Sie schwiegen aber still und machten die TÃ¼re nicht auf: da schlich der Graukopf etlichemal um das Haus, sprang endlich aufs Dach und wollte warten, bis RotkÃ¤ppchen abends nach Hause ginge, dann wollte er ihm nachschleichen und wollt?s in der Dunkelheit fressen. Aber die Grossmutter merkte, was er im Sinn hatte. Nun stand vor dem Haus ein grosser Steintrog, da sprach sie zu dem Kind: "Nimm den Eimer, RotkÃ¤ppchen, gestern hab ich WÃ¼rste gekocht, da trag das Wasser, worin sie gekocht sind, in den Trog." RotkÃ¤ppchen trug so lange, bis der grosse, grosse Trog ganz voll war. Da stieg der Geruch von den WÃ¼rsten dem Wolf im die Nase, er schnupperte, und guckte hinab, endlich machte er den Hals so lang, dass er sich nicht mehr halten konnte und anfing, zu rutschen: so rutschte er vom Dach herab, gerade in den grossen Trog hinein, und ertrank. RotkÃ¤ppchen aber ging frÃ¶hlich nach Haus, und tat ihm niemand etwas zuleid.

Quellen

MÃ¼ller Peter, 2011, "Da grosse little Boxes Buch", "Webseiten gestalten mit HTML und CSS", Markt+Technik
http://de.wikipedia.org/wiki/Cascading_Style_Sheets, 24.10.2012
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active, 25.10.2012

Ãbungen zu CSS

Inhalte

EinfÃ¼hrung

Repetition der wichtigsten Punkte zu HTML

CSS

Einbinden

Definition im Header

Definition in eigenem Dokument

Tags

<a>-Tag

ID (speziell bei <div>-Tags)

Klassen

Auftrag

Quellcodes

CSS-Vorlage

HTML-Vorlage

Beispieltext

Quellen

Ãbungen zu CSS