2.11.5 Beispiele (Anwendungen in dieser Website)
- 1 Rahmen mit dem Code
div- a) Schwarze Box:
div class="box-schwarz" - b) Box blau-grün:
div class="box-blau-gruen" - c) Hintergrund blau.grün:
div class="blau-gruen" - d) Box blau:
div class="box-blau" - e) Hintergrund blau:
div class="blau" - f) Box rot:
div class="box-rot" - g) Box rot-dünn
div class="box-rotduenn" - h) Box grün
div class="box-gruen" - i) Box gelb:
div class="box-gelb" - j) Hintergrund gelb:
div class="gelb"
- a) Schwarze Box:
- 2 Rahmen mit dem Code
code - 3 Rahmen mit dem Code
pre
⇧
1 Rahmen mit dem Code div
- a)Schwarze Box:
div class="box-schwarz" - b) Box blau-grün:
div class="box-blau-gruen" - c) Hintergrund blau.grün:
div class="blau-gruen" - d) Box blau:
div class="box-blau" - e) Hintergrund blau:
div class="blau" - f) Box rot:
div class="box-rot" - g) Box rot-dünn
div class="box-rotduenn" - h) Box grün
div class="box-gruen" - i) Box gelb:
div class="box-gelb" - j) Hintergrund gelb:
div class="gelb"
Block-Element:
div
↑
a) Schwarze Box: div class="box-schwarz"
Bemerkungen zur Formatierung:
-
Der Rahmen ist schwarz und der Hintergrund ist weiss.
-
Der Titel ist fett formatiert
-
Der Zeilenabstand oberhalb des Absatzes des Textes ist grösser als ein Zeilenabstand aber kleiner als zwischen zwei Absätzen.
1) Ansicht der Einträge im Stylesheet:
/* Schwarzer Rahmen */
.box-schwarz {
margin:1.5em 0;
border-style:solid;
border-width:2px;
padding:0 1em;
border-color:#000000;
background:#FFFFFF;
color:#000000;
}
/* Halber Zeilenabstand oben */
.halb {
margin-top:-0.5em;
}
2) Im Quelltext steht im Textbereich:
<div class="box-schwarz"> <p style="font-weight:bold">Titel</p> <p class="halb">Text Absatz 1 Zeile 1<br>und Absatz 1 Zeile 2</p>
3) Im HTML-Dokument erscheint folgendes:
Titel
Text Absatz 1 Zeile 1
und Absatz 1 Zeile 2
↑
b) Box blau-grün: div class="box-blau-gruen"
1) Ansicht des Eintrages im Stylesheet:
/* Blau-Grüne Box */
.box-blau-gruen {
border-style:solid;
border-width:3px;
background:#D7E1EA;
border-left-color: #E8EEF3 ;
border-top-color: #E8EEF3 ;
border-right-color: #A5BCCF ;
border-bottom-color:#A5BCCF;
color:#000000;
padding:0.5em;
}
2) Im Quelltext steht im Textbereich:
<div class="box-blau-gruen"> <strong>Titel</strong><br> Mitteilung </div>
3) Im HTML-Dokument erscheint folgendes:
Mitteilung
↑
c) Hintergrund blau.grün: div class="blau-gruen"
1) Ansicht des Eintrages im Stylesheet:
/* class="blau-gruen" Blau-Grüner Hintergrund zum Hervorheben von Text */
.blau-gruen {
padding:2px;
background:#D7E1EA;
color:#000000;
}
2) Im Quelltext steht im Textbereich:
<div class="blau-gruen"> <strong>Titel</strong><br> Mitteilung </div>
3) Im HTML-Dokument erscheint folgendes:
Mitteilung
↑
d) Box blau: div class="box-blau"
Bemerkungen zur Formatierung:
- Der Rahmen ist blau und der Hintergrund ist hellblau.
1) Ansicht des Eintrages im Stylesheet:
/* Blaue Box */
.box-blau {
display:block;
border-style:solid;
border-width:3px;
padding:0.5em;
background:#B3C5D6;
border-left-color: #D4DFE8 ;
border-top-color: #D4DFE8 ;
border-right-color: #7092B2 ;
border-bottom-color:#7092B2;
color:#000000;
}
2) Im Quelltext steht im Textbereich:
<div class="box-blau"> <strong>Titel</strong><br> Mitteilung </div>
3) Im HTML-Dokument erscheint folgendes:
Mitteilung
↑
e) Hintergrund blau: div class="blau"
1) Ansicht des Eintrages im Stylesheet:
/* Blauer Hintergrund */
.blau {
padding:2px;
background:#B3C5D6;
color:#000000;
}
2) Im Quelltext steht im Textbereich:
<div class="blau"> <strong>Titel</strong><br> Mitteilung </div>
3) Im HTML-Dokument erscheint folgendes:
Mitteilung
↑
f) Box rot: div class="box-rot"
1) Ansicht des Eintrages im Stylesheet:
/* Rote Box */
.box-rot {
border-style:solid;
border-width:5px;
padding:0.5em;
border-color: #D42B34;
background:#FFFFFF; /* Hintergrund: Weiss */
color:#000000; /* Schrift: Schwarz */
text-align:center; /* Achtung: Zentriert */
}
2) Im Quelltext steht im Textbereich:
<div class="box-rot"> <strong>Titel</strong><br> Mitteilung </div>
3) Im HTML-Dokument erscheint folgendes:
Mitteilung
↑
g) Box rot-dünn div class="box-rotduenn"
1) Ansicht des Eintrages im Stylesheet:
/* Rot-Dünne Box */
.box-rotduenn {
border-style:solid;
border-width:2px;
border-color: #D42B34;
color:#000000; /* Schrift: Schwarz */
text-align:left;
padding-left:1em;
}
2) Im Quelltext steht im Textbereich:
<div class="box-rotduenn"> <strong>Titel</strong><br> Mitteilung </div>
3) Im HTML-Dokument erscheint folgendes:
Mitteilung
↑
h) Box grün div class="box-gruen"
1) Ansicht des Eintrages im Stylesheet:
/* Gruener Hintergurund mit Rahmen */
.box-gruen {
display:block;
border-width:3px;
padding:0.5em;
border-color:#99CC66;
background:#D0E5CD;
color:#000000;
}
2) Im Quelltext steht im Textbereich:
<div class="box-gruen"> <strong>Titel</strong><br> Mitteilung </div>
3) Im HTML-Dokument erscheint folgendes:
Mitteilung
↑
i) Box gelb: div class="box-gelb"
Dieser Rahmen wird in der der vorliegenden Website die Darstellung des Formulars "Posteingang" benutzt.
1) Ansicht des Eintrages im Stylesheet:
/* Gelber Hintergurund und roter Rahmen fuer Posteingang (vorne=outset)*/
.box-gelb {
display:block;
border-style:outset;
border-width:3px;
padding:0.5em;
border-color:#D42B34;
background:#F5F08F;
color:#000000;
}
2) Im Quelltext steht im Textbereich:
<div class="box-gelb"> <strong>Titel</strong><br> Mitteilung </div>
3) Im HTML-Dokument erscheint folgendes:
Mitteilung
↑
j) Hintergrund gelb: div class="gelb"
1) Ansicht des Eintrages im Stylesheet:
/* Gelber Hintergrund: class="gelb" */
.gelb {
padding:1px;
background:#F5F08F;
color:#000000;
}
2) Im Quelltext steht im Textbereich:
<div class="gelb"> <strong>Titel</strong><br> Mitteilung </div>
3) Im HTML-Dokument erscheint folgendes:
Mitteilung
⇧
2 Rahmen mit dem Code code
↑
a) Rahmen mit code class="box-grau"
Bemerkungen zur Formatierung:
-
Der Rahmen und der Hintergrund sind grau.
-
Da die Schriftart von
codeübernommen wird ist sie "monospace". -
Die Schrift ist mit "Fett" (bold) formatiert, weil der Code so formatiert ist, obwohl die "Box" nicht mit fett formatiert ist.
1) Ansicht des Eintrages im Stylesheet:
/* Grauer Hintergrund und Rahmen (vorne=outset)*/
.box-grau {
display:block; border:3px solid; padding:5px;
border-left-color:#CCCCCC; border-top-color:#CCCCCC;
border-right-color:#999999; border-bottom-color:#999999;
background:#EEEEEE; color:#000000;}
2) Im Quelltext steht im Textbereich:
<code class="box-grau"> Dies ist ein Code </code>
3) Im HTML-Dokument erscheint folgendes:
Dies ist ein Code
↑
b) Rahmen mitten im Satz mit code class="inlinebox-grau"
Bemerkungen zur Formatierung:
- Der Rahmen ist mitten im Satz.
1) Ansicht des Eintrages im Stylesheet:
/* Grauer Hintergrund und Rahmen (vorne=outset)*/
.inlinebox-grau {
display:block; border:3px solid; padding:5px;
border-left-color:#CCCCCC; border-top-color:#CCCCCC;
border-right-color:#999999; border-bottom-color:#999999;
background:#EEEEEE; color:#000000;}
2) Im Quelltext steht im Textbereich:
<p>
Dies ist ein
<code class="inlinebox-grau">
Text mit einem eingefügten Rahmen
</code>
mitten im Satz.
</p>
3) Im HTML-Dokument erscheint folgendes:
Dies ist ein
Text mit einem eingefügten Rahmen
mitten im Satz.
⇧
3 Rahmen mit dem Code pre
- a)
pre class="text-box" - b)
pre class="code" - c)
pre class="style" - d)
pre class="quell" - e)
pre class="php"
Block-Element:
pre
↑
a) pre class="text-box"
Bemerkungen zur Formatierung:
-
Darstellung von ausgerichtetem Text in Normalschrift.
-
Die Schrift ist "sans-serif" (und nicht wie bei "pre" standardmässig "monospace".
-
Schwarzer Rahmen mit weissem Hintergrund.
1) Im Stylesheet befindet sich folgender Eintrag:
/* Ausgerichteter Text mit schwarzem Rahmen */
pre.text-box {font-family:sans-serif;
border-style:solid;border-width:2px;padding:5px;
border-color:#000000;background:#FFFFFF;color:#000000;}
2) Im Textbereich des Quelltextes wird geschrieben:
<pre class="text-box"> Darstellung von Text in einem schwarzen Rahmen </pre>
3) Dann wird im HTML-Dokument folgendes dargestellt:
Darstellung von Text in einem schwarzen Rahmen
↑
b) pre class="code"
Bemerkungen zur Formatierung:
-
Die Schrift ist standardmässig "monospace".
-
Die 4 Rahmen-Farben werden individuell festgelegt und nicht mit "inset" oder "outset" bestimmt.
1) Im Stylesheet befindet sich folgender Eintrag:
/* Darstellung von Codes */
pre.code {
border-style:solid; border-width:3px; padding:5px;
border-left-color:#999999; border-top-color:#999999;
border-right-color:#CCCCCC; border-bottom-color:#CCCCCC;
color:#000000;background:#EEEEEE;}
2) Im Textbereich des Quelltextes wird geschrieben:
<pre class="code"> Darstellung von Codes. </pre>
3) Dann wird im HTML-Dokument folgendes dargestellt:
Darstellung von Codes.
↑
c) pre class="style"
Bemerkungen zur Formatierung:
- Schriftart "monospace"
1) Im Stylesheet befindet sich folgender Eintrag:
/* Darstellung Stylesheet */
pre.style {
border-style:inset; border-width:3px; padding:5px;
border-color:#FF9999;color:#000000;background:#FFFACD;}
2) Im Textbereich des Quelltextes wird geschrieben:
<pre class="style"> Darstellung von Text wie er im Stylesheet steht </pre>
3) Dann wird im HTML-Dokument folgendes dargestellt:
Darstellung von Text wie er im Stylesheet steht
↑
d) pre class="quell"
Bemerkungen zur Formatierung:
- Schriftart "monospace"
1) Im Stylesheet befindet sich folgender Eintrag:
/* Darstellung Quelltext */
pre.quell {
border-style:inset; border-width:3px; padding:5px;
border-color:#FF9999; background:#FAEBD7; color:#000000;}
2) Im Textbereich des Quelltextes wird geschrieben:
<pre class="quell"> Darstellung von Text wie er im Quelltext steht </pre>
3) Dann wird im HTML-Dokument folgendes dargestellt:
Darstellung von Text wie er im Quelltext steht
↑
e) pre class="php"
Bemerkungen zur Formatierung:
- Schriftart "monospace"
1) Ansicht des Eintrages im Stylesheet:
/* Darstellung PHP */
pre.php {
border-style:inset; border-width:3px; padding:5px;
border-color:#6666FF; background:#EFEFFF; color:#000000;}
2) Im Quelltext steht im Textbereich:
<pre class="php"> Darstellung der PHP-Angaben </pre>
3) Im HTML-Dokument erscheint folgendes:
Darstellung der PHP-Angaben↑