9 < 10 Webdesign | start | Webdesign 10 > 11
CSS/Media Queries | Styelsheets für Screen und Print
In Abhängigkeit vom Ausgabemedium und von der Verwendung soll der Inhalt differenziert dargestellt werden. Im Ausdruck soll zum Beispiel eine Überschrift und ein Hintergrund nicht farbig sondern s/w dargestellt werden. Das Menü einer Internetseite soll ausgeblendet werden.
Eine Box im Ausdruck mit schwarzer Serifenschrift ohne Hintergrund und Rahmen
Aufgabe:
Vorgabe: Eine Box soll im Browser mit farbiger Schrift, farbigem Hintergrund und Rahmen dargestellt werden. Beim Ausdruck soll die Farbe durch Grautöne ersetzt werden. Der Hintergrund soll weiß werden.
- Erstellen Sie eine Box, die der Vorgabe entspricht.
- Gestalten Sie die Box durch eine externe CSS-Datei oder CSS-Befehle im Stylebereich so, dass diese beim Ausdruck ohne Farbe dargestellt wird.
Box erstellen mit farbiger Schrift, Hintergrundfarbe und Rahmen / Media-Query print
<style>
@media all {
div {border: 1px solid red; padding: 4px; background:yellow; color:blue; border-radius: 8px}
}
@media print {
div {border: solid 1px #333; background:#fff; color: #333;}
}
</style>
<div>
<p>Zwei Seelen wohnen, ach! in meiner Brust, <br />
Die eine will sich von der andern trennen; <br />
Die eine hält, in derber Liebeslust, <br />
Sich an die Welt mit klammernden Organen; <br />
Die andere hebt gewaltsam sich vom Dunst* <br />
Zu den Gefilden hoher Ahnen.</p>
<p>Faust, in Goethes Faust I</p>
<p>*Dunst=Staub</p>
</div>
johannes.bucka@t-online.de. Diese Anleitung steht unter Creative Commons Lizenz: Namensnennung | Keine kommerzielle Nutzung | Weitergabe unter gleichen Bedingungen (http://de.creativecommons.org/).