|
|
LE08 - CSS Style-Sheets
|
CSS-Style-Sheets (Cascading Style-Sheets)
… verwendest du zum Gestalten von Webseiten.
Bisher hast du deine Befehle zur Formatierung immer dort hingeschrieben, wo du einen Text fett, farbig, kursiv, ... wolltest.
Auch bei Tabellen bist du so vorgegangen.
Der große Vorteil von CSS ist, es gibt eine zentrale Datei, in dieser werden alle Formate festgehalten.
1. Lege einen neuen Ordner mit dem Namen „css“ an!
2. Speichere die Datei „style.css“ im Ordner „css“.
3. Die Dateiendung muss .css sein!
4. Öffne die Datei „style.css“ mit einem Editor und beachte den Aufbau der css-Datei!
<html>
<head>
<title>...</title>
<style type=“text/css“>
<!--
Hier stehen die Layoutvorlagen
//-->
</style>
</head>
<body>
</body>
</html>
Mit verschiedenen Klassen kannst du verschiedene Designs festlegen.
Beispiel:
In der css-Datei: tda1{ font-family: Arial; font-size:12px; ... }
In der html-Datei: <td class=“a1“>Text</td>
5. Speichere die Datei „style.html“ im Ordner „css“!
6. Öffne sie mit dem Editor und schau sie mit einem Browser an!
7. Erkläre warum sie verschiedene Hintergrundfarben hat!
8. Speichere die Datei „style1.html“; „style2.html“; „style3.html“ und „style4.html“ im Ordner „css“.
9. Schau dir den Quelltext und die Browseransicht an!
10. Erkläre, wie die Formatierungen entstehen!
11. Füge in der Datei „style.css“ zwei Klassen a5 und a6 hinzu!
12. Erstelle eine Datei „style5.html“ und „style6.html“ in der du die Klassen a5 und a6 anwendest!
13. Erstelle einen neuen Ordner „advent“ und eine neue Website mit dem Namen „advent.html“!
14. Erstelle eine css-Datei mit mindestens sechs verschiedenen Klassen. Wähle verschiedene Grüntöne!
Tipps zu Farben: www.netzwelt.com
 Die html-Datei soll eine Tabelle mit 6 Zeilen und 4 Spalten enthalten. Also 24 Fenster.
Suche weihnachtliche Bilder im Internet und speichere sie in deinem Ordner!
In jeder Zelle soll eine Zahl von 1 bis 24 stehen.
Beim Anklicken soll sich ein neues Fenster mit einem weihnachtlichen Bild öffnen!
<a href=“advent.jpg“ target=“_blank“>1</a>
Schau dir das Beispiel an! |
|
|
|
|
