DHTML - Dynamic HTML


Kurs 2  DHTML
Themen: CASCADING STYLE SHEETS und die 3 Arten, Weitere CSS-BEFEHLE, Links


CASCADING STYLE SHEETS und die 3 Arten


Wie JAVASCRIPT kann CSS Cascading Style Sheets auf 3 Arten in den Quelletext einer Webseite eingefügt werden.
Cascading Style Sheets sind auch im Einsatz bei Projekten mit XML, PHP oder einfach nur mit HTML. 

Beispiel 1

Der Programmier-Text ist in einer ausgelagerten Datei (beispiel.css) und wird nun so im Quelltext aufgerufen:

<link rel=stylesheet type="text/css" href="beispiel.css">

Beispiel 2

Der Programmier-Text befindet sich direkt im HEAD-Bereich der Webseite:

<head>
<style type="text/css">
<!--
p.eins   
{                           [ { ] Klammer =Befehl an den Computer: von hier an musst
                            die Befehle nicht nur lesen sondern auch ausführen, und in
                            den Namen EINS abspeichern (ähnlich Variablen), bis Ende 
                            der Klammer [ } ]     
font-family: arial, sans serif; 
padding: 3;
text-align: center;
font-size: 15;
}
//-->
</style>
</head>

.... und wird dann folgendermassen in einzelne TAG's verwiesen:

<p class="eins>
(! Es können noch direkt Befehle beigefügt werden (Beispiel 3), die dann den Vortritt haben vor den CLASS-Zuweisungen.) 



Beispiel 3

Der Programmier-Text befindet sich direkt im Quelltext bei den TAG's (Befehlen):

<HTML>
.....

<p style="font-family: arial, sans serif">


....</HTML>


Weitere CSS-Befehle

Hier nun noch drei weitere Beispiele was man mit Hilfe von CSS machen kann, mehr Beipiele und 
Möglichkeiten finden man im Internet oder in entsprechenden Lehrbücher. Allerdings ist noch zu 
beachten das bei komplizierten CSS-Befehlen es noch zu Fehlinterpretation kommen kann 
zwischen den verschiedenen Programmen (Browsern) und Betriebssystemen. 

Vor Überraschungen wird man gelegentlich leider nicht verschont, was der Verbreitung von FLASH-
Programmierung sehr geholfen hat, da es da um eine geschlossene Programmierumgebung handelt und 
überall gleich aussieht. Nachteil von FLASH ist die zwar praktische aber auch gewöhnungsbedürftige 
Programmierung, ebenfalls etwas mühsam ist die typische Wartezeit die man zu Beginn in Kauf nehmen 
muss. Was für viele Seiten nicht geeignet ist und somit auch FLASH gewisse Grenzen gesetzt sind.   


1.  Dieses Hintergrund-Bild über CSS eingepasst in einen DIV-Container. 


<div style="width: 600px; height: 100px; background-image: url(back.jpg); background-repeat: repeat-x;">
</div>


  

Hintergrundbild in der Webseite kann auch mit CSS definiert werden. Folgender Programmier-Text befindet
sich im HEAD-Bereich dieser Webseite, was zu dem Balken mit dem Farbverlauf führt auf Basis der
back.jpg Bilddatei.
 
<style>
<!--
body
{
background-image: url(back.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: 177px 310px;
}
-->
</style>



2. Text-Box block-formatiert. Verschiedene Eigenschaften sind beliebig noch abänderbar. 

<div style="width: 600px; height: 100px; border: solid 1px #000000; padding: 8px; text-align: justify;">
TEXT
</div>

Hier nun noch drei weitere Beispiele was man mit Hilfe von CSS machen kann, mehr Beipiele und Möglichkeiten finden man im Internet oder in entsprechenden Lehrbücher. Hier nun noch drei weitere Beispiele was man mit Hilfe von CSS machen kann, mehr Beipiele und Möglichkeiten finden man im Internet oder in entsprechenden Lehrbücher. Hier nun noch drei weitere Beispiele was man mit Hilfe von CSS machen kann, mehr Beipiele und Möglichkeiten finden man im Internet oder in entsprechenden Lehrbücher.





3. Text-Box mit Möglichkeit zum SCROLLEN. 


<div style="overflow: scroll; width: 300px; height: 100px; padding: 8px; border: solid 1px #000000;">
TEXT<br>
TEXT<br>
TEXT<br>
TEXT<br>
TEXT<br>
TEXT<br>
TEXT<br>
TEXT<br>
TEXT<br>
</div>

Das ist ein Beispieltext.
Das ist ein Beispieltext.
Das ist ein Beispieltext.
Das ist ein Beispieltext.
Das ist ein Beispieltext.
Das ist ein Beispieltext.
Das ist ein Beispieltext.
Das ist ein Beispieltext.
Das ist ein Beispieltext.

Links zu CSS Webseiten Text um eine Figur einfliessen lassen http://meyerweb.com/eric/css/edge/raggedfloat/demo.html Rahmen, Fenster mit gerundeten Ecken und weitere CSS-Besonderheiten http://www.cssplay.co.uk/ CSS Lehrgang von Schattenbaum Deutschland http://www.schattenbaum.net/css/