***** Übungen: externes Stylesheet *****
CSS_2-1: Erste Übung mit externem Stylesheet
1. Erstellen Sie ein Verzeichnis für Ihr neues Projekt.
2. Erstellen Sie mit Notepad++ eine Datei, die diesen Inhalt hat:
--- CSS-Code Start ---
h1 {
color : green;
}
--- CSS-Code Ende ---
3. Speichern Sie diese Datei als style.css (wichtig ist die Dateiendung!).
4. Erstellen Sie im gleichen Verzeichnis eine HTML-Datei und hängen Sie die CSS-Datei an.
5. Experimentieren Sie evtl. mit weiteren optischen Veränderungen, z.B.
--- CSS-Code Start ---
body {
background-color : yellow;
font-size : 32px;
}
--- CSS-Code Ende ---
@@@
CSS_2-2: Ein CSS Stylesheet für mehrere HTML-Dateien
1.Suchen Sie drei beliebige HTML-Dateien, die Sie bisher erstellt haben. (ALTERNATIVE: Falls Sie keine Dateien bei der Hand haben, erstellen Sie im Projekt von Aufgabe 2-1 eine neue.) Hängen Sie das Stylesheet unten an. Betrachten Sie das Ergebnis im Browser.
2.Ändern Sie im Stylesheet die Hintergrundfarbe zu #bcffcd . Beachten Sie, dass sich die Änderung auf alle Dateien auswirkt!
--- CSS-Code Start ---
body {
background-color : #f4f4f4;
font-family : Arial, Verdana, sans-serif;
color : #1b1b1b;
margin : 40px;
border : 1px dashed #d8d8d8;
padding : 9px 3px 6px 9px;
}
--- Code Ende ---
@@@
CSS_2-3: Style-Definition im Head eines HTML-Dokuments: Fehler finden
Die folgenden Ausschnitte sind jeweils fehlerhaft. Suchen Sie die Fehler.
*** Ausschnitt 1 ***
--- CSS-Code Start ---
TITEL
Überschrift
...
--- Code Ende ---
*** Ausschnitt 2 ***
--- CSS-Code Start ---
TITEL
...
--- Code Ende ---
@@@
CSS_2-4: Stile im Head festlegen
Ergänzen Sie den Kopf des folgenden Dokuments um folgende Stilinformationen:
– body: schwarzer Hintergrund, hellgrüne Schrift, Verdana, 12px
– Absatz: Zeilenabstand 140%
– h1: 20px, weiß – h2: 16px, hellgrün
--- HTML-Code Start ---
TITEL
...
--- Code Ende ---
@@@
CSS_2-5: Stildefinitionen ausprobieren
Kopieren Sie die Stildefinitionen der vorigen Aufgabe in einige Dokumente, die Sie bisher angelegt haben und überprüfen Sie die Funktionsweise.
@@@
CSS_2-6: Einfaches externes Stylesheet einbinden
1.Hängen Sie an die Datei ein externes Stylesheet an, das alle h1-Überschriften in Verdana, 20px, rot formatiert. Überprüfen Sie die Funktionsfähigkeit.
2.Verschönern Sie Ihr Layout, indem Sie das Stylesheet ergänzen. Die Listenelemente sollen ohne Aufzählungszeichen horizontal angeordnet sein (benutzen Sie dazu das Web mit der Suchanfrage "css listen formatieren" o.ä.).
--- HTML-Code Start ---
Uebung: Externes Stylesheet einbinden
Absatz 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.
Absatz 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.
Liste
--- Code Ende ---
@@@