CSS auf 3 Ebenen

Detail - Webseite - Web

Bei allen neuen Entwicklungen sollten sie von Anfang an CSS einsetzen.
Je konsequenter sie CSS einsetzen, desto mehr Vorteile gewinnen sie für EntwicklerInnen und AnwenderInnen. 		Es ist selbstverständlich, CSS auf Ebene eines gesamten Webs anwenden.
Für einzelne speziell gestaltete Webseiten setzen sie CSS auf Webseiten-Ebene ein. Die wenigen verbleibenden Sonderwünsche werden individuell mit CSS Style-Attributen programmiert.
CSS CSS Cascading Style Sheets
CSS auf 3 Ebenen: Ganze Webs - Webseiten - einzelne Details
● Standard-Format Formatierung ohne selbst festgelegte Regeln
● CSS für ganze Webs Eine stylesheet-Datei steuert alle Seiten eines Webs
● CSS für Webseiten Der <style>-Element im <head> steuert das Aussehen einer Seite
● CSS für Details Das style-Attribut für individuelle Formatierung
CSS-Tipps Anregungen für eigene styles
CSS-Demo Spielen sie mit den styles dieser Seite
CSS & Javascript Programmierung von CSS-styles mit Javascript (ECMAScript)
Links CSS-Links Ausgewählte Links zum Thema CSS

Einsatz von CSS auf 3 Ebenen
CSS-Styles können auf verschiedenen Ebenen eingesetzt werden. Ausschlaggebend ist die gewünschte Reichweite eines Styles (CSS-Regel).

0 Ohne Definition irgendeiner CSS-Regel gelten für jedes Element allgemeine ↓ Standard-Regeln zur Formatierung.

1 Mit CSS-Regeln in einer einzigen zentralen ↓ Stylesheet-Datei werden alle Seiten eines ganzen Webs formatiert.

2 Jede Webseite erhält im <head> ein ↓ <style>-Element. Dort werden besondere Styles nur für diese Seite eingetragen. Diese Regeln können auf beliebig viele Elemente der jeweiligen Seite angewendet werden.

3 Wenn es nötig ist, einzelne Elemente (Absätze, Worte, Zeichen, Bilder, ...) individuell zu formatieren, dann verwenden sie dafür CSS ↓ style-Attribute.
Definieren und verwenden sie CSS möglichst bereits am Beginn von Web-Entwicklungen.

CSS rechtzeitig einsetzen ! Wichtig ist, dass sie CSS-Styles definieren und richtig verwenden. Das Aussehen ihrer Styles ist weniger wichtig - Das können sie mit geringem Aufwand zu jedem späteren Zeitpunkt nachholen.
Diese Strategie erfordert während der Entwicklung keinen zusätzlichen Aufwand, bietet jedoch maximale Vorteile bei der Fein-Einstellung und bei nachträglichen Änderungen.

CSS nachträglich einbauen Wenn sie CSS nachträglich in ein Web einbauen wollen, dann ist der Aufwand ziemlich hoch: Sie müssen zahllose alte HTML-Elemente und -Attribute durch CSS-Definitionen ersetzen: Diese Arbeit ist mühsam, anfällig für Fehler und kaum automatisierbar.
In diesem Fall ist eine komplette Erneuerung meist sinnvoller als eine 'Reparatur'.

Standard-Formatierung
► Wenn in einer Webseite keine Angaben zur Formatierung gemacht werden, dann muss auch diese Seite in irgendeiner Formatierung angezeigt werden.
► Dazu sind 'Standard'-Regeln festgelegt. Diese Regeln gelten für alle Webseiten. 		► Im Gegensatz zu eigenen Regeln werden in den Standard-Regeln alle Details festgelegt, z.B. Schrift-Familie, Größe, Farbe, Hinregrund, Ausrichtung, Rand, usw.
► Rechts ist eine (Mini)-Webseite in Standard-Formatierung eingebettet.
Das ist der Ausgangspunkt für jede individuelle Formatierung.
► Mit eigenen CSS-Regeln (nächste Kapitel) können sie jedes Detail der Formatierung ändern. ► Ihre eigenen CSS-Regeln können sich auf wenige zu ändernde Details beschränken - Alle anderen Regeln werden unverändert aus den Standard-Regeln übernommen (vererbt).

CSS StyleSheet-Datei für ein ganzes Web
► Diese Methode ist die wirkungsvolle Art, CSS einzusetzen.
Alle eigenen CSS-Regeln werden in einer einzigen Text-Datei (dem StyleSheet) zusammengefasst.
Jede einzelne Seite ihres Webs verwendet dieses StyleSheet.
► Die hier definierten Regeln steuern das Aussehen eines ganzen Webs, allenfalls von mehrenen 100 Webseiten. Die Regeln können bei Bedarf in wenigen Minuten geändert werden, sogar während des laufenden Betriebs.
► Bei geschickter Zusammenstellung der CSS-Regeln fällt in den einzelnen Webseiten praktisch kein Aufwand für die Formatierung an. 		Beispiel: Der folgende Text ist in einer Text-Datei test.css enthalten:
/* Demo-stylesheet */
body{background-color:yellow;}
.demo{color:red; font-weight:bold;}

• In diesem Beispiel wird die Standard-Formatierung des <body>-Elements geändert: Die Hintergrund→ Farbe wird auf yellow gesetzt. Alle anderen Eigenschaften der Standard-Formatierung bleiben erhalten.
• Außerdem wird eine eigene CSS-Klasse .demo erstellt. Diese Klasse kann als Attribut auf alle HTML-Elemente in allen Webseiten angewendet werden. Für .demo werden nur 2 Regeln definiert, d.h. alle anderen Eigenschaften des jeweiligen Elements bleiben unverändert.
► Ein <link>-Element verknüpft eine Webseite mit einer CSS-StyleSheet-Datei:
► Alle im StyleSheet definierten Regeln sind damit für die Seite wirksam.
► Jeder Web-Editor kann StyleSheets erstellen oder ändern.
Da es sich dabei um reinen Text handelt, können sie dafür auch jeden beliebigen Text-Editor verwenden.
<head>
<link rel=stylesheet type="text/css" href="test.css">
...
</head>
<body>
So sieht <span class="demo">Demo</span> aus
</body>
► Allgemeine CSS-Regeln werden vor speziellen Regeln definiert, da sie von diesen überschrieben werden sollen.
Ein <link>-Element sollte daher im HTML-Quelltext immer vor einem <style>-Element stehen.

► Beim Überschreiben von allgemeinen CSS-Regeln durch spezielle Regeln werden jeweils nur die angeführten Regeln geändert, alle anderen Regeln bleiben in Kraft.

Im Beispiel wird lediglich die Eigenschaft color der eigenen CSSS-Klasse .demo geändert, alle anderen Regeln bleiben unverändert.
<head>
<link rel=stylesheet type="text/css" href="test.css">
<style type="text/css">
.demo {color:blue;}
</style>
</head>
<body>
So sieht <span class="demo">Demo</span> aus
</body>
► Wenn es notwendig sein sollte, diese Regeln zu ändern oder zu ergänzen, dann stehen dafür 2 zusätzliche Anwendungs-Varianten von CSS zur Verfügung (nächste Kapitel). • Ein ↓ <style>-Element auf einer Webseite kann jede allgemeine Regel ändern oder neue CSS-Klassen (für die jeweilige Webseite) erstellen.
• Mit einem ↓ style-Attribut kann man jedes Element jeder Webseite individuell ändern.

CSS <style> Elemente für einzelne Webseiten
► Diese Variante der CSS-Anwendung eignet sich am besten für die individuelle Formatierung einzelner Webseiten.

► Die Reichweite jedes <style>-Elements erstreckt sich über eine ganze Webseite. 		► Ein <style>-Element im <head> der Webseite legt die Regeln für die Formatierung dieser speziellen Webseite fest.
• Hier können alle geltenden Formatierungs-Regeln geändert werden, d.h. alle ↑ Standard-Regeln und alle Regeln aus einer zentralen ↑ Stylesheet-Datei.
• Zusätzlich können eigene CSS-Klassen erstellt werden, die nur auf dieser speziellen Webseite gelten - Hier kann man sie allerdings auf jedes einzelne Element anwenden.
• Alle anderen CSS-Regeln (die im style-Element nicht geändert werden) bleiben unverändert gültig.
► Im <style>-Element kann man sowohl die Eigenschaften für beliebige HTML-Elemente (hier: <body> ) festlegen, als auch eigene CSS-Klassen definieren (hier .demo ).
Eigene Klassen werden mit vorangestelltem Punkt benannt !
► Die Anwendung auf HTML-Elemente erfordert keine weiteren Maßnahmen: <body> wird z.B. genau nach den Vorgaben formatiert.
► Die Anwendung eigener CSS-Klassen erfolgt mit dem class-Attribut, welches sie in fast jedes HTML-Element einfügen können. Hier wird der Klassen-Name ohne Punkt verwendet ! (→ CSS-Syntax)
► Das <style>-Element ist auch der einzig richtige Platz für an id-Attribute gebundene CSS-Eigenschaften (erkennbar am #-Zeichen).
<head>
<link rel=stylesheet type="text/css" href="test.css">
<style type="text/css">
body{background-color:#FFFF00;}
.demo{color:red; font-weight:bold;}
#tst1{color:green;}
</style>
</head>
<body>
So sieht <span class="demo">Demo</span> aus
So sieht der <span id="tst1">Test</span> aus
</body>
Zentralisierung
► Falls sie bemerken, dass sich gleiche oder ähnliche Regeln in den <style>-Elementen von mehreren Webseiten finden, dann sollten sie diese in eine ↑ StyleSheet-Datei auslagern !
Individuelle Formatierung
► Mit ↓ style-Attributen in einzelnen HTML-Elementen können sie seine Regeln für einzelne Elemente ändern.

CSS style-Attribute für Details
► CSS-Regeln lassen sich in Form von style-Attributen auf fast jedes HTML-Element anwenden. Damit ist es möglich, die Formatierung bis auf jedes einzelne Zeichen genau festzulegen.
► Die Reichweite erstreckt sich nur auf genau ein HTML-Element.
► Mit style-Attributen kann man jede andere CSS-Regel für einen kleinen Bereich überschreiben. 		Bei dieser Art der Anwendung fallen die Vorteile von CSS am wenigsten ins Gewicht.
Immerhin bietet CSS dabei weitaus mehr und genauere Möglichkeiten zur Gestaltung als veraltete HTML-Elemente und Attribute. Wenden sie diese Technik an, um beliebige andere Regeln (s.unten) für einen kleinen Bereich individuell zu ändern.
Einige Beispiele für CSS-style-Attribute in verschiedenen HTML-Elementen: Ein zentrierter <p>-Absatz, ein
<hr style="width:50%">-Trennungsstrich über die halbe Breite, eine Tabelle mit Text-Ausrichtung, ...
<p style="text-align:center"> Zentriert </p>
<td style="text-align:left;">
...
</td> 		<td style="text-align:right;">
...
</td>
► Die HTML-Elemente <div> und <span> eignen sich besonders gut für die Aufnahme von CSS-Regeln ( class- und style-Attributen).
► Die einzige Eigenschaft von <div> ist der vorangehende und nachfolgende Zeilen-Umbruch: Sie können damit z.B. das Absatz-<p>-Element ersetzen.
► <span> hat überhaupt keine Eigenschaften und dient ausschließlich zur Aufnahme von CSS-Regeln. 		Dieser <span style="font-weight:bold">Text<span> ist an verschiedenen Stellen mit <span style="color:blue">CSS<span>-style-<span style="font-size:18pt;">A</span>ttributen formatiert.
<div>Das <span style="color:red;">div-Element<span> begrenzt ganze Zeilen.</div>
Zentralisierung
► Falls sie bemerken, dass sich gleiche oder ähnliche Regeln in mehreren <style>-Attributen finden, dann sollten sie diese zusammenfassen !
• Wenn die betroffenen Regeln nur auf einer Webseite auftreten, dann ist ihre Zusammenfassung in einem ↑ <style>-Element sinnvoll.
• Wenn die Regeln auf meheren Webseiten auftreten, dann sollten sie in eine zentrale ↑ Stylesheet-Datei ausgelagert werden.

Tipps für CSS-Klassen
Einige Anregungen, wenn sie noch wenig Erfahrung mit CSS haben:
Legen sie eine Definition für das <body>-Element und alle anderen häufig vorkommenden HTML-Elemente in einer Stylesheet-Datei an. So können sie das Aussehen ihrer Webseiten einfach und bequem steuern. (→ CSS-Syntax)

Sie können eine einzige Definition auch auf mehrere HTML-Elemente (hier: p,div,td ) anwenden.

Hinweis: lassen sie keine Definition ganz leer, wie z.B. p{} sondern setzen sie zumindest Standard-Regeln ein, z.B. p{text-align:left;}
/* Format wichtiger HTML-Elemente */
body {color:black; background-color:white; font-family:'Times New Roman',Times,serif;}
.center{text-align:center; font-size:12pt;}
p,div,td {text-align:left; color:black;}
h1 {font-size:14pt; color:red;}
Alle auslaufenden HTML-Elemente lassen sich durch CSS-Klassen ersetzen. Die Regeln dazu werden vorteilhaft in einer Stylesheet-Datei festgelegt.

Ihren Web-Editor schalten sie dann nicht mehr zwischen "alt" & "neu"-Technik um, sondern verwenden durchgehend CSS.

Sie können beliebig viele Regeln (z.B. "bold" und "underline") miteinander zu neuen Styles (hier z.B. "bu") kombinieren.
/* Ersatz auslaufender HTML-tags */
.b {font-weight:bold;}
.center {text-align:center;}
.i {font-style:italic;}
.bi {font-weight:bold; font-style:italic;}
.bu {font-weight:bold; text-decoration:underline;}
.u {text-decoration:underline;}
So ersetzen sie auslaufende (deprecated) HTML-tags durch CSS: <b>,<center>,<i>,<u> , ...
Veraltete <b>tags<b> werden durch <span class="b">CSS<span>-Klassen ersetzt.
Definieren sie eigene CSS-Klassen für alle wichtigen Elemente, die in ihren Webseiten öfters vorkommen.

Beispiele aus dem Web von PS-Trainer:
Eigene Klassen werden für folgende Elemente verwendet:
Titel (1,2,3), Einführung, Inhalts-Tabelle, Kapitel, ...
Im zentralen Stylesheet wird festgelegt, wie "Titel1" aussieht, damit wird das Aussehen aller Titel auf allen Webseiten von PS-Trainer gesteuert. 		Auch das Aussehen von Quelltext wird durch CSS gesteuert:
Im zenralen stylesheet ist festgelegt, wie Quelltext "src" in seinen verschiedenen Varianten aussieht: auf dieser Seite z.B. src_htm und src_css. Damit ist garantiert, dass HTML-Quelltext auf allen Webseiten genau gleich aussieht. Außerdem kann dieser style bei Bedarf in wenigen Minuten für alle Seiten dieses Webs geändert werden

CSS-Demo: spielen sie mit den CSS-Regeln dieser Webseite !
Demo:
Ändern sie probeweise die CSS-Eigenschaften dieser Seite !
styleauseindemo1demo2
Titel 1 ● ● ● ●
Titel 2 ● ● ● ●
Quelltext ● ● ● ●

Hinweis: Die Durchforstung aller → DOM-Elemente dieser Webseite kann je nach Leistung ihres PC einige Sekunden dauern.


♦ Details zur Programmierung von CSS mit Javascript 		Muster:
Titel 1
Titel 2
<!-- So wird HTML-Quelltext dargestellt -->
/* So wird CSS-Quelltext dargestellt */

Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   CSS   >   CSS-Ebenen