Platzmacher mit CSS

In diesem ersten Beitrag geht es um die allfälligen Platzmacher! Das sind Konstrukte, die man braucht, um Texte von einander abzusetzen. Natürlich kann man den HTML-Tag <br /> nehmen, und das tun auch die meisten Composer wie NVU, doch eine Quelldatei mit hunderten von <br /> wird schnell unübersichtlich. Außerdem will man ja auch Einrückungen machen, deshalb hat man früher den Platzmacher als Bilddatei leer.gif angewendet. Man machte sich ein Bild mit 20×20 Pixel das dem Hintergrund seiner Seite farblich entsprach und das  speicherte man beispielsweise als leer.gif. Zur den folgenden CSS Anweisungen verweise ich auch auf http://thestyleworks.de/

Dann kamen folgende Anweisungen

<p>text text text text text text text text text </p>
<img src=“leer.gif“ alt=“leer“ height=“50″ />
<p> text text text text text text text text text </p>

Beide Zeilen wurden durch das Bild in der Höhe von ca. 50 Pixel voneinander horizontal getrennt.

Mit CSS braucht man hierzu kein Bild mehr.

Die Anweisung

<div style=“margin-top:50px“>&nbsp;</div>

liefert das gleiche Layout auf der Seite.

Sie hat sogar noch den Vorteil, dass der Browser nicht erst noch das Bild laden muß

Dieser erste Bezug auf das CSS ist doch relativ einfach.

Also machen wir gleich einen 2.

Wir wollen alle folgenden Zeilen um 40px nach links verschieben.

<div style=“margin-left:80px“>

<p>text text text text text text text text text</p>
<p>text text text text text text text text text</p>
<p>text text text text text text text text text</p>

</div>

und wenn man einen rechten Rand haben will, dann schreibt man einfach

<div style=“margin-left:80px; margin-right:190px;“>

<p>text text text text text text text text text text text text text text texttext text</p>
<p>text text text text text text text text text</p>
<p>text text text text text text text text text</p>

</div>

Die Syntax von CSS ist ein wenig anders als bei HTML, hier werden die Zuweisungen von Werten mit „:“ anstatt mit „=“ gemacht. Innerhalb  von HTML werden CSS Anweiungen ausschließlich mit dem Ausdruck style=“….“ Angegeben, und dann passen die beiden Schreibweisen wieder zusammen bzw. ein Browser kann sie unterscheiden.

Um die Beispiele auszuprobieren reicht es wenn Sie Ihren Composer nehmen und dort HTML-Direkt eingeben, sich dann das Ergebnis  in der Vorschau ansehen.

Sie können aber nicht nur Einrückungen machen, Sie können mit CSS auch Hintergrund und Schreibfarben setzten. Dabei stehen Ihnen sogar noch sprechende Worte zur Verfügung.

<p style=“color:red; background-color:yellow“>text text text</p>

Sie können auch die Fettschrift über CSS steuern:

Font-weight:bold  aber da halte ich mich mehr an das kürzere <b>..</b>

Probieren Sie doch mal folgenden Anweisung aus:

<p>Text Text Text Text Text Text
<span style=“text-decoration:line-through“>HUHU</span>
Text Text Text Text Text Text Text Text
</p>

Eigentlich können Sie auch zwischen HTML und CSS abwechseln, Sie können Schreiben:

<p>
Text Text Text Text Text Text
<span style=“font-weight:bold“>HUHU</span>
Text Text Text Text Text Text Text Text
</p>

oder einfacher

<p>
Text Text Text Text Text Text <b>HUHU</b>
Text Text Text Text Text Text Text Text
</p>

oder

<p>
Text Text Text Text Text Text <strong>HUHU</strong>
Text Text Text Text Text Text Text Text
</p>

( wie es einige Composer bzw. HML-Editoren tun.  Es wird zwar immer wieder betont, dass das em-Tag den älteren i-Tag und strong den älteren b-Tag ersetzen soll, doch . sind i und b-Tag weiterhin Bestandteil von XHTML.)

So das war die Einführung in das Thema, es werden noch einige andere so effektive Leichtermacher kommen.

Sie wundern sich, wie ich in einem Blog diese Einrückungen für die HTML-Codes hinbekommen habe?
Nun, in dem ich sie ganz einfach im HTML-Teil direkt eingebeben habe:

<div style=“font-family:courier new; color:#0000FF; margin-left:30px“>
hier kommt nun das Coding
</div>

Nur muss man aufpassen, denn im HTML-Editor ist das <-Zeichen der Anfang eines Tags, bei den Texten muss man dann die Ersatzzeichen nehmen, also &lt unf &gt gefolgt von einem Semicolon.

Viel Spaß beim Anwenden
Bernd Klüppelberg

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar