Kleine Testseite zum Layout-Test



/* nomaler Text - einfach so in den BODY geschrieben */

Um CSS nutzen zu können müssen folgende zwei Zeilen im HEAD-Bereich von jedem einzelnen ITS-Template vorhanden sein:
<HEAD>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <link REL="stylesheet" HREF="`mimeURL("../../../../../../its.css")`" TYPE="text/css">
</HEAD>


oder es ist im Head-Bereich die komplette CSS-Definition abzulegen


/* nomaler Text - innerhalb von <P> - Tags */

Das ist ein Absatz. Bei Bedarf geht er über mehrere Zeilen um zu demonstrieren wie der Zeilenabstand etc. eingestellt ist. Es können aber auch die Buchstaben- und/oder Wortzwischenräume einzeln definiert werden.

/* P-Absatz */
bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla

...

/* fetter P-Absatz */
bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla

...


Verschiedene Schriftgrößen in 'EM' Formaten:
0.2 em: Der rote Fuchs sah die weiße Gans.
0.3 em: Der rote Fuchs sah die weiße Gans.
0.4 em: Der rote Fuchs sah die weiße Gans.
0.5 em: Der rote Fuchs sah die weiße Gans.
0.6 em: Der rote Fuchs sah die weiße Gans.
0.7 em: Der rote Fuchs sah die weiße Gans.
0.8 em: Der rote Fuchs sah die weiße Gans. ABER ACHTUNG: Schriften können auch mehrfach verkleinert werden.
0.9 em: Der rote Fuchs sah die weiße Gans.
1.0 em: Der rote Fuchs sah die weiße Gans. So sollte eigentlich sämtlicher 'undefinierte' Text erscheinen.
1.1 em: Der rote Fuchs sah die weiße Gans.
1.2 em: Der rote Fuchs sah die weiße Gans.
1.3 em: Der rote Fuchs sah die weiße Gans.
1.4 em: Der rote Fuchs sah die weiße Gans.
1.5 em: Der rote Fuchs sah die weiße Gans.
1.6 em: Der rote Fuchs sah die weiße Gans.
1.7 em: Der rote Fuchs sah die weiße Gans.
1.8 em: Der rote Fuchs sah die weiße Gans.
1.9 em: Der rote Fuchs sah die weiße Gans.
2.0 em: Der rote Fuchs sah die weiße Gans.



Verschiedene Laufweiten der Buchstaben - letter-spacing:1px bis 5px;
1.0 em: Der rote Fuchs sah die weiße Gans. 'undefinierter' Text.
1.0 em: Der rote Fuchs sah die weiße Gans. 0px.
1.0 em: Der rote Fuchs sah die weiße Gans. 0.1px.
1.0 em: Der rote Fuchs sah die weiße Gans. 0.2px.
1.0 em: Der rote Fuchs sah die weiße Gans. 0.3px.
1.0 em: Der rote Fuchs sah die weiße Gans. 0.4px.
1.0 em: Der rote Fuchs sah die weiße Gans. 0.5px.
1.0 em: Der rote Fuchs sah die weiße Gans. 0.6px.
1.0 em: Der rote Fuchs sah die weiße Gans. 0.7px.
1.0 em: Der rote Fuchs sah die weiße Gans. 0.8px.
1.0 em: Der rote Fuchs sah die weiße Gans. 0.9px.
1.0 em: Der rote Fuchs sah die weiße Gans. 1px.
1.0 em: Der rote Fuchs sah die weiße Gans. 1.1px.
1.0 em: Der rote Fuchs sah die weiße Gans. 1.2px.
1.0 em: Der rote Fuchs sah die weiße Gans. 1.3px.
1.0 em: Der rote Fuchs sah die weiße Gans. 1.4px.
1.0 em: Der rote Fuchs sah die weiße Gans. 1.5px.
1.0 em: Der rote Fuchs sah die weiße Gans. 1.6px.
1.0 em: Der rote Fuchs sah die weiße Gans. 1.7px.
1.0 em: Der rote Fuchs sah die weiße Gans. 1.8px.
1.0 em: Der rote Fuchs sah die weiße Gans. 1.9px.
1.0 em: Der rote Fuchs sah die weiße Gans. 2px.
1.0 em: Der rote Fuchs sah die weiße Gans. 3px.
1.0 em: Der rote Fuchs sah die weiße Gans. 4px.
1.0 em: Der rote Fuchs sah die weiße Gans. 5px.



... Verschiedene Schriftgrößen in '%' Formaten:
20%: Der rote Fuchs sah die weiße Gans.
30%: Der rote Fuchs sah die weiße Gans.
40%: Der rote Fuchs sah die weiße Gans.
50%: Der rote Fuchs sah die weiße Gans.
60%: Der rote Fuchs sah die weiße Gans.
70%: Der rote Fuchs sah die weiße Gans.
80%: Der rote Fuchs sah die weiße Gans. ABER ACHTUNG: Schriften können auch mehrfach verkleinert werden.
90%: Der rote Fuchs sah die weiße Gans.
100%: Der rote Fuchs sah die weiße Gans. So sollte eigentlich sämtlicher 'undefinierte' Text erscheinen.
110%: Der rote Fuchs sah die weiße Gans.
120%: Der rote Fuchs sah die weiße Gans.
130%: Der rote Fuchs sah die weiße Gans.
140%: Der rote Fuchs sah die weiße Gans.
150%: Der rote Fuchs sah die weiße Gans.
160%: Der rote Fuchs sah die weiße Gans.
170%: Der rote Fuchs sah die weiße Gans.
180%: Der rote Fuchs sah die weiße Gans.
190%: Der rote Fuchs sah die weiße Gans.
200%: Der rote Fuchs sah die weiße Gans.



... Verschiedene Schriftgrößen nebeneinander in unterschiedlichen Definitionsformaten. Insbesondere bei einer Abweichenden Browsereinstellung vom 'normalen' (bei IE unter <Ansicht> - <Schriftgrad> ) zeigen sich deutliche Differenzen und es wird klar, warum *absolute* Größenangaben (z.B. Pt) nicht sinnvoll sind (z.B. für schlecht sehende Menschen; oder Damen mit Publikumsverkehr, die zu eitel für eine Brille sind):
12pt: Der rote Fuchs sah die weiße Gans. PT = Punkt. 1 Punkt = 1/72 Inches.
1pc: Der rote Fuchs sah die weiße Gans. PC = Pica. 1 Pica = 12 Punkt.
0.17in: Der rote Fuchs sah die weiße Gans. IN = Inch. 1 Inch = 2.54 cm.
4.23mm: Der rote Fuchs sah die weiße Gans.
0.423cm: Der rote Fuchs sah die weiße Gans.
16px: Der rote Fuchs sah die weiße Gans. PX = Pixel. Abhängig von der Pixeldichte des Ausgabegerätes.
1.0em: Der rote Fuchs sah die weiße Gans. em = Element. Bezogen auf die Schriftgröße des Elternelements.
2.0ex: Der rote Fuchs sah die weiße Gans. Bezogen auf die die Höhe des Kleinbuchstaben x im Elternelement
100%: Der rote Fuchs sah die weiße Gans.



...

/* h1 Überschrift */

bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla
...

/* h2 Überschrift */

bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla
...

/* h3 Überschrift */

bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla
...

/* h4 Überschrift */

bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla
...
/* h5 Überschrift */
bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla
...
/* h6 Überschrift */
bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla
...



/* normale (unbehandelte) Liste */
...

/* Liste ohne Listpunkte */
...

/* verde-bianco-rosso Liste */
...


/* normale TD - Tabellen */
nur Tabellenheader hat 'Klasse'
Tabelleninhalt 1
Tabelleninhalt 2, Class=frame
Tabelleninhalt 3
Tabelle eher lokal mit 'style' versehen.
...


/* Tabelle für Farbwirkungen / Farbtests */
1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8
2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8
3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8
4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8

5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8
6.1 6.2 6.3 6.4 6.5 6.6 6.7 6.8
7.1 7.2 7.3 7.4 7.5 7.6 grau1 #F4F4F4 7.7 grau2 #EFEFEF 7.8 grau3 #C6C6C6





/* Tabelle mit Buttons und Links [Javascript gesteuert!] */
...





/* Links */
a:link a:visited a:hover a:active ...





/* Trennlinien */

bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla,bla, bla, bla, bla






/* Formular */
Auch Formulare können mit CSS gestaltet werden.
Das hat z.B. den Vorteil daß sie wesentlich performanter geladen werden, da die normalerweise verwendeten Grafiken (z.B. für Buttons) nicht noch zusätzlich nachgeladen werden müssen.


Textfeld:   disabled:   readonly:

Button:

Checkbox:

Passwort:

Radiobutton:

Submit: (öffnet neues Fenster)

Reset: (löscht Eingaben)