SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheets definieren SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheets definieren
 |
Zentrale Formate definieren |
|
|
 | |
Formate für HTML-Tags definieren
Anzeigebeispiel: So sieht's aus
Sie können für gewöhnliche HTML-Tags, zum Beispiel für HTML-Tags zu 
Absatztypen und Textgestaltung oder für Tabellen, mit Hilfe von Style-Sheet-Angaben Formate definieren. Wenn Sie das entsprechende HTML-Tag dann in der HTML-Datei verwenden, werden alle Formate angewendet, die Sie für das betreffende HTML-Tag definiert haben. So können Sie beispielsweise für Überschriften 1. Ordnung, definieren, daß diese in der Schriftart Helvetica, 20 Punkt, rot, fett und kursiv mit einem Absatznachabstand von 16 Punkt angezeigt werden. Wenn Sie dann im Text der HTML-Datei eine Überschrift 1. Ordnung wie gewohnt definieren, werden die definierten Formateigenschaften bei der Anzeige im WWW-Browser berücksichtigt.
<html>
<head>
<title>Titel der Datei</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>Ein anderer Listenpunkt
</ul>
</body>
</html>
|
An erlaubten Stellen können Sie Style-Sheets in HTML einbinden (siehe 
Style-Sheets in HTML einbinden).
Dazu notieren Sie zuerst das gewünschte HTML-Tag, und zwar ohne spitze Klammern. Im obigen Beispiel werden die HTML-Tags h1 (Überschrift 1. Ordnung), p (Textabsatz) und li (Listeneintrag) auf diese Weise notiert. Wenn Sie gleichartige Formate für mehrere HTML-Tags definieren wollen, geben Sie alle gewünschten Tags an und trennen Sie diese durch Kommata, so wie im obigen Beispiel p,li.
Es bedeutet also das gleiche, wenn Sie notieren:
h1 { font-family:Helvetica }
h2 { font-family:Helvetica }
oder wenn Sie notieren:
h1, h2 { font-family: Helvetica }
Dahinter folgen die dazugehörigen, gewünschten Formatdefinitionen, und zwar in geschweiften Klammern { und }. Innerhalb solcher geschweifter Klammern können Sie eine oder mehrere Formateigenschaften definieren. Jede Eigenschaftszuweisung besteht aus einem Namen, z.B. color und einem Wert, z.B. #FF0000, getrennt durch einen Doppelpunkt. Schließen Sie jede Formatdefinition jeweils durch einen Strichpunkt ab. Nur bei der letzten Formatdefinition vor der abschließenden geschweiften Klammer darf der Strichpunkt entfallen.
Wichtig: Zwar sind innerhalb einer Formatdefinition durchaus Leerzeichen erlaubt, aber der Netscape-Browser hat sich dabei als sehr empfindlich erwiesen - kurz gesagt, er ignoriert die Angaben. Obwohl es nicht so gut lesbar ist, ist es deshalb vorläufig auf jeden Fall besser, keine Leerzeichen innerhalb einer Formatdefinition zu verwenden.
Im obigen Beispiel wird dem HTML-Tag für Überschriften 1. Ordnung eine Schriftgröße von 48 Punkt (font-size:48pt;), die Schriftfarbe rot (color:#FF0000;) und der Schriftstil kursiv (font-style:italic;) zugewiesen. Wenn Sie das betreffende HTML-Tag dann innerhalb der Datei verwenden, so wie im obigen Beispiel, werden die definierten Formate darauf angewendet.
Zu den einzelnen Formateigenschaften und ihren möglichen Werten siehe Style-Sheet-Angaben.
Style-Sheet-Angaben für HTML-Tags wie <p> oder <li> werden möglicherweise nur interpretiert, wenn Sie ein einleitendes und ein abschließendes Tag notieren.
|
Format-Unterklassen definieren Anzeigebeispiel: So sieht's aus
Sie können mit Hilfe von Style-Sheets Unterklassen von gewöhnlichen HTML-Tags definieren. Das ist vor allem für HTML-Tags zu Absatztypen und Textgestaltung oder für solche zu Tabellen sinnvoll. So können Sie beispielsweise vom HTML-Tag für Überschriften 1. Ordnung zwei Varianten erzeugen, etwa eine mit schwarzer und eine mit roter Schrift. Dazu vergeben Sie Namen für die entsprechenden Unterklassen.
<html>
<head>
<title>Titel der Datei</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; }
all.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>
|
An erlaubten Stellen können Sie Style-Sheets in HTML einbinden (siehe Style-Sheets in HTML einbinden).
Unterklassen von HTML-Tags bilden Sie dort, indem Sie zuerst das Tag notieren, im obigen Beispiel p. Dahinter folgt ein Punkt und dahinter ein Name für die Unterklasse.
Anstelle eines bestimmten HTML-Tags können Sie auch das Schlüsselwort all (=alle) notieren. Dadurch definieren Sie eine Unterklasse mit Formatierungen, die Sie anschließend auf irgendein HTML-Tag anwenden können. Es ist auch erlaubt, Schlüsselwort all wegzulassen. In diesem Fall beginnt die Formatdefinition mit einem Punkt. Dahinter folgt der Name der Unterklasse. Im obigen Beispiel wird die Unterklasse blau auf diese Weise definiert.
Die Namen hinter dem Punkt können Sie frei vergeben. Die Namen sollten nicht zu lang sein und keine Leerzeichen und keine deutschen Umlaute enthalten.
Innerhalb des Dateikörpers können Sie definierte Unterklassen anwenden. Dazu notieren Sie im einleitenden HTML-Tag die Angabe class= und dahinter den Namen der Unterklasse, den Sie zuvor vergeben haben. Im obigen Beispiel werden zunächst drei Varianten des normalen Fließtextabsatzes <p> notiert. In den beiden Zeilen darunter können Sie die Wirkung des Schlüsselwortes all sehen. Verschiedene HTML-Tags (im Beispiel <p> und <address>) können die gleiche Unterklasse von Formaten benutzen.
Zu den einzelnen Formateigenschaften und ihren möglichen Werten siehe Style-Sheet-Angaben.
Es ist durchaus erlaubt, für mehrere HTML-Tags den gleichen Klassennamen zu vergeben. So können Sie beispielsweise Unterklassen wie p.gross, h1.gross und li.gross definieren.
Um größeren Textabschnitten, die z.B. aus Überschriften, Fließtext und Listen bestehen, bestimmte Formateigenschaften zuzuweisen, definieren Sie am besten gewünschte Unterklassen für das HTML-Tag <div>...</div>. So können Sie beispielsweise eine Unterklasse div.rot {color:red; } definieren. Wenn Sie dann größere Textabschnitte in das <div>-Tag einschließen, erhalten alle Absatztypen innerhalb dieses Abschnitts die Textfarbe rot.
Wenn Sie mit dem Schlüsselwort all arbeiten, können Angaben wie font-size:10pt unter Umständen wenig Sinn machen. Wenn Sie beispielsweise all.Meine { font-size:10pt;} angeben und im Text dann <h1 class="Meine"> notieren, wird auch die Überschrift 1. Ordnung mit 10 Punkt dargestellt. Sinnvoller ist in diesem Fall das Arbeiten mit prozentualen Angaben, die in Style-Sheets ebenfalls erlaubt sind. So könnten Sie beispielsweise eine allgemeingültige Unterklasse all.Meine { font-size:150%;} definieren. Wenn Sie diese Unterklasse dann einem HTML-Tag zuweisen, wird der darin enthaltene Text einfach in 1½facher Größe dargestellt, und zwar in Bezug auf die sonst übliche Größe.
|
|
Formate für verschachtelte HTML-Tags definieren Anzeigebeispiel: So sieht's aus
Wenn Sie nichts anderes angeben, übernimmt ein HTML-Tag innerhalb eines anderen HTML-Tags dessen Eigenschaften und fügt seine eigenen Eigenschaften nur hinzu. Wenn Sie beispielsweise für Überschriften 1. Ordnung die Schriftart Times und die Farbe rot definieren, erscheint Text, der innerhalb einer solchen Überschrift mit <i>...</i> formatiert wird, ebenfalls rot und in Times, aber zusätzlich kursiv.
Sie können aber mit Hilfe von Style-Sheets auch bestimmen, daß ein HTML-Tag bestimmte Eigenschaften nur dann hat, wenn es innerhalb eines bestimmten anderen HTML-Tags vorkommt. So können Sie etwa bestimmen, daß <i>...</i> innerhalb von Überschriften nicht kursiv, stattdessen aber in blauer Farbe dargestellt wird, während der gleiche Befehl innerhalb anderer HTML-Tags nach wie vor nichts anderes als eine kursive Darstellung bewirkt.
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
h1 { color:red; }
h1 i { color:blue; font-style:normal; }
//-->
</style>
</head>
<body>
<h1>Wir lernen <i>Style-Sheets</i></h1>
<p>Wir lernen <i>Style-Sheets</i></p>
</body>
</html>
|
An erlaubten Stellen können Sie Style-Sheets in HTML einbinden (siehe Style-Sheets in HTML einbinden).
Im obigen Beispiel wird dort festgelegt, daß Textabschnitte, die mit dem Tag <i> ... </i> formatiert sind, nicht wie sonst üblich kursiv, sondern normal, stattdessen aber mit blauer Farbe dargestellt werden. Aber nur dann, wenn dieser Textbereich innerhalb einer Überschrift 1. Ordnung vorkommt. Dazu notieren Sie zuerst das übergeordnete Tag, im Beispiel h1, und dahinter, durch ein Leerzeichen getrennt, das untergeordnete Tag, im Beispiel i.
In der ersten Zeile innerhalb des <body>-Bereichs im obigen Beispiel kommt diese spezielle Definition zum Tragen. In der zweiten Zeile dagegen, wo das Tag <i>...</i> innerhalb eines anderen Tags vorkommt, hat es die übliche Wirkung.
Zu den einzelnen Formateigenschaften und ihren möglichen Werten siehe Style-Sheet-Angaben.
|
|
Unabhängige Formate definieren Anzeigebeispiel: So sieht's aus
Sie können Formate vordefinieren, die Sie anschließend auf beliebige geeignete HTML-Tags anwenden können. So können Sie z.B. ein unabhängiges Format mit der Eigenschaft fett/kursiv definieren. Dieses unabhängige Format können Sie dann innerhalb von HTML-Tags zusätzlich zu anderen Formaten anwenden, die für das betreffende Tag definiert sind.
<html>
<head>
<title>Titel der Datei</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; }
//-->
</style>
</head>
<body>
<p id="fettkursiv">Extra-Formatierung</p>
<p>Das ist formatierter Text mit <em id="fettkursiv">Extra-Formatierung</em></p>
</body>
</html>
|
An erlaubten Stellen können Sie Style-Sheets in HTML einbinden (siehe Style-Sheets in HTML einbinden).
Im Beispiel wird für Fließtext-Standard-Tags wie <p>, <li>, <dt>, <dd> und <blockquote> ein einheitliches Format mit verschiedenen Angaben definiert. Ferner wird ein unabhängiges Format mit dem Namen fettkursiv definiert. Namen von unabhängigen Formaten müssen ein Gatterzeichen # vorangestellt bekommen. Für die Namen gelten die gleichen Regeln wie für Namen von Unterklassen. Im obigen Beispiel werden dem unabhängigen Format mit dem Namen fettkursiv die beiden Style-Sheet-Angaben zugewiesen, die einen Text fett und kursiv machen.
Im Dateikörper können Sie freie Formate innerhalb von HTML-Tags anwenden. Dazu notieren Sie im einleitenden HTML-Tag die Angabe id= und dahinter, in Anführungszeichen, den Namen des unabhängigen Formats ohne Gatterzeichen (id = identifier = Bezeichner). Dadurch werden dem Inhalt zwischen dem einleitenden und seinem abschließenden Tag die Eigenschaften des definierten unabhängigen Formats zugewiesen. Im obigen Beispiel wird das unabhängige Format fettkursiv einmal innerhalb eines einleitenden <p>-Tags und einmal innerhalb eines einleitenden <em>-Tags angegeben. Daraus können Sie ersehen, wie unabhängige Formate einsetzbar sind, und wie sie andere Formate additiv ergänzen.
Zu den einzelnen Formateigenschaften und ihren möglichen Werten siehe Style-Sheet-Angaben.
Unabhängige Formate wirken normalerweise additiv, d.h. sie übernehmen das vorhandene Format und fügen ihre eigenen Eigenschaften lediglich hinzu. Unabhängige Formate haben jedoch im Konfliktfall Vorrang vor anderen Formatierungen. Wenn Sie beispielsweise für Überschriften 1. Ordnung eine rote Farbe definieren und einer solchen Überschrift ein unabhängiges Format zuweisen, in dem die Farbe blau definiert wird, dann wird die Überschrift blau.
|
|
Pseudo-Formate definieren Anzeigebeispiel: So sieht's aus
Pseudo-Elemente sind Elemente innerhalb einer HTML-Datei, die sich jedoch nicht durch ein eindeutiges HTML-Tag ausdrücken lassen, z.B. ein "noch nicht besuchter Verweis" oder der erste Buchstabe eines Absatzes. Zum Definieren solcher Pseudo-Elemente gibt es eine bestimmte Syntax innerhalb der Style-Sheet-Sprache CSS.
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
a:link { color:#FF0000; font-weight:bold }
a:visited { color:#990000; }
a:active { color:#0000FF; font-style:italic }
</style>
</head>
<body>
<a href="selfhtml.htm">Verweis</a></p>
</body>
</html>
|
Bei Style-Sheet-Definitionen von Pseudo-Elementen notieren Sie zuerst das betroffene HTML-Tag, im Beispiel das <a>-Tag für Verweise. Dahinter folgt ein Doppelpunkt und dahinter eine erlaubte Angabe, im Beispiel etwa link oder visited. Beachten Sie, daß dies keine frei wählbaren Namen sind, sondern feste Schlüsselwörter.
Für die eigentlichen Formatdefinitionen innerhalb der geschweiften Klammern gelten die gleichen Regeln wie beim Definieren von Formaten für HTML-Tags.
Zu den einzelnen erlaubten Angaben siehe auch: Style-Sheet-Angaben: Pseudo-Formate.
|
| |
weiter: |
Schnellformatierung im Text
|
zurück: |
Style-Sheets in HTML einbinden
|
