Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0

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ä:

Tulostusta varten suunnitellun CSS-tiedoston liittäminen sivuun

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

Esimerkiksi

No Format

<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

No Format

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

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

Paperitulostuksen asetuksia

  • Kätevää voi olla esimerkiksi fonttilajin muutos, linkkien muotoilujen poistaminen sekä navigaation poistaminen tulostusnäkymästä
  • Navigaatio (tai muut elementit) poistetaan näkymästä display-elementillä

Esimerkiksi

No Format

#navi {display:none;}

Linkkejä

Mediatyypit: http://www.w3schools.com/CSS/css_mediatypes.aspImage Removed

Vierityspalkin lisääminen ja sen ulkoasun muuttaminen

Kun elementille on asetettu tietty leveys ja korkeus, sen sisällön "ylivuoto" (overflow) voidaan käsitellä eri tavoin.

Esimerkki: http://www.w3schools.com/Css/tryit.asp?filename=trycss_overflowImage Removed

Vierityspalkin luominen elementille tapahtuu seuraavasti:

No Format

p 
{
width:100px;
height:100px;
overflow: scroll;
}

Muut overflow-elementille sallitut määritteet ovat:

visible : oletus, jossa ulkopuolelle jäävä sisältö "valuu" elementin ulkopuolelle
hidden : elementin ulkopuolelle jäävä sisältö ei näy käyttäjälle
scroll : elementin ulkopuolelle jäävä sisältö ei näy käyttäjälle, mutta käyttäjä voi vierittää sen esiin vierityspalkilla
auto : selain lisää vierityspalkin silloin, kun sisältö ei mahdu elementin sisäpuolelle.

Vierityspalkin muotoilu

  • Vierityspalkin värejä voi muotoilla tyylitiedostoilla, mutta ominaisuudet eivät ole standardeja vielä CSS2.0 -versiossa. Ne ovat tulossa CSS3-luonnokseen: http://www.css3.com/Image Removed
  • Tällä hetkellä IE tukee värejä ie 5.5 versiosta alkaen.

Vierityspalkilla on kolme osaa

  • nuolet (arrows): vierityspalkin ylä- ja alaosassa olevat symbolit
  • vierityslaatikko (scrollbar), jota voi hiirellä liikuttaa edestakaisin
  • ura (track): nuolien välissä oleva osa vierityspalkkia