WEBDESIGN ZÜRICH PINKDOT


Drucklayout

Schriftsatz

Kleinere Schrift, Serifenschrift.
Geeignete Satzbreite und Zeilenabstand.

Farben

Farbe und Hintergrund: dunkel auf hell.

Menüs

Teile der Seite, zum Beispiel Menüs, ausblenden.

Element belegt Platz, ist aber unsichtbar:
visibility: hidden

Element wird nicht angezeigt:
display: none

Links

URL der Hyperlinks sichtbar machen:

a{
color:red;
text-decoration: none;
}

a[href]:after{
content:"[Adresse: “attr(href)"] "; /*[URL] nach dem Linktext */
}

Skip-Link:

Skip-Link mit display: none; ausblenden

Einbinden verschiedener CSS Dateien im HTML-Dokument

<link rel="stylesheet" media="screen" href="website.css">
<link rel="stylesheet" media="print, embossed" href="druck.css">
<link rel="stylesheet" media="aural" href="speaker.css">

Einbinden innerhalb einer CSS Datei

@import url(druck.css) print, embossed;
@import url(pocketcomputer.css) handheld;
@import url(normal.css) screen;

CSS2 bietet weitere Möglichkeiten Drucklayouts zu definieren

Angaben für seitenweise Ausgabe:
@page { … }

Seitengrösse:
size

Seitenränder:
margin

Seitenumbruch vor einem Element:
page-break-before

Seitenumbruch nach einem Element:
page-break-after

Aufteilung von Fliesstext auf Seiten:
orphans, widows

Alles zum Thema CSS, eine umfangreiche CSS-Referenz und Templates zur freien Verfügung findet sich neu auf: www.css-webdesign.ch