CSS: Erste Schritte

Cascading Stylesheets, kurz CSS, helfen den Inhalt von Webseiten zu formatieren. Wir haben für Sie einen kleinen Einstieg in das Thema vorbereitet.

CSS: Erste Schritte

Cascading Style Sheets finden im Header eines WWW-Dokuments Platz, also zwischen <head> und </head>. Zuständig für die Definition ist das <style>-Tag. Versehen mit dem Parameter type=“text/css“ leitet es die Stilvorlagen ein.

Innerhalb der Definition darf und sollte man Kommentare verwenden. Diese haben die von der Programmiersprache C bekannte Kennzeichung mit /* am Anfang und */ am Schluß.

<html>

<head>

<style type="text/css">

h1 {color: #FF0000} /* h1-Headlines immer rot */

b {color: #0000FF} /* Fette Passagen immer blau */

</style>

</head>

<body>

<h1>Eine Headline in rot</h1>

<b>Fetter Text ist blau</b>

<h1>Rote Head <b>blaues Fett</b> verschachtelt</h1>

<body>

</html>

Dieses Beispiel legt fest, daß alle <h1>-Überschriften in einem Dokument rot erscheinen, mit <b> gekennzeichnete Passagen zeigt der Browser in Blau. Für ineinander verschachtelte Tags lassen sich eigene Vorlagen definieren. Sollen etwa alle mit <b> gekennzeichneten Textabschnitte innerhalb einer <h1>-Überschrift weiß erscheinen, legen Sie hierfür eine eigene Anweisung fest:

h1 b {color: white} /* <b>-Tag in h1-Headlines weiß */

Diese Kombination von Tags läßt sich beliebig fortsetzen:

h1 b em {color: green}

färbt alle mit <em> hervorgehobenen Elemente grün, wenn sie innerhalb einer gefetteten Passage stehen, die ihrerseits wieder in einer Überschrift zu finden ist.

HTML: Kompatible Stylesheets

Wenn Sie mit Cascading Stylesheets arbeiten, denken Sie daran, daß es zwischen den Browsern noch massive Unterschiede gibt.

Beschränken Sie sich deshalb bei den Stilvorlagen auf Elemente, die sowohl mit dem Internet Explorer als auch mit dem Netscape Navigator arbeiten. Außerdem sollten Sie auf Ihre Site auch einmal mit einem älteren Browser nachsehen, ob die Dokumente auch lesbar sind, wenn der Client kein CSS beherrscht.

Eine gute Adresse, um sich über Kompatibilitätsprobleme zu informieren ist http://webreview.com/wr/pub/guides/style/style.html.

Außerdem sollten Sie einen Blick auf die CSS-Test-Suite werfen: http://www.w3.org/Style/css/Test/.

Web-Design: Links mit CSS formatieren

Mit Hilfe einer Stilvorlage bringen Sie Links mehr Formatierung bei. Interessant ist hier die Möglichkeit, das Link ohne Unterstreichung zu zeigen. Dazu definieren Sie ein Stylesheet wie dieses:

<html>

<head>

<style type="text/css">

<!--

A:link, A:visited, A:active { text-decoration: none}

-->

</style>

</head>

<body>

<a href=“wohin.html“>Ein Testlink</a>

</body>

</html>




A:link entspricht dem Paramater link im -Tag. A:visited gilt für vlink und A:active für alink.

CSS erspart Ihnen die Arbeit, jeder Stilvorlage einzeln den Wert zuzuweisen – stattdessen schreiben Sie die Angaben mit Kommata getrennt hintereinander und weisen allen auf einen Rutsch den Wert text-decoration: none zu.

Weitere zulässige Angaben für text-decoration sind underline für unterstrichene Darstellung, overline für eine Linie über dem Text oder line-through für durchgestrichenen Text. Wenn Sie overline auf ein Link anwenden, bekommt dieses je einen Strich oberhalb und unterhalb des Texts. Von blink sollten Sie absehen – das stört nur.

Die Stilvorlagendefinition mit A:link gilt für alle Links. Das ist nicht immer zweckmäßig. Flexibler sind Sie, wenn Sie eine Klasse definieren und diese bei Bedarf zuweisen.

In diesem Beispiel ändern wir die Hintergrundfarbe des Links. Das hat einen Vorteil: Der Link bleibt als solcher erkennbar – besonders dann, wenn wie in diesem Beispiel die Schriftfarbe dieselbe ist wie im umgebenden Text:

<html>

<head>

<style type="text/css">

<!--

.linkcol { text-decoration: none;

color: black;

background: yellow}

-->

</style>

</head>

<body>

<p>Durch diesen schönen Text führt

<a href="wohin.html" class=linkcol>ein Testlink</a>

zu irgendeiner Stelle im Netz.</p>

</body>

</html>

Eine Klasse definieren Sie mit einem vorangestellten Punkt: .linkcol. Darauf können Sie sich dann mit class=linkcol von jedem beliebigen Tag aus beziehen.

Form-Tag: So verhindern Sie den Zeilenumbruch

Formular-Programmierer bringt’s zum Wahnsinn: Nach jedem Form-Tag packt der Internet Explorer einen Zeilenumbruch auf die Seite.

An sich ist das auch korrekt. Denn beim Form-Tag handelt es sich um ein Block-Level-Element in CSS. Ähnlich wie beim <div> fängt danach immer eine leere Zeile an.

Umbruch nach <form> verhindern

Dies können Sie verhindern, indem Sie in das Form-Tag die Style-Anweisung style=“display:inline“ einfügen. Auf diese Weise wird das Formular wie in Inline-Element angezeigt, der Text fließt danach normal weiter.

Falls Sie die Style-Angabe nicht direkt ins Tag schreiben wollen, können Sie dem Formular natürlich auch eine eigene ID geben und das display:inline in einer Stylesheet-Datei platzieren.

Ähnliche Beiträge