Sie sind hier: Startseite • Studium • Lerninhalte • CCSE1

Geprüfter Webmaster - Lerninhalte

CSSE1 - CSS Cascading Style Sheets

Aufgabe 1: Erstellen Sie ein externes Style- Sheet für eine Horoskop- HTML- Seite entsprechend der folgenden Abbildung.

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
Zwischentitel:	Schriftgröße 10 Punkt; Hintergrund #0080C0; Schriftart Verdana
Lauftext:	Schriftgröße 8 Punkt; Schriftart Verdana

Lösung

Externes Style- Sheet für eine Horoskop- HTML- Seite:

h      {text-align: center; 
        background-color: #0080C0; 
        color: white; 
        font-family: Arial, Helvetica, sans-serif; 
        font-size: 24pt;
        font-weight: bolder; } 
        
td     {background-color: #CCDAEA;
        vertical-align: top;}

p.sternzeichen
        {font-family: Arial, Helvetica, sans-serif; 
        font-size: 16pt; 
        font-weight: bold;
        text-decoration: underline;}  

p.zwischentitel 
        {font-family: Verdana; 
        font-size: 10pt;
        background-color: #0080C0;}
        
p.lauftext
        {font-size: 8pt; 
        font-family: Verdana}

Lösung schließen

Aufgabe 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.

Lösung

Quellcode für eine HTML- Seite, bei der die separate Style- Sheet- Datei design.css in den Dateikopf eingebunden wird (am Beispiel der Horoskop- HTML- Seite aus Aufgabe 1):


<DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/DTD/loose.dtd">
<html>
<head>
    <title>CSSE: Wochenhoroskop</title>
    <meta name= "author" content ="Margarita Miagkova">
    <link rel="STYLESHEET" href="design.css" type="text/css">
</head>

<body>
    <table width="100%" border="all">
        <tr> 
            <th colspan="3">Wochenhoroskop vom 20. bis 26. Oktober 2010</th>  
        </tr> 
        <tr>
            <td width="33%">
                <p class="sternzeichen">Widder: 21.03.-20.04.</p>
                <p class="zwischentitel">Liebe</p> 
                <p class="lauftext">Nur keine emotionalen ...</p>
                <p class="zwischentitel">Beruf</p>
                <p class="lauftext">Der berufliche Alltag ...</p>
                <p class="zwischentitel">Gesundheit</p>
                <p class="lauftext">Überschätzen Sie Ihre Kondition ... </p> 
            </td> 
            <td width="33%">
                <p class="sternzeichen">Stier: 21.04.-21.05. </p>
                <p class="zwischentitel">Liebe</p>
                <p class="lauftext">Die kosmischen Einflüsse  ...</p>
                <p class="zwischentitel">Beruf</p>
                <p class="lauftext">Erfolge sind jetzt durchaus möglich ...</p>
                <p class="zwischentitel">Gesundheit</p>
                <p class="lauftext">Fitness und Wohlbefinden ... </p>
            </td>
            <td width="33%">
                <p class="sternzeichen">Zwillinge: 22.05.-21.06.</p>
                <p class="zwischentitel">Liebe</p>
                <p class="lauftext">Mit Venus im Trigon  ...</p>
                <p class="zwischentitel">Beruf</p>
                <p class="lauftext">Es wird Ihnen nichts geschenkt ...</p>
                <p class="zwischentitel">Gesundheit</p>
                <p class="lauftext">Solange Sie die Nerven ... </p>
            </td>
        </tr> 
    </table>
</body>
</html>

So sieht die fertige HTML- Seite in Verbindung mit externen Style-Sheet.

Lösung schließen

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

Lösung

Innerhalb des Style- Sheets lassen sich verschiedene Format- Unterklassen definieren, entweder zentral im Head- Bereichs einer HTML- Datei oder in einer externen CSS- Datei.

Beispiel:

Innerhalb eines laufenden Textes sollen bestimmte Abschnitte als Zitat markiert werden. Die gesonderten Zitat- Abschnitte werden zunächst im Style- Sheet definiert

.zitat
        {font-family: Century Gothic; 
        text-align: center; 
        color: #000080; 
        font-size: smaller; 
        font-style: italic;}

Der vorher definierte Zitat- Style- Sheet kann nun im Body- Bereich des HTML- Dokuments aufgerufen werden

<p>Hier beginnt der laufende Text</p>
<p class ="zitat">Hier wird das Zitat eingefügt</p>
<p>Hier setzt sich der normale Text fort</p>

Lösung schließen

Aufgabe 4: Welchen Vorteil bieten so genannte Inlines- Styles?

Lösung

Die CSS- Anweisungen können innerhalb des Body- Bereichs (inline) eingebettet werden. Diese Formatierungsanweisungen werden direkt in ein HTML- Tag integriert und sind nur für dieses Element gültig.

Beispiel für ein Inline- Style- Sheet:

<h1 style = "color:green; font-size:24pt; font-style:italic;">Überschrift 1</h1>

In diesem Beispiel wird die Überschrift grün, kursiv und mit 24pt dargestellt, obwohl der h1- Element extern oder zentral möglicherweise anders definiert wurde.

Sinnvoll ist diese Möglichkeit, wenn man entweder sonst auf CSS verzichtet und es nur mal für ein paar Ausnahmen benötigt, oder wenn man zentrale Formate verwendet, einzelne Elemente aber anders als mit den dort definierten Formatdefinitionen gestalten möchte. Dabei haben die intern definierten Style- Sheets bei der Browser- Darstellung eine höhere Priorität.

Lösung schließen

Aufgabe 5: Erklären Sie den Unterschied zwischen ABSOLUT und RELATIV am Beispiel der Schriftgröße.

Lösung

Mit Hilfe von CSS lassen sich mit font-size verschiedene Schriftgrößen definieren. Dabei wird zwischen den absoluten und relativen Werten unterschieden.

Die absoluten Maßangaben werden in konkreten Zahlen (z. B. 12pt) definiert und entsprechend dieser Vorgabe im Browser dargestellt.
Die relativen Maßangaben können ebenfalls mit Zahlen (z.B. mit 20px) oder mit Werten wie smaller, larger angegeben werden. Diese relativen Werte beziehen sich also auf andere zuvor definierte Elemente und werden vom Browser bei der Darstellung im Verhältnis zu diesen Elementen dargestellt.

Lösung schließen

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

Lösung

Mit Hilfe des CSS- Befehls {background-color} kann eine Hintergrundfarbe definiert werden. Dieser Befehl kann entweder die gesamte HTML- Seite betreffen oder einige ausgewählte Textabschnitte, wie etwa <p> oder <h1>.

Allerdings bildet der Netscape- Browser bei mehrzeiligen Textabsätzen keinen echten Farbblock, sondern dehnt die Hintergrundfarbe jeweils nur bis zum Zeilenende aus. Um das zu verhindern, kann man zusätzlich die Angaben {border-style: none; border-width: thin;} innerhalb des Style- Sheets notieren.

Beispiel für einen mehrzeiligen Text mit durchgehender Hintergrundfarbe:

<html>
<head> 
    <title>Background-Color</title>
    <style type = "text/css">
        .hintergrund
            {background-color: #FFFF66; 
            borderstyle: none; 
            borderwidht: thin;} 
    </style>
</head>
<body>
    <p>Normaler Text</p>
    <p class="hintergrund">Hier steht Text mit der Hintergrundfarbe gelb. </p>
    <p>Hier folgt wieder der normale Text.</p>
</body>
</html>

Lösung schließen

Aufgabe 7: Wozu dient die Angabe REPEAT in CSS?

Lösung

Mit {background-repeat} kann das Wiederholungs- Verfahren einer Hintergrundgrafik kontrolliert werden. Erlaubt ist eine der folgenden Angaben:

repeat = wiederholen (Voreinstellung).
repeat-x = nur "eine Zeile lang" horizontal wiederholen
repeat-y = nur "eine Spalte lang" vertikal wiederholen
no-repeat = nicht wiederholen, nur als Einzelbild anzeigen

Lösung schließen

Aufgabe 8: Warum könnte das Style- 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</p>
</body>
</html>

Lösung

Bei der Darstellung von Rahmen- Breiten arbeiten einige Browser sehr unterschiedlich. Während Netscape beispielsweise die Breite des Elements (in diesem Fall Text) erkennt, nimmt Microsoft die Größe des Browser- Fensters als Grundlage für die Darstellung. Dies kann also dazu führen, dass die gleichen Style- Sheets in verschiedenen Browsern unterschiedlich angezeigt werden.

Um dies zu verhindern, kann dem Browser noch eine zusätzliche Angabe mitgeteilt werden - margin:0px. Dies führt dazu, dass der Rahmen über das gesamte Browser- Fenster angezeigt wird, unabhängig von dem jeweiligen Browser.

HTML- Quellcode korrigiert:

<html>
<head>
    <title>Fehler</title>
    <style type="text/css">
        p.rahmen
            {
                border-style: solid;
                border-color: blue;
                border-width: medium;
                margin:0px
            }
    </style>
</head>
<body>
    <p class="rahmen">Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz
    Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz Musterabsatz
    Musterabsatz Musterabsatz</p>
</body>
</html>

Lösung schließen

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

Lösung

In CSS gibt es verschiedene Möglichkeiten, um Elemente einer Webseite exakt im Anzeigefenster zu positionieren und die Position von Elementen untereinander zu kontrollieren. So kann man für einen Bereich bestimmen, wie er positioniert werden soll.

<html>
<head>
    <title>Zwei Elemente übereinander</title>
    <style type="text/css">
        .blaue-quadrat
            {
                position: absolute; 
                top: 10px; 
                left: 100 px;
            }
        .graue-quadrat 
            {
                position: absolute;
                top: 50 px; 
                left: 150 px
            }
    </style>
</head>
<body>
    <div class="blaue-quadrat">
        <mg src="b-quadrat.gif" widht="200" height="200">
    </div>
    <div class="graue-quadrat">
        <mg src="g-quadrat.gif" widht="200" height="200">
    </div>
</body>
</html>

Wie im Beispiel gezeigt, werden zunächst im Kopf- Bereich zwei <div>- Elemente mit der entsprechenden absoluten Positionsangaben definiert. Diese beiden Elemente tauchen dann im Body- Bereich auf, und es werden ihnen entsprechende Grafiken zugeordnet. So wird gewährleistet, dass diese Grafiken auf einer bestimmten Stelle innerhalb des Browser- Fensters stehen.

Lösung schließen

Aufgabe 10: Welche Regel müssen Sie beachten, wenn Sie alle drei Anwendungsmöglichkeiten von CSS auf einer HTML- Seite miteinander kombinieren?

Lösung

Möchte man innerhalb eines HTML- Dokuments alle drei Anwendungsarten von Style Sheets verwenden, so werden die jeweiligen CSS- Befehle mit folgender Priorität behandelt:

Inline - Befehle innerhalb eines einzelnen HTML- Tags
Zentral - Definition des Style Sheets im HTML innerhalb des Head- Bereichs
Extern - Verweis auf eine gesonderte CSS- Datei

Lösung schließen

Webseitenentwicklung mit HTML ... Webseitenerstellung mit Phase 5