Siirry sisältöön. | Siirry navigointiin

Jyväskylän yliopiston Koppa

HUOM! Kopan käyttö päättyy 31.7.2024! Lue lisää.


Navigation

Yleisimmät CSS-ominaisuudet

tekijä: Tanja Tuulikki Välisalo Viimeisin muutos maanantai 24. marraskuuta 2014, 17.25

Alla olevassa taulukossa näet yleisimmät CSS-ominaisuudet, joilla määritellään verkkosivuston ulkoasua.

OminaisuusToimintoArvotHuomioitavaa
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
repeat-y
no-repeat

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
right
center
justify

text-decoration Tekstin koristelu

none
underline
overline
line-through
blink

Esim. alleviivauksen poistaminen hyperlinkistä:
a {text-decoration:none}

text-transform Tekstin kirjoitusasun muutos

none
capitalize
uppercase
lowercase

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
x-small
small
medium
large
x-large
xx-large
smaller
larger
[%]
[mitta]

Esim. pääotsikon fontiksi määritellään kaksi kertaa tekstin perusfontin koko:

h1 {font-size: 2em}

font-style Kirjasintyyli

normal
italic
oblique

Oblique ja italic ovat varsin samanlaisia, mutta italic on ”aito” kursiivi.
font-weight Kirjasimen korostus

normal
bold
bolder
lighter
[arvot: 100, 200, …, 900)

Numeraalisissa arvoissa 400 vastaa normaalia.
font Kirjasimen kaikki ominaisuudet samassa

Esim.
font: Arial, Verdana, sans-serif 12pt  bold

REUNUS
border-style Reunuksen tyyli

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

Esim. katkoviivareunus
border-style: dashed

Eri reunoilla voi olla myös eri arvot, jotka määritellään yläreunasta lähtien myötäpäivään.

Esim.
border-style: none none solid dotted

 

border-color Reunuksen väri [väri] Tarvitsee toimiakseen aina myös border-style-ominaisuuden.
border-width Reunuksen leveys

thin
medium
thick
[mitta]

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: blue ridge thin

border-collapse Taulukon eri sisäreunojen yhteensulautus collapse
separate

Esim. tämä taulukko olisi tyyliä
border-collapse: collapse

MARGINAALI
margin-top Ylämarginaali

auto
%
[mitta]

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-bottom: -10px

margin-left Vasen marginaali auto
%
[mitta]
margin Kaikki marginaalit samassa nbsp

Esim. kaikissa reunoissa sama
margin: 5 %

 

TAI yläreunasta lähtien myötäpäivään
margin: 10 % 10 % 10px 10 %

 

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
padding: 5% 10% 15% 10%

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.