Style-Objekte für Webseiten @ PS-Trainer

CSS ist die Realisierung der Idee, Formatierung aus der Web-Programmiersprache HTML herauszulösen und ihr als eigenes durchdachtes System in verbesserter Form wieder zur Verfügung zu stellen.

Auf dieser Seite finden sie Angaben, wie CSS-styles auf ganze Webseiten angewendet werden. Diese Technik ist gegenüber der veralteten Formatierung bereits sehr effizient. Die Anwendung erfolgt für einzelne Webseiten, oder als Ergänzung zu externen stylesheets.

Definition eines style-Objekts:

Das <style>-Objekt wird innerhalb des <head>-Objekts definiert.

Das Objekt beginnt mit dem tag <style>, enthält dann eine beliebige Anzahl CSS-Elemente, und endet zuletzt mit </style>.

Jedes CSS-Element beginnt mit dem Namen des Stils, gefolgt von allen dazugehörenden CSS-Attributen in { }.

Die Namen selbst erstellter styles beginnen mit einem .

Anordnung und Syntax der CSS-Attribute entsprechen den Regeln für CSS-Attribute (wie für style-Attribute definiert).

Muster:
<head> ... ... ...
<style>
body {background-color:#E8E8E8; font-size:10pt;}
table {background-color:#CCFFFF;}
.mystyle {color:blue; font-weight:bold;}
</style>
</head>

Wichtig: Unterscheiden sie zwischen style-Objekten für ganze Webseiten (hier) und style-Attributen von HTML-Objekten !

Formatierung von Standard-HTML-Objekten:
Mit CSS style-Objekten können sie den Stil aller HTML-Objekte nach Wunsch festlegen. Das ist umso effizienter, je mehr solcher Objekte sie einsetzen.
Während sie früher bei Verwendung von 12 Absätzen <p> jeden Absatz einzeln formatieren mussten, so können sie das nun in einem einzigen <style>-Objekt zusammenfassen: Damit werden automatisch alle auf einer Webseite verwendeten Absätze nach ihren Vorgaben formatiert. Die einzelnen Absätze benötigen keinerlei zusätzliche Stil-Informationen, keine Formatier-tags (wie z.B. <font> ), auch keine style-Attribute wie z.B. <p style="...">.
Diese Technik ist nicht nur übersichtlich und arbeitssparend, sondern auch besonders änderungs-freundlich.

Beispiel: Mit diesem <style>-Objekt werden alle Absätze einer Webseite gleich formatiert.
<style>
p { background-color:#FFE8E8; padding:3px;
font-size:10pt;
font-family:Arial,Helvetica,sans-serif;
border-width:1px; border-style:solid; }
</style>

Ein Absatz nach diesem Beispiel sieht so aus

Erstellung eigener Styles:
Eigene Styles erhalten einen Punkt vor dem Namen. Sonst gibt es keine Unterschiede zur Formatierung von Standard-HTML-Objekten.
Da es jedoch keine HTML-Objekte mit diesem Namen geben kann, benötigen sie eine andere Methode, um Objekte mit ihren selbst definierten Styles zu formatieren.

Beispiel:
<style>
.mystyle {color:purple; font-weight:bold;}
</style>

<div> und <span>:
Manchmal besteht die Notwendigkeit, Teile einer Webseite speziell zu formatieren, und zwar auch mitten in einem Absatz oder in einer Zeile. Dafür gibt es die (u.a.) beiden tags <div> und <span>: sie dienen vorwiegend der Formatierung und haben sonst (fast) keine Wirkung.

<div> eröffnet eine neue Zeile, <span> hat für sich allein keinerlei Wirkung. Beide tags dienen als "Behälter" für die Anbringung von Attributen, hier: style und class.

Beispiel:
<div class="mystyle">Beginn einer Zeile und <span style="color:red"> ein paar Worte </span> dazwischen </div>.

Beachten sie, dass durch die Attribute class oder style nur jene Eigenschaften verändert werden, die darin definiert sind - alle anderen Eigenschaften werden vom jeweiligen "Eltern"-Objekt übernommen.

Praxis gängiger Web-Editoren:
Mit allen gängigen HTML-Editoren können sie <style>-Objekte erstellen und diese sowohl auf Standard-HTML-Objekte anwenden, als auch eigene Styles definieren und anwenden.

Konsultieren sie die eingebaute "Hilfe"-Funktionen um herauszubekommen, an welcher Stelle sie die jeweiligen Befehle finden. Stichworte: CSS, Styles

Beispiel:
Zuletzt noch ein kurzes, aber komplettes Beispiel für die Anwendung eines <style>-Objekts auf einer Webseite.

(1) Ein <style>-Objekt (rot) wird in den <head> einer Webseite eingesetzt.
Das ist wichtig, damit die Styles bekannt sind, bevor mit der Interpretation des <body> (des eigentlichen "Inhalts" ihrer Webseite) begonnen wird.

(2) Das <style>-Objekt enthält zwei CSS-Elemente: body und .src
Mit dem body{}-Element wird das nachfolgende <body>-Objekt (gelb) formatiert.
Mit dem .src{}-Element werden alle Objekte im <body> formatiert, die das Attribut class="src" haben.

(3) Im <body>-Objekt (gelb) ist ein <span>-Objekt enthalten, auf welches der Style src angewendet wird, da dies vom class-Attribut gefordert wird.

Als Ergebnis wird der body nach ihren Angaben formatiert, zusätzlich das Wort Quelltext mit ihrem selbst definierten Stil, und das Wort rot individuell.

<html>
<head>
<title>CSS Styles</title>
<style type="text/css" media="screen">
body{font-size:10pt; background-color:#FFFFCC;}
.src {font-family:mono; color:#003366;}
</style>
</head>

<body>
Hier steht der Text ihrer Webseite.
Der <span class="src">Quelltext</span> ist mit Stil <span style="color:red">src</span> formatiert, alles andere mit dem für "body" festgelegten Stil.
</body>

</html>

Aktuelle Daten dieser Seite	Letzte Änderung: