CSS määrityksiä

Taustaväri tai taustakuva

Taustaväriä/-kuvaa käytetään yleisimmin body -komennon yhteydessä

background-color Määrittää taustan värin. Väri voidaan ilmaista joko värin nimellä (esim. red) tai heksadesinaalina (esim. #CCCCCC) tai RGB-väreinä (esim. rgb(128,128,128))
background-image Taustakuva. Määritys annetaan muodossa background-image: url("kuva.jpg");
background-position Taustakuvan sijainti. Voi olla esim. left top, left center, left bottom, right top, right center, right bottom, center top, center center tai center bottom. Lisäksi kuvan paikka voidaan antaa koordinaatteina joko prosentteina tai pikseleinä, esim. 50% 50% tai 100px 100px.
background-size Taustakuvan koko. Voidaan lähinnä pienentää kuvaa (laatu kärsii jos suurennetaan). Muista mittasuhteet että kuva ei veny. Annetaan yleensä pikseleissä esim. 240px 360 px. Voidaan antaa myös prosenteissa, mutta kuvan mahdollinen venyminen pitää huomioida.
background-repeat Pientä (tai matalaa/korkeaa) taustakuvaa voidaan haluttaessa myös toistaa eri tavoin background-repeat määritteellä. Mahdolliset arvot ovat no-repeat, jolloin taustakuvaa ei toisteta, repeat, jolloin toistetaan sekä vaaka- että pystysuunnassa. Tämä on myös oletusarvo. Lisäksi voidaan antaa repeat-x, jolloin kuvaa toistetaan vain vaakasuunnassa ja repeat-y, jolloin vastaavasti pystysuunnassa.

Jos halutaan koko sivun täyttävä taustakuva, joka skaalautuu ikkunan mukana voidaan se tehdä seuraavalla koodilla.

background: url(kuva.jpg) no-repeat center fixed;
background-size: cover;

Luettelomerkit

Luettelomerkin tyyliä voidaan muuttaa list-style-type määrityksellä (annetaan <ul> komennolle). Vaihtoehdot ovat seuraavat:

list-style-type:none Ei luettelomerkkiä
list-style-type:disc; Luettelomerkkinä pallo
  • Esimerkki
list-style-type:circle Luettelomerkkinä ympyrä (ei täyttöä)
  • Esimerkki
list-style-type:square Luettelomerkkinä neliö
  • Esimerkki
list-style-type:decimal Numerointi (1,2,3)
  • Esimerkki
list-style-type:decimal-leading-zero Numerointi etunollalla (01,02,03)
  • Esimerkki
list-style-type:lower-alpha; Pienaakkoset (a,b,c)
  • Esimerkki
list-style-type:upper-alpha Suuraakkoset
  • Esimerkki
list-style-type:lower-roman

Pienet roomalaiset aakkoset (i,ii,iii,iv)

  • Esimerkki
list-style-type:upper-roman Suuret roomalaiset aakkoset (I,II,III,IV)
  • Esimerkki
list-style-image:url('kuva.jpg') Luettelomerkkinä kuva tiedostosta
  • Esimerkki

Reunukset / Border

Lähes kaikille elementeille voidaan tehdä reunaviiva. Alla on esitelty ylesimpiä reunaviivaan liittyviä komentoja (p -tagille) näyttämällä ensin komennot ja sitten tulos:

<p style="border-width:thin; border-style:solid;">Tässä reunuksen paksuus on thin.</p>
<p style="border-width:medium; border-style:solid;">Tässä reunuksen paksuus on medium.</p>
<p style="border-width:thick; border-style:solid;">Tässä reunuksen paksuus on thick.</p>
<p style="border-width:10px; border-style:solid;">Tässäreunuksen paksuus on 10px.</p>

Tässä reunuksen paksuus on thin.

Tässä reunuksen paksuus on medium.

Tässä reunuksen paksuus on thick.

Tässäreunuksen paksuus on 8 px.

Reunuksen tyyli

<p style="border-style:dotted;">Tässä reunan tyylinä dotted.</p>
<p style="border-style:dashed;">Tässä reunan tyylinä dashed.</p>
<p style="border-style:solid;">Tässä reunan tyylinä solid.</p>
<p style="border-style:double;">Tässä reunan tyylinä double.</p>
<p style="border-style:groove;">Tässä reunan tyylinä groove.</p>
<p style="border-style:ridge;">Tässä reunan tyylinä ridge.</p>
<p style="border-style:inset;">Tässä reunan tyylinä inset.</p>
<p style="border-style:outset;">Tässä reunan tyylinä outset.</p>

Tässä reunan tyylinä dotted.

Tässä reunan tyylinä dashed.

Tässä reunan tyylinä solid.

Tässä reunan tyylinä double.

Tässä reunan tyylinä groove.

Tässä reunan tyylinä ridge.

Tässä reunan tyylinä inset.

Tässä reunan tyylinä outset.

Määritykset voidaan kirjoittaa myös jokaiselle reunuksen sivulle erikseen. Silloin ensin annetaan yläreuna, sitten oikea, ala- ja vasenreuna. Esim: border-style:dotted solid double dashed. Reunaviivan värin voit määrittää border-color:väri -komennolla. Myös reunaviivan värin voi määrittää jokaiselle sivulle erikseen samalla periaatteella (ylä oikea ala vasen).

Kuvakehykset

CSS:ä voidaan käyttää myös kuvakehyksien kanssa. Alla muutama esimerkki koodeineen:

Kuntola
<img style="border-radius:25px"src="images/kuntola.jpg" width="400" height="256" alt="Kuntola">

Eli border-radius määrityksellä voidaan kuvan kulmat pyöristää.

Kuntola
<img style="border: 1px solid #ddd; border-radius: 5px;
padding: 5px;" src="images/kuntola.jpg" width="400" height="256" alt="Kuntola">

Tässä kuvalle tehdään reunaviiva 1 pikselin yhtenäisellä harmaalla viivalla. Reunaviivan kulmia pyöristetään vähän ja padding arvolla se viedään kuvan ulkopuolelle. Jos määritys tehtäisiin img -tagiin yleiseen css tiedostoon, tulisi ko. kehys automaattisesti kaikiin kuviin.

Yksi tapa tehdä responsiiviset kuvat (pienenevät näytön kokoon jos kuva suurempi kuin näyttö) ilman että kuvan koko suurenee yli alkuperäisen koon isoilla näytöillä saadaa seuraavasti:

img {
    max-width: 100%;
    height: auto;
}

Yllä kuvatagille (img) asetetaan maksimileveys 100%, eli se ei veny yli alkuperäisen koon, mutta se saa siis pienentyä. Kun korkeus asetetaan automaattiseksi säilyy kuvan mittasuhteet vaikka kuva pienenee.