Sivuston kokonaisuuden luominen

Lisää CSS:n sovelluksia

Kaksoisjulkaiseminen

• CSS:ssä on erityinen mediakäsite, joka mahdollistaa sivun erilaisen esittämisen eri tilanteissa (kuvaruutu, mobiili, paperi, dia, tv)
• Toistaiseksi tärkein ja parhaiten toimiva sovellus on ns. tulostusnäkymä, jossa esitetään dokumentti paperilla tai muussa sivujakoisessa mediassa.
• Toistaiseksi paperitulostuksen muotoilu on suhteellisen kehittymätöntä: sivujaon estäminen ei onnistu, mutta sivujaon aikaansaaminen kylläkin

• Käytännössä tarkoitetaan erillisen tulostusta varten suunnitellun CSS-tiedoston tekemistä
• tiedostosta voidaan jättää esimerkiksi navigaatio ja linkkien alleviivaus pois, jolloin paperitulostus näyttää siistimmältä
• samoin fontti voidaan muotoilla paperille sopivammaksi

Esimerkkejä:

• tämän sivun tulostusnäkymä (Firefoxissa Tiedosto -> Tulosta -> Esikatselu)
• http://mlab.taik.fi/

Tulostusta varten suunnitellun CSS-tiedoston liittäminen sivuun

Tulostusta varten tehtävät asetukset kirjoitetaan omaan CSS-tiedostoon, joka linkitetään sivulle LINK-elementillä:

<link rel="stylesheet" type="text/css" href="tulostustyyli.css" media="print" >

• LINK-elementissä oleva media-määrite aiheuttaa sen, että tyyliohje vaikuttaa vain paperitulostuksessa
• paperitulostukseen suunnitellussa CSS-tiedostossa riittää, että määritellään vain tulostukseen vaikuttavat erityistekijät. Muut ulkoasumääritykset haetaan perustiedostosta.

Sivukohtaisen tyyliohjeen muokkaus tulostusta varten

• Jos tulostusta koskevia tyylisääntöjä on vähän, kätevintä on kirjoittaa ne osaksi sivun yleistä tyyliohjetta
• Se tapahtuu erityisellä @media-rajoituksella

Esimerkiksi

body {font-family: Arial, Helvetica, sans-serif}

@media print  {
body {font-family:Myriad, Times, serif;}
a {text-decoration:underline;}
}

Linkkejä

Mediatyypit: http://www.w3schools.com/CSS/css_mediatypes.asp

overflow, vierityspalkki, iframe