Yleisimmät CSS-ominaisuudet
Alla olevassa taulukossa näet yleisimmät CSS-ominaisuudet, joilla määritellään verkkosivuston ulkoasua.
Ominaisuus | Toiminto | Arvot | Huomioitavaa |
---|---|---|---|
TAUSTA | |||
background-color | Taustan väri | [väri] | Väri ilmoitetaan värin nimellä tai koodilla |
background-image | Taustakuva | none url (URL) |
Esim. background-image: url(tausta.jpg) |
background-position | Taustakuvan sijainti | [xpos ypos] [x% y%] |
top left center right bottom left jne. Prosentuaalisesti ilmaistuna 0% 0% on vasen ylänurkka. Käytössä ovat myös muut mittayksiköt. Esim. background-position: 10px 20px |
background-attachment | Taustakuvan vieritys | scroll fixed local initial inherit |
Ominaisuudella määritellään vieriikö taustakuva tekstin mukana vai ei. Esm. taustakuva pysyy paikallaan vaikka tekstiä vieritetään background-attachment: fixed |
background-repeat | Taustakuvan toistuminen | repeat repeat-x |
Esim. taustakuva toistuu vain vaakasuunnassa: background-repeat: repeat-x |
background | Taustan kaikki ominaisuudet samassa | ||
TEKSTI | |||
color | Tekstin väri | [väri] | Lisää väreistä |
text-align | Tekstin tasaus |
left |
|
text-decoration | Tekstin koristelu |
none |
Esim. alleviivauksen poistaminen hyperlinkistä: |
text-transform | Tekstin kirjoitusasun muutos |
none |
|
FONTTI | |||
font-family | Käytettävä kirjasin | [kirjasimen nimi] | Kirjasinvaihtoehtoja on syytä luetella useita, jolloin kirjasimeksi valikoituu ensimmäinen, joka sivuston käyttäjän tietokoneelle on asennettu. Esim. h1 {font-family: Garamond, "Times New Roman", serif} |
font-size | Kirjasimen koko |
xx-small |
Esim. pääotsikon fontiksi määritellään kaksi kertaa tekstin perusfontin koko: h1 {font-size: 2em} |
font-style | Kirjasintyyli |
normal |
Oblique ja italic ovat varsin samanlaisia, mutta italic on ”aito” kursiivi. |
font-weight | Kirjasimen korostus |
normal |
Numeraalisissa arvoissa 400 vastaa normaalia. |
font | Kirjasimen kaikki ominaisuudet samassa |
Esim. |
|
REUNUS | |||
border-style | Reunuksen tyyli |
none |
Esim. katkoviivareunus Eri reunoilla voi olla myös eri arvot, jotka määritellään yläreunasta lähtien myötäpäivään. Esim.
|
border-color | Reunuksen väri | [väri] | Tarvitsee toimiakseen aina myös border-style-ominaisuuden. |
border-width | Reunuksen leveys |
thin |
Tarvitsee toimiakseen aina myös border-style-ominaisuuden. |
border-top-width | Yläreunan leveys | Toimii samoin myös muille reunoille (right, bottom, left) ja ominaisuuksille (border-top-color jne.) | |
border-top | Yläreunan ominaisuudet samassa | Toimii samoin myös muille reunoille (right, bottom, left) ja ominaisuuksille (border-top-color jne.). Esim. border-left: solid thick |
|
border
|
Reunuksen kaikki ominaisuudet samassa |
Esim. |
|
border-collapse | Taulukon eri sisäreunojen yhteensulautus | collapse separate |
Esim. tämä taulukko olisi tyyliä |
MARGINAALI | |||
margin-top | Ylämarginaali |
auto |
Esim. margin-top: 1em |
margin-right | Oikea marginaali | auto % [mitta] |
margin-right: 15% |
margin-bottom | Alamarginaali | auto % [mitta] |
Marginaali voi olla myös negatiivinen, jolloin vie elementin osittain päällekkäin toisen elementin kanssa. Esim. |
margin-left | Vasen marginaali | auto % [mitta] |
|
margin | Kaikki marginaalit samassa | nbsp |
Esim. kaikissa reunoissa sama
TAI yläreunasta lähtien myötäpäivään
|
TÄYTE | |||
padding-top | Ylälaidan täyte | % [mitta] |
Esim. padding-top: 1em |
padding-right | Oikean laidan täyte | % [mitta] |
nbsp |
padding-bottom | Alalaidan täyte | % [mitta] |
nbsp |
padding-left | Vasemman laidan täyte | % [mitta] |
nbsp |
padding | Kaikki täytteet yhdessä | % [mitta] |
Esim. yläreunasta lähtien myötäpäivään |
LISTA | |||
list-style-type | Lista-alkion merkki | none disc circle square upper-roman lower-roman jne. |
|
list-style-image | Lista-alkion merkkinä oma kuvatiedosto | none url (URL) |
|
list-style | Kaikki listatyylit samassa |
Tausta
CSS-tyyleillä voidaan määrittää taustaväri ja taustakuva koko sivulle tai yksittäiselle elementille.
Esim. taustaväri koko sivulle
body {
background-color: #ffff00;
}
Huom! Muista, että tyylit periytyvät. Body-elementille annetut tyylit vaikuttavat myös kaikkiin sen sisällä oleviin elementteihin.
Esim. taustaväri taulukoille
table {
background-color: #ccc;
}
Taustakuvan määrityksessä tarvitaan tieto kuvatiedoston sijainnista samaan tapaan kuin kuvan lisäämisessä html-sivulle.
Esim. taustakuvan lisääminen koko sivulle - kuvatiedosto sijaitsee kuvat-nimisessä kansiossa
body {
background-image: url(kuvat/flower.gif);
}
Taustakuvalle voidaan antaa myös muita tyylimäärityksiä, kuten taustakuvan sijainti ja sen toistuminen.
Oletuksena on, että taustakuva toistuu vaaka- ja pystysuunnassa niin monta kertaa kuin se vain mahtuu. Tämä on luonnollisesti riippuvainen näytön koosta. CSS-tyyleillä tätä oletusta voidaan kuitenkin muuttaa.
Esim. taustakuva, joka toistuu vain kerran ja sijaitsee näytön oikeassa alareunassa
body {
background-image: url(kuvat/flower.gif);
background-repeat: no-repeat;
background-position: right bottom
}
Tehtävä
- Luo CSS-tiedostoon tyyli body.
- Anna tyylille taustaväriominaisuus background-color ja sille jokin arvo (ks.Väriarvot).
- Tallenna tyylitiedosto.
- Avaa html-tiedosto verkkoselaimessa ja katso, miten tyylimääritys näkyy siinä.
Lisätään verkkosivulle nyt taustakuva.
- Mene osoitteeseen http://users.jyu.fi/~tatjana/htkp315/ ja tallenna sieltä tiedosto heina.gif aiemmin luomaasi kansioon kuvat.
- Muokkaa nyt CSS-tyylitiedostoa niin, että lisäät dokumenttiin taustakuvan heina.gif.
- Tallenna ja tarkastele esikatselunäkymää.
Taustakuva toistuu sivulla nyt loputtomasti. Määritellään taustakuva nyt niin, että se toistuu vain oikeassa reunassa.
- Määritä body-tyylille sellainen ominaisuus ja arvo, jotka saavat taustakuvan toistumaan vain pystysuunnassa.
- Määritä vielä sellainen ominaisuus ja arvo, jotka saavat taustakuvan sijoittumaan oikeaan reunaan.
- Tyylitiedostossasi on nyt neljä eri ominaisuutta: background-color, background-image, background-repeat ja background-position.
Teksti
Tekstin ominaisuuksia ovat muun muassa väri, tekstin tasaus ja tekstin koristelu.
Hyperlinkkien värinä on oletusarvoisesti sininen. Kun linkkiä on klikattu, niin sen väri muuttuu violetiksi. Hyperlinkeillä on myös oletusarvoisesti alleviivaus.
Vinkki! Voit kokeilla eri ominaisuuksia käytännössä W3 Schools -sivuston Try it yourself -osioissa.
Tehtävät
1) Määritellään tekstin väri muutamalle elementille.
- Määritä body-tyylin fonttiväriksi jokin tumma sävy (esim. musta #000000 tai harmaa #666666).
- Aseta pääotsikon (h1) ja alaotsikon (h2) väriksi myös jokin tumma sävy, esimerkiksi #336699. Muista mahdollisuus tyylien ryhmittelyyn!
2) Määritellään alaotsikot isoin kirjaimin (uppercase) kirjoitetuiksi.
- Luo uusi tyyli alaotsikolle h2. Vaikka siis aiemmin määrittelit fontit yhteisesti tyyleille h1 ja h2, voit luoda tuon merkinnän lisäksi tyylin, jossa määrittelet ominaisuuksia vain alaotsikolle.
- Anna tyylille text-transform-ominaisuus ja sille arvo, joka muuttaa otsikot kokonaan isoin kirjaimin kirjoitetuiksi.
- Tarkastele lopputulosta selainnäkymässä.
3) Poistetaan hyperlinkeistä alleviivaukset ja annetaan linkeille miellyttävämpi väri, joka kuitenkin erottaa ne selvästi muusta tekstistä.
- Luo hyperlinkkejä määrittävä tyyli a ja anna sille väriksi esim. turkoosi #0099ff.
- Poista hyperlinkeistä alleviivaus text-decoration-ominaisuudella.
Nyt tyylitiedostossasi on määritelty tyylit elementeille body, h1, h2 ja a.
Fontti
Fontteja on hyvä määritellä aina useita. Ne ovat keskenään vaihtoehtoisia. Verkkosivustoa tarkastelevan käyttäjän selain valitsee listasta ensimmäisen fontin, joka käyttäjän koneelta löytyy. Viimeiseksi fonttivaihtoehdoksi tulee antaa yleisen kirjasinperheen nimi: sans-serif (päätteetön), serif (päättellinen) tai monospace (tasavälinen). Jos fontin nimessä on välilyöntejä, eli se koostuu useammasta sanasta, tulee sen ympärille laittaa lainausmerkit.
Esim.
font-family: "Times New Roman", Courier, serif;
Tehtävä
1) Määritellään tyylitiedostoon fontit.
- Anna body-tyylin fonttivaihtoehdoiksi tässä järjestyksessä: Verdana, Helvetica, Arial, serif.
Nyt myös kaikilla body-elementin sisällä olevilla elementeillä on body-tyylin mukainen fontti ja selaimen asetusten mukainen fonttikoko. Muokataan seuraavaksi otsikkotyylejä.
- Aseta pääotsikon (h1) ja toisen tason otsikon (h2) fonttivalikoimaksi: Courier New ja monospace.
2) Määritellään seuraavaksi fonttikokoja. Koska body-tyylissä ei määritelty fonttikokoa, käyttää sivusto selaimen oletusfonttikokoa. Verdana-fontti voisi kuitenkin näyttää tyylikkäämmältä hieman pienempänä.
- Anna body-elementille fonttikoko smaller. Näin fontin koko pienenee hiukan oletuskoosta.
Määritellään vielä otsikoiden fonttikoot. Kertaa ensin mittayksiköiden kirjoitussäännöt.
- Luo otsikkotyyli h1.
- Aseta h1-tyylille fonttikooksi 1,5 em ja h2-tyylille 1,2 em. Voit myös kokeilla ja määrittää sinusta sopivimmat fonttikoot. Muistathan, miten mittayksiköt merkittiin CSS-kielellä!
Huom! Kertaa tarvittaessa mittayksiköiden käyttö CSS-tyyleissä.
Reunus
Reunukset voi antaa mille tahansa elementille: kuvalle, taulukolle, tekstikappaleelle jne. Reunuksien ominaisuudet ovat viivan tyyli, väri ja paksuus.
Esim. punainen katkoviivareunus, jonka leveys on 3 px
img {
border-style: dashed;
border-color: red;
border-width; 3px;
}
Reunusten ominaisuudet voi myös "niputtaa".
img {
border: dashed red 3px;
}
Reunukset voi määritellä yhteisesti kaikille reunoille tai vain osalle niistä.
img {
border-bottom: dashed red 3px:
border-left: dashed red 3px;
}
Reunuksia koskevat ominaisuudet löytyvät kootusti myös W3 Schools-sivustolta, jossa on myös Try it yourself -osioita, joilla voit testata koodin toimintaa: http://www.w3schools.com/css/css_table.asp.
Tehtävä
1) Lisää kuvaelementille img valkoiset reunukset.
2) Lisää taulukon elementeille td, th ja table ohuet reunat, joiden värinä on jokin tumma sävy, esim. tummanharmaa (#666). Muista mahdollisuus tyylien ryhmittelyyn!
Taulukon ja sen solujen reunukset näyttäytyvät nyt erillisinä viivoina. Yhdistä ne border-collapse-ominaisuuden avulla. Huom! Tätä ominaisuutta ei voida ryhmitellä toisten kanssa.
Taulukkoelementeillä td, th ja table on nyt neljä yhteistä reunuksiin liittyvää ominaisuutta.
3) Määritä vielä taulukon otsikkosoluille muusta taulukosta poikkeava taustaväri. Tätä varten pitää luoda oma tyyli th taulukon otsikkosoluille.
Marginaali ja täyte
Marginaali (margin) määrittää elementin välimatkan sitä ympäröivistä elementeistä tai selainikkunan reunoista. Täyte (padding) puolestaan määrittää elementin sisällön ja reunuksen välisen etäisyyden.
Esim. kuvalla 5 % marginaali joka puolellaan
img {
margin: 5%;
}
Sekä marginaali että täyte voidaan määrittää joko kaille reunoille kerralla tai vain osalle. Joka reunalle voidaan myös määrittää eri kokoinen marginaali tai täyte.
Esim. dokumentilla täytettä yläreunassa, sivuilla ja alareunassa
body {
padding-top:1%;
padding-right:2%;
padding-bottom:5%;
padding-left:2%;
}
Sama voidaan määritellä myös lyhyemmin:
body {
padding: 1% 2% 5% 2%
}
Tehtävä
1) Marginaalin ja täytteen erot selviävät parhaiten kokeilemalla.
- Anna body-tyylille marginaaliksi 2 %. Tallenna ja tarkastele html-tiedostoa selaimessa.
- Määritä samalle body-tyylille täytettä 2 %. Tallenna ja tarkastele html-tiedostoa selaimessa, niin huomaat vaikutuksen.
2) Tarkastele nyt virusinfo-tiedostoa. Alaotsikot voisivat olla hieman väljemmin niiden yläpuolella sijaitseviin tekstikappaleisiin nähden.
- Anna alaotsikkotyylille h2 ylämarginaalin arvoksi 2 em eli 2 oletusfontin korkeutta.
3) Samalla sivulla oleva taulukko näyttää ikävän ahtaalta. Tämä voidaan korjata muokkaamalla sen solujen täyteominaisuutta (padding).
- Määritä taulukon solujen täytteeksi 0,5 em.
Kommentit
Myös CSS-määrityksissä on mahdollista tehdä kommentteja koodin joukkoon. Tämä tapahtuu erottamalla kommenttiteksti tyylimäärityksistä /*-aloitusmerkinnällä ja */-lopetusmerkinnällä.
/* Tämä on kommentti. */
Tyylit on hyvä järjestää dokumentissa jollakin itselle loogisella tavalla, esimerkiksi otsikkotyylit peräkkäin, tekstikappale-elementtejä koskevat tyylit peräkkäin jne.
Tehtävä
Lisää tyylitiedostoon kommenttimerkinnöillä väliotsikoita, jotka kertovat, mihin eri tyylit vaikuttavat (esim. Otsikot, Taulukot jne.).
Materiaalin on laatinut Tanja Välisalo.