Unterschiede
Hier werden die Unterschiede zwischen der gewählten und der aktuellen Version gezeigt.
| start:info:08_diff:selfhtml-css 01.11.2008 15:06 | start:info:08_diff:selfhtml-css 23.10.2013 10:12 aktuell | ||
|---|---|---|---|
| Zeile 50: | Zeile 50: | ||
| - **Kopiere** folgende Datei in dein "09if"-Verzeichnis und entpacke ihn: [[http://home.arcor.de/kag-alkan/meineHP.zip|meineHP.zip]].\\ \\ **Achtung! Das einzige, was Du verändern darfst, sind die Styles!!!** | - **Kopiere** folgende Datei in dein "09if"-Verzeichnis und entpacke ihn: [[http://home.arcor.de/kag-alkan/meineHP.zip|meineHP.zip]].\\ \\ **Achtung! Das einzige, was Du verändern darfst, sind die Styles!!!** | ||
| - Öffne nun die **"index.html"**. Kannst du eine **Struktur** erkennen? | - Öffne nun die **"index.html"**. Kannst du eine **Struktur** erkennen? | ||
| - | - Erstelle im **''<head>''**-Teil einen **''<style>''**-Bereich | + | - Erstelle im **''<head>''**-Teil einen **''<style>''**-Bereich //(Tipp: siehe auch obiges Bild)// |
| * Gib den selector **"''body''"** gefolgt von einer öffnenden **("''{''")** und schließenden **("''}''")** geschweiften Klammer an. | * Gib den selector **"''body''"** gefolgt von einer öffnenden **("''{''")** und schließenden **("''}''")** geschweiften Klammer an. | ||
| * Wir wollen die **Hintergrundfarbe** auf ein helles blau setzen; benutze hierzu die Eigenschaft **"''background-color''"**. Gib sie in die geschweifte Klammer gefolgt von einem **Doppelpunkt ("'':''")**, dem Wert für die **helle blaue Farbe** und einem **Semikolon ("'';''")** ein. | * Wir wollen die **Hintergrundfarbe** auf ein helles blau setzen; benutze hierzu die Eigenschaft **"''background-color''"**. Gib sie in die geschweifte Klammer gefolgt von einem **Doppelpunkt ("'':''")**, dem Wert für die **helle blaue Farbe** und einem **Semikolon ("'';''")** ein. | ||
| Zeile 58: | Zeile 58: | ||
| - Für besonders Flinke: Bei [[http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus|SelfHTML]] findest du eine Beschreibung zu **Pseudoformaten**. **Probiere** verschiedene Formatierungen aus. Ändere dann die Formatierung bei **"'':hover''"** so, dass der **Hintergrund** einen **hellen roten** Ton hat. | - Für besonders Flinke: Bei [[http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus|SelfHTML]] findest du eine Beschreibung zu **Pseudoformaten**. **Probiere** verschiedene Formatierungen aus. Ändere dann die Formatierung bei **"'':hover''"** so, dass der **Hintergrund** einen **hellen roten** Ton hat. | ||
| - Es bestehen schon 3 fertige Layouts für diese Seite. Sie werden im ''<head>''-Bewreich integriert:\\ <code html><link rel="STYLESHEET" type="text/css" href="css/layoutX.css" /></code>\\ Ersetze das **"X"** durch "1", "2" oder "3" und schau dir die Ergebnisse an. Wo sind die *.css-Dateien hierzu? | - Es bestehen schon 3 fertige Layouts für diese Seite. Sie werden im ''<head>''-Bewreich integriert:\\ <code html><link rel="STYLESHEET" type="text/css" href="css/layoutX.css" /></code>\\ Ersetze das **"X"** durch "1", "2" oder "3" und schau dir die Ergebnisse an. Wo sind die *.css-Dateien hierzu? | ||
| - | - Für den Unterricht am Montag: [[http://home.arcor.de/kag-alkan/css_selektoren.zip|css_selektoren.zip]] | + | - Für den Unterricht in der nächsten Stunde: [[http://home.arcor.de/kag-alkan/css_selektoren.zip|css_selektoren.zip]] |
