[ Inhaltsverzeichnis ]
[ 1.1 ] [ 1.2 ] [
1.3 ] [ 1.4
] [ 1.5 ] [ 1.6
] [ 1.7 ] [ 2.0
] [ 2.1] [ 2.2 ] [ 2.3
] [ 2.4 ] [ 2.5 ] [ 2.6
] [ 2.7 ] [ 2.8
] [ 2.9
] [ 3.0 ] [ 3.1
] [ 3.2 ] [ 3.3
]
<html>
<head>
<title>Mustermanns Blumenladen
</title>
<style type="text/css">
<!--
body { background-color:#33EE00; color:#002000; font-family:Times; }
.zentriert { text-align:center; }
.hervorgehoben { font-family:Arial; font-size:200%; color:navy; }
-->
</style>
</head>
<body>
<p class="zentriert">
<span class="hervorgehoben">Willkommen</span>
</p>
<p class="zentriert">
in Mustermanns Blumenladen
</p>
<p>
... und hier steht ganz normaler Text.
</p>
</body>
</html>
So sieht's im Browser aus
- Unsere CSS-Anweisungen sind etwas erweitert.
Um Text zu zentrieren und Schriftarten, Schriftgrö&szli;en und
Textfarben zu verändern, gibt es die CSS-Attribute
- font-family für die Schriftart,
z.B. Times, Arial, Helvetica, Courier.
Vorsicht ist geboten bei seltenen Schriftarten. Sie könnten
auf einigen Computern nicht vorhanden sein und somit nicht
dargestellt werden.
- font-size für die Schriftgröße,
z.B. 12pt, 200%.
- text-align für die Ausrichtung des Textes:
- left: linksbündig (Standardwert)
- right: rechtsbündig
- center: zentriert
- justify: Blocksatz
Daneben gibt es noch die Möglichkeit, den Text kursiv oder fett
darzustellen:
-
Wie schafft man es mit CSS, Anweisungen nicht nur für gesamte
HTML-Elemente zu definieren, sondern ad-hoc einzubinden?
Eine der Möglichkeiten ist die Definition einer so genannten
CSS-Klasse. Syntax:
. CSS-Klasse { ... }
(Beachten Sie den Punkt vor dem Klassennamen!)
Mit dem Attribut class und dem Wert des
Klassennamens kann sie dann von jedem HTML-Element
verwendet werden (nur manchmal wirkungslos, wenn das Element keine
Textformatierungen verantwortet):
< elem class=" CSS-Klasse">
...
-
Ein gerade für CSS-Formatierungen nützliches HTML-Element
ist <span>. Es hat an sich keine Wirkung,
kann aber als Rahmen für "lokale", also nur auf einen kleinen
Bereich bezogene, Textpassagen fungieren, z.B. für einzelne Worte.
In dem obigen Beispiel zu beachten ist, dass sich die
Schriftsätze des body-Elements und der CSS-Klasse
hervorgehoben sich widersprechen. Es "gewinnt"
diejenige Anweisung, die am weitesten innen steht, also Arial
und marineblau (navy)
für "Willkommen" (deswegen "Cascading Style Sheets" ...)
-
Ein Wort noch zu CSS.
Die Schreibweise der Attribute ist abweichend von der XML-Notation:
<span style="style:wert; style:wert; style:wert">text</span>
Zu empfehlen ist jedoch, die CSS-Formatierungen
in eine Datei auszulagern.
Auf diese Weise sind alle Formatvorschriften außerhalb
Ihres HTML-Dokuments. Dieses enthät nur noch den Inhalt.
=> Auf diese Weise trennen Sie Form und Inhalt Ihrer
Webseiten!
Mein kurzes CSS-Tutorial finden Sie hier: CSS
Tutorial
[ Inhaltsverzeichnis ]
[ 1.1 ] [ 1.2 ] [
1.3 ] [ 1.4
] [ 1.5 ] [ 1.6
] [ 1.7 ] [ 2.0
] [ 2.1] [ 2.2 ] [ 2.3
] [ 2.4 ] [ 2.5 ] [ 2.6
] [ 2.7 ] [ 2.8
] [ 2.9
] [ 3.0 ] [ 3.1
] [ 3.2 ] [ 3.3
]
©2003 de Vries
|