| Suche in meinem Heimatblatt | Mein Heimatblatt | Hochschulrechenzentrum | Universität | ![[E-Mail an Günter Partosch]](/partosch/icons/letter.gif){kind=icon} |
| Schein | Aufgabe | Lösung | Vorgehen mit Phase 5 | HTML-Kurs | Kurse, allgemein |
|
||||||
|
Inhalt:
Style-Sheets sind eine sinnvolle Ergänzung zu HTML. Mit ihrer Hilfe können relativ einfach die Layout-Eigenschaften von HTML-Elementen in einem Dokument fest gelegt werden. Mögliche Gründe für ihren Einsatz sind:
font, marquee und
blink). Sie entsprechen nicht den ursprünglichen
Zielen von HTML.Mit den Cascading Style Sheets können Sie die Layout-Eigenschaften bestimmter HTML-Elemente nicht nur lokal sondern auch an einer zentralen Stelle -- z.B. im Kopf einer HTML-Datei oder sogar in einer separaten Style-Sheet-Datei -- festlegen:
http://www.w3.org/TR/REC-CSS1)http://www.w3.org/TR/REC-CSS2/)http://www.w3.org/Style/)http://www.w3.org/Style/CSS/)intro/technologien/css.htm]css/index.htm]Welche Eigenschaften mittels CSS festgelegt werden können, ist beispielsweise bei Stefan Münz beschrieben:
css/eigenschaften/index.htm] undnavigation/css.htm]form.css
(Stylesheet[1], das in
Beispiel c verwendet wird)kurs.css
(Stylesheet[2], mit dem (fast) alle
meine HTML-Dateien formatiert werden)http://www.w3.org/TR/REC-CSS1#appendix-ahttp://www.w3.org/TR/REC-CSS2/sample.htmlVerknüpfung speichern unter... wählen, in
Internet Explorer den Befehl
Ziel speichern unter...Leider wird das Konzept der Cascading Style Sheets von den gebräuchlichen Browsern m.E. bisher nur unzulänglich unterstützt:
Erweitert" im Menüfeld "Kategorie:" des
Befehls Bearbeitung >
Einstellungen...), damit CSS-Style-Sheets überhaupt
interpretiert werden.Aber:
<html> <head><title>Beispiel a</title></head> <body> <h1 style="color:red; font-size:36pt;">Überschrift</h1> </body> </html>
h1 in roter 36pt-Schrift
<html>
<head>
<title>Beispiel b</title>
<style type="text/css">
<!--
h1 { font-size:48pt; color:red; font-style:italic; }
//-->
</style>
</head>
<body>
<h1>Überschrift</h1>
</body>
</html>
h1-Überschriften in roter kursiver 48pt-Schrift<html> <head> <title>Beispiel c</title> <link rel="stylesheet" type="text/css" href="form.css"> </head> <body> <h1>Überschrift</h1> </body> </html>
form.css) außerhalb des Dokuments
<html>
<head>
<title>Beispiel d</title>
<style type="text/css">
<!--
h1 { font-size:48pt; color:#FF0000; font-style:italic; }
p,li { font-size:12pt;
line-height:14pt;
font-family:Helvetica,Arial;
letter-spacing:0.2mm;
word-spacing:0.8mm; }
//-->
</style>
</head>
<body>
<h1>Überschrift 1. Ordnung</h1>
<p>ein normaler Textabsatz</p>
<ul>
<li>Ein Listenpunkt</li>
<li>Ein anderer Listenpunkt</li>
</ul>
</body>
</html>
h1, p und
li.p und li.h1-Überschriften in roter kursiver 48pt-Schrift;p) und Listenpunkte (li) u.a. mit
12pt-Helvetica/Arial und einem Zeilenabstand von 14pt
<html>
<head>
<title>Beispiel e</title>
<style type="text/css">
<!--
p.normal { font-size:10pt; color:black; }
p.gross { font-size:12pt; color:black; }
p.klein { font-size:8pt; color:black; }
p.rot { color:red; }
.blau { color:blue; }
//-->
</style>
</head>
<body>
<p class="normal">Normaler Textabsatz mit Schrift 10 Punkt
schwarz</p>
<p class="gross">Textabsatz mit Schrift 12 Punkt schwarz</p>
<p class="klein">Textabsatz mit Schrift 8 Punkt schwarz</p>
<p class="rot">roter Textabsatz</p>
<address class="rot">roter (?) Absatz für Adressen</address>
<blockquote class="blau">blaues Zitat</blockquote>
</body>
</html>
class mit der entsprechenden
Unterklasse benutzt wird.normal-Absätze in schwarzer Normalschrift;gross-Absätze in schwarzer 12pt-Schrift;klein-Absätze in schwarzer 8pt-Schrift;rot-Absätze in roter Normalschrift;blau in blauer
Normalschrift
<html>
<head>
<title>Beispiel f</title>
<style type="text/css">
<!--
h1 { color:red; }
h1 i { color:blue; font-weight:normal; }
//-->
</style>
</head>
<body>
<h1>Wir lernen <i>Style-Sheets</i></h1>
<p>Wir lernen <i>Style-Sheets</i></p>
</body>
</html>
i innerhalb des
Elements h1.h1-Überschriften in roter Schrift;h1-Überschriften in blauer
nicht-fetter kursiver Schrift
<html>
<head>
<title>Beispiel g</title>
<style type="text/css">
<!--
p,li,dd,dt,blockquote { color:red;font-family:Times;
margin-top:1cm; margin-left:1cm; }
#fettkursiv { font-weight:bold; font-style:italic; }
#fettkursiv2 { font-weight:bold; font-style:italic; }
//-->
</style>
</head>
<body>
<p id="fettkursiv">Extra-Formatierung</p>
<p>Das ist formatierter Text mit <em id="fettkursiv2">besonderer
Formatierung</em></p>
</body>
</html>
id (mit dem
entsprechenden Namen der Style-Angabe) verwendet werden.id muss dabei eindeutig im Dokument (d.h.
genau ein Element) verwendet werden.p-, li-, dd- und
dt-Konstrukte in roter Times-Schrift mit vergrößertem linken
und oberen Rand;id-Angabe
fettkursiv in fetter Kursivschrift;id-Angabe
fettkursiv2 in fetter Kursivschriftspan ein Style zugeordnet werden.
<span style="font-size:18pt">formatierter Text</span>oder
<span class="blau">formatierter Text</span>Siehe dazu Beispiel i.
div
mit dem selben Style formatiert werden.
<div style="background-color:#FFFFE0; "> <h1 style="color:red; font-size:36pt; ">Überschrift 1. Ordnung</h1> <p style="margin-left:1.5cm; ">Ein Textabsatz</p> </div>Siehe dazu Beispiel h.
#FFFFE0;h1-Überschrift zusätzlich in roter 36pt-Schrift;Wenn Sie für ein oder mehrere HTML-Dokumente ein CSS-Style-Sheet entwickelt haben, so sollten Sie prüfen, ob die Style-Sheet-Angaben korrekt formuliert und korrekt angewendet wurden. Das geschieht beispielsweise recht einfach durch den Einbau des Verweises
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS-Test</a>
an einer geeigneten Stelle in ihrem Dokument. Wenn Sie diesen Link im Dokument anklicken, erhalten Sie als Antwort ein entsprechendes Fehler-Protokoll. Für den gleichen Zweck habe ich übrigens in (fast) allen meinen HTML-Dokumenten eine entsprechende anklickbare Grafik eingebaut.
Siehe dazu
$Revision: 1.17 $ ($Date: 2004/10/17 16:20:36 $) by $Author: g029 $