StyleAssistant |
| Startseite |
 |
| Screenshot |
|
| Kurzanleitung |
|
| Download |
|
| Kurse & Infos |
|
| >Tipps & Tricks< |
|
| Unterstützer |
|
| TMXtensions |
|
| ?Freeware! |
|
| About TM |
|
Stand: 07.12.2002 |
Tipps & Tricks – Tipp 39
|
 |
 |
 |
|
39.
CSS für Bildschirm und Ausdruck – MEDIA-Types screen bzw. print (07.10.2000)
Separate Style-Sheet-Definitionen ermöglichen unterschiedliche Formatierungen bei der Bildschirm- bzw. Druckerausgabe von Web-Dokumenten.
Dazu dient die Angabe des MEDIA-Types im <STYLE>-Tag oder in der <LINK ...>-Deklaration bei Verwendung von externen CSS-Dateien. Im folgenden
Beispiel 39 werden jeweils zwei Klassen (test1 und test2) definiert, die Absätzen zugewiesen werden.
<STYLE TYPE="text/css" MEDIA="screen">
<!--
.test1
{
Color: blue;
Background-Color: #FFFFCC;
}
.test2
{
Color: white;
Background-Color: #EE0000;
Font-Family: Verdana, Arial, Helvetica, Sans-Serif;
Font-Size: 100%;
Margin: 2em;
}
-->
</STYLE>
<STYLE TYPE="text/css" MEDIA="print">
<!--
.test1
{
Display: none;
}
.test2
{
Color: black;
Background-Color: white;
Font-Family: Verdana, Arial, Helvetica, Sans-Serif;
Font-Size: 20pt;
Margin: 3cm;
}
-->
</STYLE>
Anwendung im Markup:
<P CLASS="test1">
Dieser Absatz sollte beim Drucken nicht sichtbar sein ...
</P>
<P CLASS="test2">
Dieser Absatz sollte am Bildschirm in der Standardgröße,
auf dem Drucker in 20-Punkt und 3 cm Rändern erscheinen ...
</P>
Der erste Absatz sollte am Bildschirm sichtbar sein, jedoch nicht auf dem Papier erscheinen (Display: none im print-CSS). Beim zweiten
Absatz wurden unterschiedliche Schriftgrößen bei der Anzeige bzw. beim Ausdruck festgelegt. Darüber hinaus soll der Absatz beim Ausdruck
Ränder von 3 cm aufweisen (Margin: 3cm im print-CSS). IE 5.x und Netscape 6 / Mozilla sind in der Lage, diese Formatierungen umzusetzen. Die im IE 5.5
enthaltene Druckvorschau (Menüpunkt Datei | Seitenansicht...) eignet sich zum Testen, ohne viel Papier zu verbrauchen.
 |
|
 |
|
 |