Style Sheet-Übung

Style Sheet: Übung

Es folgt eine einfache Übung, die Sie durch die ersten Experimente mit Style Sheets führt. Für diese Übung brauchen Sie eine HTML-Datei und eine CSS-Datei. Um diese zu erstellen, brauchen Sie einen Text-basierten HTML-Editor wie HomeSite oder einen Texteditor wie z.B. Notepad.

Erstellen der HTML-Datei

Bei der Arbeit mit Style Sheets ist es hilfreich, eine Testdatei zu haben, die Beispiele aller Styles anzeigt, die Sie benutzen. Der Code untern erstellt eine Seite zum Start; Sie können zusätzliche Elemente für andere Tags und Klassen einfügen, wenn Sie Styles für sie definieren. Um die Datei zu erstellen, starten Sie Ihren HTML- oder Texteditor und öffnen Sie eine neue Datei, kopieren Sie den Code unten und fügen Ihn in die leere Datei ein; speichern Sie dann die Datei als css_test.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">



<html>

<head>

    <title>CSS Test</title>

    <!-- Link zum Style Sheet; 

	wenn Sie unterschiedliche Beispiel-Style Sheets

 	unter anderen Namen testen wollen, ändern Sie den Wert href

	im Tag, um auf das neue Style Sheet zu verweisen -->

    <link rel="stylesheet" type="text/css" href="sample1.css">

</head>

<body bgcolor="White">

<!-- Unten stehen Elemente, um die Funktionen

im Style Sheet sample1.css zu demonstrieren. Wenn Sie Ihre eigenen 

Style Sheets mit mehr Tags und Klassen erstellen, können Sie 

weitere Elemente hinzufügen, um Beispiele Ihrer Styles zu sehen. -->

    <h1>Dies ist eine H1-Überschrift</h1>

        <p class="first">

	Das ist ein Absatz

	der Klasse "first" </p>

    <h2>Dies ist eine H2-Überschrift</h2>

        <p>Das ist ein normaler Absatz mit

	<b>fettem</b> und 

	<i>kursivem</i> Text.</p>

    <h3>Dies ist eine H2-Überschrift</h3>

        <ul>

            <li>dies ist ein Aufzählungspunkt mit 

	einem Dummy-Link <a href="css_test.html">link</a> darin

        </ul>

        <pre>

        Das ist

		vorformatierter Text.

        </pre>

    <table>

    <tr>

        <th>Eine Tabellenüberschrift</th>

    </tr>

    <tr>

        <td>Eine Datenzelle einer Tabelle</td>

    </tr>

    </table>

    <p class="last">Hier ein Absatz

	der Klasse "last" </p>

</body>

</html>

Erstellen eines Style Sheet zur Verwendung mit der Testseite

Jetzt erstellen Sie das Style Sheet; öffnen Sie eine neue leere Datei im Editor. Kopieren Sie den Code von unten und fügen Sie ihn ein, speichern Sie die Datei als sample1.css:

	H1 {
		font-family: Arial;
		font-size: xx-large;
		font-weight: bold;
		color: #800000;
		background: #FFFFCC;
		text-align: center;
		padding: 4pt;
		border-top: inset;
		border-bottom: inset;
		position: relative;
	}
	
	H2 {
		font-family: Arial;
		font-size: x-large;
		font-weight: bold;
		color: #FFFFCC;
		background: #800000;
		text-align: center;
		padding: 3pt;
		border-top: inset;
		border-bottom: inset;
		position: relative;
	}
	
	H3 {
		font-family: Arial;
		font-size: large;
		font-weight: bold;
		color: #800080;
		text-align: center;
		border-top: inset;
		border-bottom: inset;
		position: relative;
	}
	
	A {
		font-family: Arial;
		font-weight: bold;
		color: #0000FF;
		text-decoration: underline;
		position: relative;
	}
	
	A:LINK {
		font-family: Arial;
		font-weight: bold;
		color: #0000FF;
		text-decoration: underline;
		position: relative;
	}
	
	A:VISITED {
		font-family: Arial;
		font-weight: bold;
		color: #800080;
		text-decoration: underline;
		position: relative;
	}
	
	B {
		font-family: Arial;
		font-weight: bold;
		color: #800000;
		position: relative;
	}
	
	I {
		font-family: Arial;
		font-weight: bold;
		font-style: italic;
		position: relative;
	}
	
	LI  {
		font-family: Arial;
		font-size: medium;
		color: #000080;
		position: relative;
	}
	
	P {
		font-family: Arial;
		font-size: medium;
		color: #000080;
		position: relative;
	}
	
	TD {
		font-family: sans-serif;
		font-size: medium;
		background: #99CCCC;
	}
	
	TH {
		font-family: sans-serif;
		font-size: medium;
		font-weight: bold;
		color: #FF0000;
		background: #FFFF00;
		text-align: center;
		position: relative;
	}
	
	PRE {
		font-family: monospace;
		font-size: medium;
		background: #CCFFFF;
		position: relative;
		left: 1cm;
	}
	
	.first {
		border-top: ridge;
		border-left: ridge;
		position: relative;
	}
	
	.last {
		border-bottom: ridge;
		border-right: ridge;
	}

Bernhard Friedrich

doozer@hsguide.com