Tyylitiedoston kokonaisrakenne
Ohjeiden yhdistäminen
Tyylitiedostoon kirjoitettuja ohjeita voidaan yhdistää eri tavoin.
...
| No Format |
|---|
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:
No Format /* Tämä teksti on kommentti */
...
| No Format |
|---|
<!-- 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
...
- 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-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
...
| 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ä
...
| No Format |
|---|
#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.
...
| 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 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.
...
- 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.
...