PS-Trainer
Style-Programmierung @ PS-Trainer
Die zukunftsweisende Technik, Webseiten zu formatieren
Homepage von PS-Trainer - Webdesign - CSS - an PS-Trainer
PS-Trainer
Bei der Entwicklung statischer Webseiten wird es trotz der grossen Vorteile von CSS noch längere Zeit dauern, bis sich CSS gegenüber veralteter Formatierung durchgesetzt hat. Diese Seite bietet ausgewählte Informationen für EntwicklerInnen dynamischer Webseiten. Es ist anzunehmen, dass sich diese Zielgruppe rascher und konsequenter der CSS-Technik bedient.

Inhalt:     CSS Styles
Style-Attribute: Styles für einzelne HTML-Objekte
Style-Objekte: Styles für einzelne Webseiten
Stylesheets für ganze Webs
    Style-Programmierung     		Fix-Styles von Uralt-HTML
Styles für Links
Stile in Kaskaden
Dynamische Style-Programmierung:
      Skins, CSS-Styles, class-Attribute, style-Attribute

Fix-Styles von Uralt-HTML:
Schon ein wenig verstaubt sind einige HTML-tags aus der Web-Urzeit. Historisch war das immerhin das erste Werkzeug, fix definierte Styles für bestimmte damals wichtige Textbausteine einzusetzen:

<listing>,<plaintext> und <xmp> sind bereits vor längerer Zeit aus HTML verschwunden.

Auch diese tags werden zum Glück nur mehr selten eingesetzt:
<address>Adresse</address>, <cite>Zitat</cite>, <code>Quellcode</code>, <dfn>Definition</dfn>, <em>Hervorhebung<em>, <kbd>Keyboard</kbd>, <samp>Sample</samp>, <strong>Strong</strong>, <tt>Teletype</tt>, <var>Variable</var>, ...
Hier liegt meist der Fall vor, dass Formate an bestimmte Inhalte gebunden wurden. Der aktuelle Denk-Ansatz trennt diese beiden Aspekte: Alle diese tags sollten nicht mehr verwendet werden. Formate werden in CSS definiert, Inhalte in XML.

Die <h1>Überschriften 1</h1> bis <h6>6</h6> sind zwar dank CSS ebenfalls überflüssig, werden jedoch angeblich von den robots (spiders) der Suchmaschinen ( Webpromotion) noch hoch bewertet. Sie können bleiben, werden meist ohnehin nur in jenen Teilen eingesetzt, die speziell für die robots und nicht für menschliche BesucherInnen vorgesehen sind.

Auch die meisten Listen-Formate sind überflüssig, und können durch CSS ersetzt werden:
Definitionslisten <dl><dt>...</dt><dd>...</dd>...</dl>
Menülisten <menu><li>...</li>... ...</menu>
Verzeichnislisten <dir><li>...<li>... ... </dir>

Ungeordnete Listen <ul><li>...</li> ... ... </ul> erzeugen als einzigen Komfort bullets am Zeilenbeginn. Wer das mit Hilfe kleiner GIFs selbst erledigt, kann leicht darauf verzichten.
Nummerierte Listen <ol><li>...</li> ... ... </ol> bieten automatische Nummerierung und damit ein feature, das sich zwar mit JavaScript und DOM ebenfalls nachbauen lässt, aber einen gewissen Aufwand erfordert.

<pre>Vorformatierter Text</pre>hat gerade für EntwicklerInnen eine gewisse Bedeutung erlangt, da man damit Source-Code bequem in Webseiten darstellen kann, und zwar inklusive aller dort zur "Formatierung" eingesetzter Leerzeichen, in "dicktengleicher" Schrift (monospace), d.h. alle Zeichen sind gleich breit. Diesen Effekt kann man derzeit mit CSS nicht vorgeben, dieses tag sollte daher erhalten bleiben, obwohl eigentlich überholt.

Ein Grundübel veralteter HTML-Fix-Styles ist die geringe Flexibilität. So erzeugen etwa viele dieser tags zusätzliche Leerzeilen, die nicht immer erwünscht sind.

Styles für Links:
Links sind <a>-Objekte in HTML und werden prizipiell so behandelt wie alle anderen tags. Allerdings können sie in mehreren Zuständen vorkommen, die jeweils unterschiedlich formatiert sind:

link (noch nicht besucht), visited (bereits besucht), hover (der Mauszeiger befindet sich gerade darüber), active (gerade angeklickt), focus (hat gerade den Fokus erhalten, z.B. beim Durchlaufen mit der TAB-Taste).

Sie können jeden davon einzeln ändern. Der Zustand wird nach Angabe des HTML-Namens und einem : angeführt. (siehe rechts).
Ein Element der Standard-Formatierung von Links ist die Unterstreichung. Diese können sie mit text-decoration:none; abschalten.
Änderung der Anzeige-Formate für die verschiedenen Zustände von Links:

<style type="text/css">
  a:link { color:#0000FF;}
  a:visited { color:#000080;}
  a:hover { font-weight:bold; color:#FF0000;}
  a:active { font-weight:bold; color:#FFFF00; }
</style>

Styles in Kaskaden:
Eigene Stile in Kaskaden: was passiert beim Verschachteln von Stil-Elementen:
Mehrere Stil-Elemente werden zunächst definiert, dann in verschachtelten Strukturen angewendet:
<style>
  .s1{font-family:sans-serif;}
  .s2{color:red;}
  .s3{font-weight:bold;}
</style>

Das Beispiel beginnt "ohne" Stil, d.h. mit dem Standard body-Stil,
<div class="s1"> dann wird Stil 1 angewendet <span class="s2">dann bleiben alle Elemente von Stil 1 unverändert, ausser jenen, die in <span style="font-weight:bold">Stil 2</span> definiert werden</span>, danach bleibt nur mehr Stil 1 </div>
und zuletzt endet das Beispiel wieder "ohne" speziellen Stil.
Noch ein Beispiel mit einer Tabelle - dort kommen Kaskaden implizit vor:
(1) Die gesamte Tabelle wird mit style s1 formatiert (sans-serif)
(2) Die obere Reihe wird mit s2 formatiert (rot)
(3) Die rechte Spalte wird mit s3 formatiert (fett). 		<table class="s1">
<tr class="s2"> <td>Zelle 11</td> <td class="s3">Zelle 12</td></tr>
<tr> <td>Zelle 21</td> <td class="s3">Zelle 22</td></tr>
</table>

Diese Tabelle ziegt die Kombinations-Möglichkeiten von 3 CSS-Styles

Ebenen der dynamischen Style-Programmierung:
Wenn sie dynamisch (in Echtzeit) Styles von Webseiten ändern wollen, dann können sie auf 4 verschiedenen Ebenen eingreifen:

Die Steuerung erfolgt nach dem Document Object Model (DOM). Prinzipiell ist es auch möglich, mit veralteten Methoden einzelne Formatierungs-Elemente dynamisch zu ändern, diese Methoden sind jedoch aufwendig und / oder spezifisch für bestimmte Browser / Versionen.

Tip: Bei Nutzung seltener verwendeter Aspekte von CSS sollten sie jedoch immer mit mehreren gängigen Betriebssystemen / Browsern / Versionen die Funktionalität testen, und ihre Programmierung entsprechend anpassen.

Hier wird der Zugriff auf 4 Ebenen demonstriert:

"Skins" (komplette style-Objekte umschalten)
CSS-Objekte - leider nein
class-Attribute von HTML-Objekten
style-Attribute von HTML-Objekten

Dynamische Style-Skins:
Ein sehr elegantes Werkzeug zur raschen undübersichtlichen Änderung der Formatierung ganzer Webseiten ist die Verwendung von "Skins". Es kann notwendig sein, das Format einer kompletten HTML-Seite bei gleichbleibendem Inhalt zu ändern, z.B. von einem Skin "dunkel auf hell" zu einem Skin "hell auf dunkel". Dabei sollen in einem Arbeitsgang alle benötigten Styles umgeschaltet werden.

(1) Stellen sie zuerst alle auf ihrer Webseite eingesetzten Styles zusammen und fassen sie diese in einem <style>-Objekt im <head> zusammen. Das ist der erste Skin, der beim Laden der Webseite angewendet wird.

(2) Stellen sie für jeden weiteren Skin ein zusätzliches <style>-Objekt zusammen und platzieren sie es vor dem Standard-Skin. Die Namen der verwendeten Styles müssen genau gleich lauten, deren Formatierung ist naturgemäss anders. Jede nachfolgende Definition überschreibt die vorhergehende. Bezeichnen sie jeden Skin mit einem id-Attribut.

(4) Bei Bedarf führen sie ein Skript aus, das jeweils eines von mehreren <style>-Objekten einschaltet: Die Funktion stellt fest, wieviele Skins (tags mit Name style) es gibt und bearbeitet diese in einer for-Schleife. Das betreffende Objekt wird der Variablen thenode zugewiesen, und anschliessend ein- oder ausgeschaltet, je nach Wert des übergebenen Parameters styleid.

Demonstration: Umschalten auf skin0, skin1, skin2.
Hier die Definition von 2 Skins:
<style type="text/css" id="skin1">
  body{background-color:#CCFFFF; color:#440000;}
  .s1{font-family:monospace;}
  .s2{color:blue;}
</style>
<style type="text/css" id="skin0">
  body{background-color:#F1E7C0; color:#000000;}
  .s1{font-family:sans-serif;}
  .s2{color:red;}
</style>
Die Javascript-Funktion zur Umschaltung:
function skin_change(styleid) {
  var stylenr = document.getElementsByTagName("style").length;
  for(var i=0;i<stylenr;i++) {
    var thenode = document.getElementsByTagName("style")[i];
    var theid = thenode.getAttribute("id");
    if(theid==styleid){thenode.disabled=false;}
    else {thenode.disabled=true;}
  }
}

Dynamische Änderung von CSS-Objekten:
Über DOM ist der Zugriff auf <style>-Objekte möglich. Man findet zwar die Attribute (z.B. id ), die enthaltenen CSS-Objekte (Styles) sind jedoch nicht als child-nodes enthalten und lassen sich daher vorläufig nicht über DOM ansprechen. - Damit könnte man dynamisch den Stil aller Objekte ändern, die damit formatiert wurden.

Als Umweg bleibt, alle tags (nodeType=1) einer Seite zu durchlaufen. In der Schleife können sie jene Knoten ausfiltern, die ein class-Attribut mit einem bestimmten Wert (dem zu ändernden Stil) enthalten, und die betreffenden Knoten entsprechend ändern.

Analyse und dynamische Änderung des class-Attributs:
Wenn sie Elemente ihrer Webseiten unter Verwendung eigener Styles formatiert haben, dann können sie diese analysieren und dynamisch ändern:
Hier ist ein
<span id="test1" class=" s1"> Test-Objekt </span>
Dis Standardmethode laut DOM ist getAttribute(). Navigator funktioniert, leider arbeiten M$ Browser damit fehlerhaft. Daher wird hier eine andere Lösung vorgestellt:
Demonstration:
Analyse des Objekt-Stiles durch Aufruf von class_info('test1');
Hier die Funktion zur Analyse des class-Attributs:
function class_info(nodeid) {
  var thenode = document.getElementById(nodeid);
  var theclass = thenode.className;
  alert("class_info("+nodeid+")="+theclass);
}
Die Änderung des class-Attributs erfolgt analog zur Analyse:
Dis Standardmethode laut DOM ist setAttribute(). Navigator funktioniert, leider arbeiten M$ Browser damit fehlerhaft. Daher wird hier eine andere Lösung vorgestellt:

Demonstration: Umschaltung des Objekt-Styles auf s1, s2, s3 durch Aufruf von class_change('test1','s1');		 Hier die Funktion zur Änderung des class-Attributs:
function class_change(nodeid,style) {
  var thenode = document.getElementById(nodeid);
  thenode.className = style;
}
Hinweis: Nach jeder Änderung muss die Analyse-Funktion (s.o.) den geänderten Wert des class-Attributs anzeigen.
Alternative: Zur Analyse kann man an Stelle der Methode getAttribute in einer Schleife alle Attribute eines Knotens durchlaufen, und dabei das gesuchte herausfiltern. Das funktioniert mit allen gängigen Browsern.
  attnr = thenode.attributes.length;
  for(i=0;i<attnr;i++) {
    theatt = thenode.attributes[i];
    attname = theatt.nodeName;
    if(attname=="class") {
      theclass = theatt.nodeValue;
    }
  }
Alternative: Zur Änderung können sie an Stelle der Methode setAttribute auch komplizierter vorgehen: Zuerst ein Attribut myatt erzeugen, diesem den Stil zuweisen, dann dem Knoten das komplette Attribut zuweisen. Das funktioniert mit allen gängigen Browsern.
  myatt = document.createAttribute("class");
  myatt.nodeValue = style;
  thenode.setAttributeNode(myatt);

Analyse und dynamische Änderung von style-Attributen
Auch auf dieser Ebene können sie mit DOM-Methoden eingreifen.

Dieser Absatz ist noch in Arbeit.
Hier ist ein
<span id="test2"
style=" font-weight:bold; ">
Test-Objekt
</span>
Demonstration der Analyse: 		Dieser Absatz ist noch in Arbeit.
Änderung von style-Attributen:
Textfarbe: black, red, blue
Schriftgrösse: 8pt, 10pt, 12pt, 14pt
Schrift: serif, non-serif, monospace
Schnitt: fett (ein-aus), kursiv (ein-aus), unterstrichen (ein-aus)
Hintergrundfarbe: weiss, gelb, aqua
Rahmen: 0pt, 1pt, 2pt
Rahmenfarbe: schwarz, rot, blau, weiss
usw. usw. 		Dieser Absatz ist noch in Arbeit.
CSS-Namen in Javascript:
Achtung: Beim Zugriff auf style-Attribute mit "mehrteiligen Namen" werden geringfügig unterschiedliche Attribut-Namen verwendet:

Der Bindestrich wird weggelassen, dafür das nächste Zeichen gross geschrieben. Rechts einige typische & wichtige Beispiele.
style-Definition
Javascript-Name
background-color backgroundColor
text-align textAlign
font-family fontFamily
color color

Stylesheets für ganze Webs  

Homepage von PS-Trainer - Webdesign - CSS - an PS-Trainer
Aktuelle Daten dieser Seite Letzte Änderung:
  Geocities

 

 

 

Hosted by www.Geocities.ws

1