Cascading Style Sheets (CSS)

von jNotes - Team

Cascading Style-Sheets sind vom World Wide Web Consortium (W3C) entwickelt worden. Mit Hilfe von CSS können Sie eigene Formate kreieren und vorhandene HTML-Tags nach Wunsch formatieren.

Style-Sheets sind eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Befehle. Mit Hilfe von Style-Sheets können exakte Angaben über Form und Verhaltensweise gemacht werden. Sie können beliebige Bereiche einer HTML-Datei mit einer eigenen Hintergrundfarbe, einem eigenen Hintergrundbild (Wallpaper) oder mit diversen Rahmen versehen. Des Weiteren besteht die Möglichkeit, beliebige Elemente, sei es eine Grafik, einen Textabsatz oder eine Tabelle, pixelgenau im Anzeigefenster des Webbrowsers zu positionieren.

Ein weiteres wichtiges Leistungsmerkmal von Style-Sheets ist, daß Sie Definitionen zentral angeben können. So können Sie beispielsweise im Kopf einer HTML-Datei Definitionen zum Aussehen einer Tabellenzelle notieren. Alle Tabellenzellen der entsprechenden HTML-Datei erhalten dann die Formateigenschaften. Sie können Ihre Style-Sheet-Definitionen auch in separaten Dateien notieren. Solche Style-Sheet-Dateien können Sie in beliebig vielen HTML-Dateien referenzieren.

Beispiel für ein CSS

<STYLE  TYPE="text/css">
<!--
.imagepara{background-image:URL(viewbkgrd.gif)}
.imageparanorepeat{background-image:URL(viewbkgrd.gif);background-repeat: no-repeat}
.colorpara{background: blue}
.heading { color: blue;
       margin-left: 2px;
       font-size: 28px;
       line-height: 40px;
       font-family: Arial Black, Arial, helvetica, sans-serif; }
BODY { background:green }
-->
</STYLE> 
 

Verwenden von CSS

Sie können innerhalb einer HTML-Datei einen Bereich für Style-Sheet-Angaben definieren oder Style-Sheets in separaten Dateien definieren. Die Style-Sheet-Angaben, die Sie auf diese Weise im Kopf einer HTML-Datei definieren, sind für diese eine HTML-Datei gültig:

<html>
<head>
<title>Titel der Datei</title> <style type="text/css">
<!--
/* .. Style-Sheet-Angaben .. */
//-->
</style>
</head>
<body>
</body>
</html>

Eine andere Möglichkeit ist die Definition in einer extern übergreifenden Datei:

<html>
<head>
<title>Titel der Datei</title>
<link rel=stylesheet type="text/css"
href="formate.css">
<style type="text/css">
<!-- Extra-Style-Sheet-Angaben
//-->
</style>
</head>
<body>
</body>
</html>

Erläuterung

Mit dem Befehl <style...> ... </style> im Kopf der HTML-Datei definieren Sie einen Bereich für Style-Sheet-Angaben (style = Stil, Format). Im einleitenden Style-Tag müssen Sie den Typ der Formatdefinition angeben. Das geschieht bei allen hier beschriebenen Formatiermöglichkeiten durch die Angabe type="text/css". Zwischen dem einleitenden Tag und dem abschließenden Style-Tag können Sie dann die eigentlichen Style-Sheet-Angaben definieren.

Beachten Sie! Damit Webbrowser, die keine Style-Sheets kennen, die Style-Sheet-Angaben nicht irrtümlich als anzuzeigenden Text interpretieren, wird der Bereich der eigentlichen Style-Sheet-Angaben in der Regel in einen mehrzeiligen HTML-Kommentar eingebunden.

erstellt am 30.06.2004 - nicht bewertet
Abgelegt unter: HTML, CSS, Web

Bewerten Sie diesen Artikel:


Senden Sie einen Kommentar

Name
E-Mail
Kommentar
FrageGATY-97YCSH (bitte diesen Wert in unten stehendes Feld eintragen)
Antwort