Einsendeaufgabe zu Studienheft CSSE1

- Cascading Style Sheets -

Frage 1

Erstellen Sie ein externes Syte-Sheet für eine Horoskop-HTML-Seite entsprechend der folgenden Abbildung:
Abbildung zu Aufgabe 1 aus Heft CSSE1
Abb. 1: Das Wochenhoroskop

Folgende Formatierungen werden benutzt:
Zelleninhalte: werden oben bündig ausgerichtet, Hintergrund #CCDAEA
Überschrift: zentriert, Hintergrund #0080C0, Schrift weiß, Schriftart Arial, Helvetica, sans-serif; Schriftgröße 24 Punkt, Schriftstärke dicker
Sternzeichen: Schrift Arial, Helvetica, sans-serif; unterstrichen; Schriftgröße 16 Punkt, Schrift fett.
Weischentitel: Schriftgröße 10 Punkt; Hintergrund #0080C0; Schriftart Verdana.
Lauftext: Schriftgröße 8 Punkt, Schriftart Verdana

Die Dateien können HIER angesehen werden.
Die Quelldateien können unter HIER runter geladen werden.

Eine flexible Variante habe ich HIER hoch geladen.
Die Quelldateien für diese Variante können HIER runtergeladen werden.

Frage 2

Geben Sie den Quellcode für eine HTML-Seite an, bei der die separate Style-Sheet-Datei design.css in den Dateikopf eingebunden wird.

<head>
<title>...</title>
<link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body>
…
</body>
Frage 3

Wie werden Format-Unterklassen, die Sie definiert haben, im Dateikörper aufgerufen?

Dem zu formatierendem Tag wird eine Klassenbezeichnung wie im Beispiel zugewiesen:

<tag class=“name“>...</tag>
Frage 4

Welchen Vorteil bieten so genannte Inline-Syles?

Einzelne Tags können so einmalig mit einem besonderen Style versehen werden. Ist dem Tag ein Style in einer CSS-Datei oder im Kopf der HTML-Datei zugewiesen, wird dieser durch die Angaben im Inline-Style überschrieben.

Frage 5

Erklären Sie den unterschied zwischen ABSOLUT und RELATIV am Beispiel der Schriftgröße.

Wird die Schriftgröße durch die Angabe in px, mm, cm etc. wird sie auch in der angegebenen Größe dargestellt. (ABSOLUT)

Wird die Größe aber in % oder em angegeben, wird sie RELATIV zur im Browser voreingestellten Größe dargestellt.

Frage 6

Worauf müssen Sie achten, wenn Sie einem Element, das aus mehreren Textzeilen besteht, eine durchgängige Hintergrundfarbe geben wollen?

Das Element sollte NICHT in einem - Tag stehen, das sonst nicht der komplette Absatz mit der Hintergrundfarbe dargestellt wird, sondern nur der eingegebene Text-Abschnitt.

Frage 7

Wozu dient die Angabe REPEAT in CSS?

REPEAT legt die Eigenschaften für das wiederholen von Hintergrundgrafiken fest. Erlaubt sind die Anweisungen: no-repeat; repeat; repeat -x und repeat-y

Frage 8

Warum könnte das Syle-Sheet in dem nachstehenden HTML-Dokument bei älteren Browsern zu Problemen führen? Was könnte hierbei passieren? Wie muss es richtig lauten?

<html>
<head>
	<title>Fehler</title>
<style type=“text/css“>

p.rahmen {
	border-style: solid;
	border-color: blue;
	border-width: medium;
	}

</style>
</head>
<body>
<p class=“rahmen“>Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz </p>
</body>
</html>

Ältere Browser verstehen CSS-Anweisungen nicht, und würden sie als normalen Text darstellen. Damit dies nicht passiert, werden CSS-Anweisungen in HTML-Kommentare gefasst. Hier der richtige Quellcode:

<html>
<head>
	<title>Fehler</title>
<style type=“text/css“>
<!--
p.rahmen {
	border-style: solid;
	border-color: blue;
	border-width: medium;
	}
-->
</style>
</head>
<body>
<p class=“rahmen“>Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz </p>
</body>
</html>
Frage 9

Mit welcher Style-Anweisung können Sie gewährleisten, dass das blaue Element entsprechend der folgenden Abbildung über dem grauen Element liegt?

Durch den „z-index“. Das blaue Element muss einen höheren z-index zugewiesen bekommen als das graue Elemen. Je höher der z-index, desto weiter oben liegt das Element.

Frage 10

Welche Regel müssen Sie beachten, wenn Sie alle drei Anwendungsmöglichkeiten von Cascading Style Sheets auf einer HTML-Seite miteinander kombinieren?

Man muss die „Hierarchie“ der benutzten Styles beachten.

Externe Styles werden von Styles im Kopf-Bereich der HTML-Datei überschrieben, die wiederum von den Inline-Styles überschrieben werden