Ko smo skrili vse elemente, se lotimo še barv. Ker že nekaj časa poznamo barvne tiskalnike lahko barve pustimo ali pa jih spremenimo. Sam jih raje spremenim. Oprijel sem se dolgočasne klasike, in sicer črno na belo (bela za ozadje in črna za tekst). Ne pozabimo odstraniti še slik, ki jih uporabljamo za ozadja.

1. body {
2. background-color: #fff;
3. color: #000;
4. }

Pametno je razmisliti tudi o spremembi enote mere, za velikost pisave, in sicer v pt (pike), ker je to za tiskanje bolj primerno.

Podobno je s širino in višino. Najboljše se obnese, če odstranimo vse fiksne mere, ki smo jih nastavili zaradi prikazovanja na ekranu (razen v primeru, ko se vsebina lahko razširi čez cel ekran). Ko smo odstranli širino bo pri tiskanju za to poskrbel tiskalnik s svojimi nastavitvami. Z uporabo margin pa lahko spremenimo tudi širino in višino papirja:

1. body {
2. margin: 20pt 30pt;
3. background-color: #fff;
4. color: #000;
5. font-size: 12pt;
6. }

Zdaj pa še nekaj besed o povezavah. Ker povezave na papirju nimajo enake funkcije kot v spletnem brskalniku jih lahko preprosto zlijemo s preostalim tekstom ali pa jih pustimo samo podčrtane. Za vse tiste, ki poznajo CSS-ju bolj prijazne spletne brskalnike (FireFox, Opera, Safari, ...) kot je IE, pa še en bombonček. Z nasledjimi pravili povezavam dodamo še URL na katerega kažejo:

1. a:link, a:visited {
2. color: #000;
3. text-decoration: underline;
4. }
6. a:link:after, a:visited:after {
7. font-size: 10pt;
8. content: " [" attr(href) "]";
9. font-size: 10pt;
10. }
12. a[href^="/"]:after {
13. content: " [http://www.domena.com" attr(href) "]";
14. }

Če se povezava začne z / (ponavadi uporabljamo za notranje strani) se doda še domena, ki smo jo sami izbrali (www.domena.com). Vendar še enkrat opozarjam, da bo IE (trenutno 6.0) vsa ta pravila ignoriral in povezave bodo brez URL naslova.

Za konec nam ostane samo še, da našo novo CSS datoteko vključimo v spletno stran za katero želimo, da je tiskalniku prijazna. Pri tem ne smemo pozabiti, da moramo CSS datoteko, katero uporabljamo za zaslon, nastaviti na screen media tip.

1. <link rel="stylesheet" type="text/css" href="zaslon.css" media="screen" />
3. <link rel="stylesheet" type="text/css" href="tiskalnik.css" media="print" />

Če ste se uspešno prebili do konca, bi moralo to, kar sem napisal, zadostovati za dolgočasen izgled spletne strani na papirju.

Komentarji