Tyylitiedoston kokonaisrakenne

Ohjeiden yhdistäminen

Tyylitiedostoon kirjoitettuja ohjeita voidaan yhdistää eri tavoin.

Esimerkiksi

p {
  margin-top:15px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:10px;
  }

voidaan kirjoittaa muotoon

p {
  margin:15px 10px 15px 10px;
  }

tai vielä lyhyemmin

p {
  margin:15px 10px;
  }

Kommentit

• Tyyliohjeeseen voi (ja kannattaa) lisätä kommentteja, jotka helpottavat esimerkiksi eri elementtien muistamista
• Kommentilla ei ole mitään merkitystä selaimelle, pelkästään tyyliohjetta lukevalle ihmiselle
• Tyyliohjeeseen voidaan liittää kommentteja seuraavalla tavalla:

  /* Tämä teksti on kommentti */
  

Huom! HTML-dokumenttiin kommentit liitetään seuraavalla tavalla:

<!-- Tämä teksti on kommentti -->

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

Esimerkiksi

<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;}
}

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

#navi {display:none;}

Linkkejä

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

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_overflow

Vierityspalkin luominen elementille tapahtuu seuraavasti:

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 värien 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/
• Tällä hetkellä IE tukee värejä ie 5.5 versiosta alkaen.

Vierityspalkilla on kolme osaa

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

Ominaisuudet

Arvoksi asetetaan jokin väri.

• scrollbar-base-color: vierityslaatikko, ura ja nuolet
• scrollbar-face-color: vierityslaatikko ja nuolet
• scrollbar-arrow-color: vierityslaatikon nuolien väri
• scrollbar-track-color: uran väri

• scrollbar-3dlight-color: vierityslaatikon ja vieritysnuolien yläreunan ja vasemman reunan väri
• scrollbar-darkshadow-color:"varjostus", vierityslaatikon ja nuolien alareunan sekä oikean reunan väri
• scrollbar-highlight-color: vierityslaatikon yläreunan ja vasemman reunan väri
• scrollbar-shadow-color: vierityslaatikon alareuna ja oikea reuna

Esimerkiksi:

html {
     scrollbar-base-color:#333;
     scrollbar-track-color:#777;
     scrollbar-darkshadow-color:#000;
     }

• Jos scrollbar-arvot asetetaan juurielementille (html), niiden arvot periytyvät myös sivun sisäisiin vierityspalkkeihin
• Niille voidaan kuitenkin asettaa oma ulkoasu suoraan elementin deklaraatioon