Suntuubi-palvelussa käytetään evästeitä. Palvelua käyttämällä hyväksyt evästeiden käytön. Lue lisää. OK

Css-opas

Päätinpä rakentaa tähän pienimuotoisen Css-oppaan, jolla asiasta kiinnostuneet voivat päästä alkuun. Pyrin tekemään oppaasta mahdollisimman selkokielisen, mutta jos jotain jää epäselväksi, niin kysykää viekussa tai chatissa lisäselvennystä. Rakennan kyllä oppaan sillä oletuksella, että lukija on täysin aloittelija, mutta itselle päivänselvien asioiden selittäminen toiselle ymmärrettävästi voi välillä olla vähän hankalaa, joten kysymykset ovat todellakin tervetulleita.

Keskityn tässä oppaassa siihen, miten Css:ää käytetään Suntuubissa, ja siksi olisi hyvä, jos sinulla on samalla auki oma sivustosi, jossa voit testata koodien tekemistä. Koodausta ei nimittäin pelkällä lukemisella opi, vaan nimenomaan tekemällä.

Huom. Suntuubissa on eräs erittäin rasittava ominaisuus Css-koodien suhteen. Kun teet päivityksiä koodiin, ne eivät tule aina heti näkyviin, sillä selaimesi käyttää välimuistiin tallentunutta vanhempaa versiota, eikä hae uutta palvelimelta. Siksi välillä täytyy asetuksista tyhjentää välimuisti, jotta koodi päivittyy.

Sisällys

 

Mikä ihmeen Css? - Css-kielen taustalla

Css on muotoilukieli, jolla voidaan muokata verkkosivun elementtien sijaintia ja muotoilua (ulkonäköä). Css:n ymmärtämiseksi täytyy hieman tietää verkkosivujen rakenteesta, sillä Css:llä muokatataan tätä rakennetta.

Verkkosivut tehdään HTML-nimisellä kielellä. Esimerkiksi tämän sivun HTML-koodin näet, kun painat hiiren oikeaa näppäintä ja valitset avautuvasta listasta kohdan "Näytä sivun lähdekoodi". Eteesi aukeaa aikamoiselta siansaksalta näyttävä tekstimuotoinen esitys tämän sivun HTML-koodista. HTML:n rakenne on silti oikeastaan aika yksinkertainen. Se koostuu elementeistä, joita ilmastaan tageilla, ja joka elementtiin voidaan liittää attribuutteja ja attribuuteille arvoja. Älä vielä luovuta, jos meni yli hilseen. Havainnollistetaan asiaa seuraavaksi.

Elementtejä voisi verrata lappuihin, jotka erottelevat ja jäsentävät verkkosivun osia tyyliin "tämä on otsikko, tämä on kappale, tämä on taulukko jne...". Monet teistä ovat varmasti nähneet esimerkiksi otsikko 1:n HTML esityksen:

<h1>Otsikko 1</h1>

Tuossa on yksinkertainen otsikkoelementti, jolla on aloitustagi <h1> ja lopetustagi </h1>. Tageilla tarkoitetaan tuota merkintää, jolla rajataan elementti. Elementin sisälle eli tagien väliin tulee yleensä tekstiä, joka esitetään sivuilla; tagit toimivat siis ohjeina selaimelle siitä, miten ja millaisena elementtiä ja siihen kuuluvaa sisältöä tulee käsitellä. Elementti voi myös olla tyhjä, kuten <img> elementti eli kuvaelementti (siitä on esimerkki alempana). Tyhjä elementti ei siis tarvitse lopetustagia, koska sillä ei ole tekstisisältöä, joka pitäisi esittää sivuilla.

Elementtejä on HTML:ssä monenlaisia, otsikkojen lisäksi esimerkiksi kuva-elementit <img>, kappale-elementit <p>, taulukkoelementit <table> ja lohkoelementit <div>. Elementit eivät missään nimessä ole sellaisia, joita pitäisi opetella ulkoa joltain listalta, vaan jos joskus päädytte rakentamaan verkkosivuja, opitte ne kyllä siinä tehdessä. Tämän oppaan kannalta on ainoastaan hyvä ymmärtää, mitä sanalla 'elementti' tarkoitetaan, sillä näitä elementtejä muokataan Css:llä ja tulen käyttämään tätä sanaa usein jatkossa.

Attribuuteilla tarkoitetaan määritteitä, joilla annetaan tietoa elementistä tai muokataan elementtiä. Esimerkiksi seuraavalla kuvaelementillä <img> on attribuutti src, jonka arvo kertoo kuvan sijainnin:

<img src="www.suntuubi.com/datafiles/userfiles/Image/powered8.gif" />

Eli attribuutit ja arvot ovat määritepareja, joissa attribuutti kertoo sen ominaisuuden nimen, joka elementille annetaan, ja arvo kertoo tämän ominaisuuden arvon. Attribuutit ja arvot esiintyvät aina yhdessä ja esitysmuoto on seuraava: attribuutti="arvo". Tämä kirjoitetaan aina elementin tagin sisään, esimerkiksi seuraavassa esimerkissä annan kappale-elementille <p> attribuutin class.

<p class="kappaleet">Tässä on kappale-elementti, jolla on attribuuttina
class ja sen arvona sana kappaleet</p>

Attribuuttejakin löytyy HTML:stä monenlaisia, eikä niitäkään tarvitse opetella ulkoa mistään listasta. Tässäkin pointtina on enemmänkin ymmärtää, mitä attribuutilla tarkoitetaan (eli ominaisuutta, joka liitetään elementtiin). Tämän oppaan kannalta pitää tietää vain seuraavat attribuutit: class, id ja style.

Class-attribuutilla määritetään, mihin luokkaan elementti kuuluu eli sillä voidaan ryhmittää elementtejä yhdeksi ryhmäksi, mistä on hyötyä, jos halutaan esimerkiksi kohdistaa Css:llä muotoilu vain tiettyyn luokkaan kuuluviin elementteihin. Tätä tarkennan Css:n rakenne-kohdassa.

Id-attribuutti yksilöi elementin samalla tavalla kuin henkilöllisyystodistus (englanniksi lyhennettynä ID) yksilöi henkilön. Tästäkin on hyötyä, jos halutaan esimerkiksi muotoilla Css:llä vain yhtä elementtiä erilaiseksi. Tätä tarkennan myös Css:n rakenne kohdassa.

Seka id- että class-attribuutin arvoksi voit kirjoittaa ihan mitä haluat, kunhan et käytä erikoismerkkejä tai ääkkösiä. Huomio, että kahdella elementillä ei voi olla samaa arvoa id-attribuutissa, kuten kahdella henkilöllä ei voi olla samaa henkilötunnusta! Class-attribuutissa tietenkin voi olla sama arvo, koska sillä luokitellaan elementtejä yhteen samalla tavalla kuin koulussa luokitellaan oppilaat kuuluvaksi esimerkiksi 5A-luokkaan.

Style-attribuutti nimensä mukaisesti määrittää elementin tyylin. Sen arvoksi tulee siis Css-koodia, esimerkiksi seuraavassa esimerkissä määritellään otsikko neloselle <h4> fontin kooksi 13px, fontin väriksi punainen ja otsikon reunaksi punainen viiva:

<h4 style="font-size: 13px; color: red; border: 1px solid red;">Tässä 
on muotoiltu nelostason otsikko</h4> 

Lopputulos: 

Tässä on muotoiltu nelostason otsikko

Tämä on silti erittäin vaivalloinen tapa muokata verkkosivua Css:llä, koska määrittelyt pitäisi laittaa joka ikiseen elementtiin erikseen. Siksi Css kirjoitetaan omaan erilliseen tiedostoon, jossa muotoilut laitetaan koskemaan kaikkia tiettyjä elementtejä samaan aikaan. Tämä tiedosto sitten liitetään jokaiseen sivuston HTML-sivuun, jotta selain löytää sen ja saa muotoilut käyttöönsä.

Suntuubissa meidän ei tarvitse huolehtia tästä liittämisestä, vaan Suntuubi hoitaa sen. Meidän täytyy ainoastaan huolehtia siitä, että Suntuubi tietää meidän haluavan tehdä omia muotoiluja erilliseen tiedostoon. Siksi seuraavaksi käymmekin asetuksissa laittamassa muokattujen tyylitiedostojen olemassaolon tarkistuksen päälle.
Tee siis näin:

Mene sivuillasi yleiset asetukset -> ulkoasu -> aivan viimeisenä on kohta "Tarkistetaanko muokattujen tyylitiedostojen olemassaoloa?" -> valitse kyllä -> paina hyväksy.

Nyt kun menet grafiikka -> skrollaa alas -> Css-tyylien lisäys, niin olet saapunut erilliseen Css-tiedostoon, johon alemme rakentamaan omaa Css-koodiamme. Olisi hyvä, jos poistaisit sieltä jo mahdollisesti löytyvän joltakin sivulta kopioidun koodin kokonaan. Muista myös, että kun kirjoitat omaa koodiasi, pitää painaa alhaalta päivitä, jotta koodi tulee sivuilla käyttöön.
 

Css:n rakenne

Kaikki, jotka ovat kopioineet ulkan jostakin, ovat varmasti hieman nähneet, miltä Css-koodit näyttävät. Otanpa tähän esimerkiksi Pegasos-ulkkani Css-koodin hieman muokattuna ja lyhennettynä:

/* css by lilian */
a {
  color: #205A13;
}
a:hover {
  color: #205A13;
  text-shadow: 1px 1px 1px #205A13;
  text-decoration: line-through;
}
h1 {
  font-family: Montez;
  font-size: 45px;
  color: #CCD7DA;
  text-align: center;
  margin: 8px 0px 8px 0px;
  text-shadow: 1px 0px 0px #1D2B4C;
  font-weight: normal;
}
h2 {
  font-family: Tillana;
  color: #F7E3AB;
  text-shadow: 1px 0px 0px #734A18;
  font-size: 25px;
  margin-top: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid #7D6038;
  border-top: 1px solid #7D6038;
  background: beige;
  padding-left: 30px;
  font-weight: normal;
}
u, underline {
  color: #425473;
  text-shadow: 1px 0px 1px #475470;
}
i, em {
  color: #2F6B30;
  text-shadow: 1px 0px 1px #4C913A;
}
s, strike {
  color: #8A5C14;
  text-shadow: 1px 0px 2px #D4B16F;
}
.paalinkit {
  font-family: Dancing Script;
  text-decoration: none;
  font-size: 20px;
  border-top: 1px solid green;
  border-bottom: 1px solid green;
  margin: 0px 4px 0px 0px;
  display: block;
  background: lightgreen;
  padding: 5px;
  color: #205a13;
  text-align: center;
}

Kun tuota koodihirviötä vähän aikaa silmäilette, huomaatte varmasti jotain yhdenmukaista. Siinä on selkeästi lohkoja, jotka on rajattu {}-merkeillä, merkkien välissä on jotain määritteitä ja joka lohkon alkuun ennen {-merkkiä on kirjoitettu jotain epämääräistä. Huomaatte varmaan kolmannen lohkon alussa sanan h1, jonka muistatte edellisestä osasta tarkoittavan ykköstason otsikkoelementtiä. Samaisen lohkon sisällä näkyy myös edellisessä osassa style-attribuutin arvoina olleet font-size ja color. Mistä tässä koko rakenteessa on siis kyse?

Css rakentuu yksinkertaisesti lohkoista, joihin kuuluu valitsijaosa ja määriteosa. Nämä osat asetellaan lohkoon seuraavasti:

valitsijaosa {
  määriteosa
}

Opetelkaa alusta asti kirjoittamaan koodinne edellä esitellyllä tavalla, jotta se olisi selkeä!

Valitsijaosalla ilmaistaan, mihin sivun elementteihin muotoilut kohdistetaan. Määriteosa kertoo, miten näitä valittuja elementtejä muotoillaan. Määriteosan täytyy aina sijaita {}-merkkien sisässä, muuten koodi ei toimi! Siksi kannattaa heti valitsijan kirjoittamisen jälkeen laittaa avaava {-merkki ja lopettava }-merkki paikalleen, ennen kuin alkaa työstämään määritteitä:

valitsija {

}

Valitsijan muodostaminen

Yksinkertaisin valitsija on sellainen, jolla valitaan kaikki tietyt elementit, esimerkiksi ykköstason otsikot h1 tai linkit a. Tällöin tarvitsee vain kirjoittaa valitsijaksi elementin nimi:

h1 {
  color: green;
}

Edellinen koodi muuttaa kaikki sivulla olevat ykköstason otsikot vihreiksi.

a {
  color: red;
}

Edellinen koodi muuttaa kaikki sivulla olevat linkit punaiseksi. Voit kokeilla sivuillasi!

Yksityiskohtaisempia valitsijoita voi tehdä edellisessä osassa esiteltyjen id ja class-attribuuttien avulla. Jos sivuilla on elementtejä, esim. otsikoita, joilla on class-attribuutit arvolla "otsikkomuotoilut", voidaan kaikkia näitä otsikkoja muokata seuraavanlaisella valitsijalla:

h1.otsikkomuotoilut {
  color: blue;
}

Edellinen koodi muuttaa siis kaikki ne otsikko 1:t, joilla on class-attribuutti arvolla "otsikkomuotoilut", siniseksi. Käytännössä class-attribuuttia käytettäessä ei elementtien tyypeillä ole väliä, joten edellisen valitsijan voi ilmaista lyhemmin seuraavasti:

.otsikkomuotoilut {
  color: blue;
}

Siis kun muokataan tiettyyn luokkaan kuuluvia elementtejä, käytetään valitsijana class-attribuutin arvoa, jonka eteen on laitettu piste. Suntuubissa sivunavin pääkategoriat on laitettu linkkielementtiin sijoitetulla class-attribuutilla luokkaan "paalinkit", siksi niitä muokataan seuraavalla valitsijalla:

.paalinkit {
  color: white;
}

Suntuubissa puolestaan se pääkategoria, jossa tällä hetkellä olemme, on laitettu linkkielementtiin sijoitetulla class-attribuutilla luokkaan "paalinkitactive", ja siksi sitä muokataan seuraavalla valitsijalla:

.paalinkitactive {
  color: cyan;
}

Id-attribuutilla varustettua elementtiä voidaan muokata seuraavanlaisella valitsijalla:

h1#spesiaali {
  color: blue;
}

Koodi muuttaa sen otsikko 1:n, jolla on id-attribuutti arvolla "spesiaali", siniseksi. Käytännössä myöskään id-attribuutin yhteydessä elementin tyypillä ei ole väliä, joten valitsijan voi ilmaista lyhemmin seuraavasti:

#spesiaali {
  color: blue;
}

Siis id-attribuutilla varustettua elementtiä muokatessa laitetaan valitsijaksi attribuutin arvo, jonka eteen on laitettu risuaita #.

Sinä itse voit laittaa omaan tekstiisi id- ja class-attribuutteja kooditilassa. Kun painat ylhäältä kohtaa "koodi" näet HTML-esityksen kategoriaan kirjoittamastasi tekstistä. Esimerkiksi tämän kategorian alku näyttää kooditilassa seuraavalta:

Minä voisin laittaa otsikkoon seuraavan id-attribuutin:

<h1 id="opas">Css-opas</h1>

ja muokata ainoastaan tämän otsikon värin punaiseksi seuraavalla koodilla:

#opas {
  color: red;
}

Vielä eräs Suntuubin kannalta tärkeä valitsijatyyppi on pseudoluokat ja -elementit. Kauhean kuuloiset sanat, mutta tarkoitukseltaan yksinkertaiset. Pseudoluokalla tarkoitetaan sellaista elementtiin liittyvää ominaisuutta, jota ei voida ollenkaan merkata HTML koodiin, ja pseudoelementillä puolestaan sellaista ominaisuutta, jonka merkkaaminen koodiin olisi erittäin vaivalloista. Tällaisten ominaisuuksien muokkaamiseen Css:llä tarvitaan selaimen apua. Pseudoluokkia ja -elementtejä on monia, mutta suntuubissa oleellisin pseudoluokka on :hover ja oleellisimmat pseudoelementit :before ja :after.

:hover tarkoittaa sitä, miten elementin ulkonäkö muuttuu, kun kursori viedään sen päälle. Esimerkiksi muotoilut tilanteelle, jos kursori on linkin päällä tehdään seuraavalla valitsijalla:

a:hover {
  color: purple;
}

Kun kursori on kuvan päällä, muotoilut tehdään seuraavalla valitsijalla:

img:hover {
  opacity: 0.7;
​}

:before ja :after liitetään yleensä otsikoiden käyttöön; niillä voi laittaa esim. jonkun symbolin otsikoiden edelle (before) tai jälkeen (after). Esimerkiksi nuoli ykköstason otsikoiden eteen laitetaan seuraavalla valitsijalla:

h1:before {
  content: '->';
​}

Pseudoluokissa ja -elementeissä on hyvä huomata, että niissä on ehdottomasti ennen kaksoispistettä merkattava, mihin elementteihin ne kohdistetaan! Jos unohdat tämän esimerkiksi :hoverin kohdalla, lopputuloksena on, että koodi vaikuttaa joka ikiseen elementtiin. Jos esimerkiksi laitat sivuillesi seuraavan koodin

:hover {
  opacity: 0.7;
}

muutat joka ikisen elementin läpinäkyvyyttä, kun laitat kursorin sivujesi päälle eli toisin sanoen koko sivu muuttuu hieman läpinäkyväksi. Siksi muista aina määrittää, mille elementeille pseudoluokan tai -elementin kohdistat!

Valitsijoita voi myös yhdistellä. Jos esimerkiksi haluat yhtaikaa muuttaa sekä linkkien :hoverin että kakkostason otsikkojen värin oranssiksi, seuraavanlaisella valitsijalla onnistuu:

h2, a:hover {
  color: orange;
}

Eli kun tiettyjen ominaisuuksien tahdotaan olevan samat eri elementeillä, voidaan valitsijoita yhdistää pilkun avulla. Esimerkiksi jos haluan muuttaa tuon edellä esitellyn "opas" id:llä varustetun otsikon, joka ikisen "paalinkit" luokkaan kuuluvan kategorian tekstin värin ja jokaisen linkin värin keltaiseksi, käytän seuraavaa valitsijaa:

#opas, .paalinkit, a {
  color: yellow;
}

Valitsijoiden yhdistäminen näkyy Suntuubissa esimerkiksi alleviivausten, kursivointien, lihavointien ja yliviivauksien muotoilussa. Näistä jokaiselle löytyy HTML:stä kaksi eri elementtiä, esimerkiksi kursivoinnille <em> ja <i>. Siksi valitsijaankin yhdistetään nämä molemmat:

i, em {
  color: green;
}

Edellinen koodi muuttaa kursivoidun tekstin värin vihreäksi.

Valitsijoita löytyy enemmänkin kuin tässä mainitut, mutta ne eivät Suntuubin käytössä ole ollenkaan oleellisia, joten en esittele niitä tässä. Niiden ymmärtäminen vaatii myös enemmän tietoa HTML:n rakenteesta kuin olen tässä oppaassa pohjustanut, joten siitäkään syystä en käy niitä läpi.

Jos tässä vaiheessa tuntuu, että et ymmärrä valitsijoiden muodostamisesta hölkäsen pöläystä, älä huoli. Pidä taukoa, käy myöhemmin koko homma ajatuksen kanssa uudestaan läpi ja testaile koodeja omalla sivullasi, niin kyllä se siitä aukenee. Lisäksi annan oppaan lopussa pohjan, jossa on kaikki Suntuubin oleellisimmat valitsijat, ja sinun ei tarvitse muuta kuin lisätä määrittelyosa siihen.

Määritteiden tekeminen

Määritteiden tekeminen on yksinkertaista. Määritteet koostuvat ominaisuuden nimestä, kaksoispisteestä, arvosta ja puolipisteestä:

valitsija {
  ominaisuus: arvo;
}

Kaikki määritteet pitää sijoittaa {}-merkkien väliin ja selkeyden vuoksi niitä on hyvä sisentää vähän. Puolipiste jokaisen määrittelyrivin lopussa on välttämätön, sillä jos se puuttuu jostakin, koodi ei toimi oikein. Seuraavassa esimerkissä määrittelen jokaiselle ykköstason otsikkoelementille 18 pikselin fonttikoon, violetin fontin värin, sinisen varjostuksen ja mustan alaviivan:

h1 {
  font-size: 18px;
  color: purple;
  text-shadow: 0px 0px 1px blue;
  border-bottom: 1px solid black;
}

Korostan vielä erityisesti, että {}-merkkien väliin voi tulla vain näitä ominaisuus-arvo-pareja, eikä esimerkiksi toista valitsijaa! Yleisimpiä aloittelijoiden virheitä on nimenomaan näiden {}-merkkien puuttuminen tai väärä sijainti. Olkaa siis erityisen tarkkoina merkkien kanssa, sillä jos ne ovat väärin, koodi ei toimi.

Huomaa myös, että jos määrittelet epähuomiossa saman ominaisuuden kaksi kertaa, myöhempi määrittely kumoaa ensimmäisen määrittelyn. Esimerkiksi koodissa 

h1 {
  color: black;
  color: blue;
}

otsikko 1:n väriksi tulee sininen. Sama koskee tilannetta, jossa määrittelet kahdesti lohkon samalla valitsijalla: myöhemmin määritelty kumoaa ensimmäisen määrittelyn.

Yleisimmät ominaisuudet ja niille tulevat arvot käyn läpi seuraavassa osassa.

Kommentit

Joku saattoi jäädä miettimään, mitä ihmettä se tämän osion koodiesimerkin alussa ollut /*css by lilian*/ tarkoittaa. Kyseessä on kommentti eli sellainen koodin osa, joka ei vaikuta mitenkään koodin suoritukseen, vaan on tarkoitettu ihmisille. Kommentteja on hyvä käyttää koodin selittämiseen itselle ja muille varsinkin, jos koodia on paljon. Kommentteihin on hyvä kirjoittaa esimerkiksi, mihin sivun osaan tietty koodin osa vaikuttaa. 

Css-kielessä kommentti aloitetaan /* -merkinnällä ja lopetetaan */-merkinnällä. Jos joskus päädyt käyttämään kommentteja omassa koodissasi, ole erityisen huolellinen, että muistat sekä aloittavan että lopettavan merkin! Huolehdi myös, että merkit tulevat oikeisiin kohtiin.

Css-tiedostossa ei saa olla mitään muuta kuin lohkoja valitsija- ja määrittelyosineen sekä kommentteja! Jos esimerkiksi kirjoitat kommentin ilman kommentin merkkejä, koodi ei toimi ollenkaan tai jotkin osat lakkaavat toimimasta.
 

Css:n yleisimmät ominaisuudet ja niiden arvot

Käydään läpi joitakin Css:n yleisimpiä ominaisuuksia esimerkin kautta: luodaan Css-koodit sivunavin pääkategorioille. Koodit eivät kuitenkaan näytä hyvältä, jos navigaatio on laatikkomainen, joten mene yleiset asetukset -> navigaatio -> etsi kohta "Laatikkomainen navigaatio" -> valitse ei -> hyväksy.

Jos olet testaillut edellisen osan koodeja sivuillasi, kannattaa tyhjentää Css-tiedosto kaikesta tekstistä tässä välissä, ja sitten kopioida seuraava koodi sinne pohjaksi:

/*Pääkategorioiden valitsija*/
.paalinkit {

} 

/*Miltä pääkategoriat näyttävät, kun kursori siirretään niiden päälle*/
.paalinkit:hover {

 } 

/*Aktiivisen pääkategorian (eli sen, missä ollaan) valitsija*/
.paalinkitactive {

 } 

/*Miltä aktiivinen pääkategoria näyttää, kun kursori viedään päälle*/
.paalinkitactive:hover { 

}

Aluksi navigaatiosi pitäisi näyttää seuraavanlaiselta:

Color

Color-ominaisuudella määritetään elementin tekstin väri. Värin voi antaa joko heksadesimaalina (esim. #FF0000), RGB-arvona (esim. rgb(162, 169, 177)) tai värin englanninkielisellä nimellä (esim. blue). Määritetään oman navigaatiomme tekstin väriksi #4B0082 laittamalla kaikkiin neljään lohkoon seuraava ominaisuus-arvo-pari:

color: #4B0082;

Navin pitäisi näyttää nyt tältä:

Font-size, font-family, font-style ja font-variant

Font-size -ominaisuudella määritetään elementin fontin koko. Koon voi antaa esim. pikseleinä. Muitakin mittayksikköjä on, mutta luulen pikselien olevan teille tutuin, joten käytetään niitä. Määritellään oman navimme fontin kooksi 14 pikseliä eli lisätään seuraava ominaisuus kaikkiin neljään lohkoon:

font-size: 14px;

Font-family -ominaisuudella määritetään se kirjasintyyppi eli fontti, jolla teksti on kirjoitettu. Arvo eli fontin nimi laitetaan yleensä heittomerkkien sisään. Määritellään navimme fontiksi Arial laittamalla seuraava ominaisuus kaikkiin neljään lohkoon:

font-family: 'Arial';

Font-style -ominaisuudella määritellään fontin tyyli eli onko fontti vino vai suora. Tämän ominaisuuden arvoksi voi laittaa jonkin seuraavista: normal, italic tai oblique. Normal on oletusarvo eli sitä ei tarvitse merkata koodiin erikseen, jos tahtoo fontin olevan suorassa. Italic takoittaa vinoa tekstiä ja oblique hieman italicia vinompaa tekstiä. Esimerkki:

Tämän kappaleen font-style ominaisuuden arvo on italic.

Tämän kappaleen font-style ominaisuuden arvo on oblique.

En tahdo laittaa esimerkkinavimme tekstiä vinoon, joten en lisää koodiin mitään. Jos itse haluat, niin antaa mennä vaan!

Font-variant -ominaisuudella on vain kaksi arvoa: normal ja small-caps. Normal on oletusarvo, joten sitä ei tarvitse juuri koskaan merkata koodiin. Small-caps takoittaa, että elementin tekstin kirjaimet muutetaan isoiksi ja niitä pienennetään vähän. Esimerkki:

Tämän kappaleen font-variant ominaisuuden arvona on small-caps.

Small-caps on mielestäni kauniin näköinen, mutta en tällä kertaa laita sitäkään esimerkkinaviimme.

Tällä hetkellä navi näyttää seuraavalta:

Display

Display-ominaisuuden ymmärtämiseksi selitän teille vielä yhden asian liittyen HTML-kielen elementteihin. Elementit jakautuvat lohkotason elementteihin (block) ja rivinsisäisiin elementteihin (inline). Lohkotason elementit ovat sellaisia, jotka varaavat ympärilleen mahdollisimman suuren "laatikon" verkkosivulta, alkavat aina omalta riviltään ja niiden jälkeen tulee automaattisesti rivinvaihto. Rivinsisäinen elementti puolestaan varaa ympärilleen ainoastaan elementin sisältämän tekstin tilan, eikä ala omalta riviltään, eikä sitä seuraa rivinvaihto.

Lohkotason elementti on siis itsenäinen kokonaisuus, jonka asemaa voidaan muuttaa, rivinsisäinen taas ei ole, vaan se seuraa elementtivirtaa. Lohkotason elementtejä ovat esimerkiksi lohko <div>, kappale <p> ja otsikot <h1> - <h6>. Rivinsisäisiä ovat esimerkiksi linkki <a> ja kuva <img>.

Mitä merkitystä tällä on sitten Css:n kannalta? Css:ssä on ominaisuus nimeltä display, jolla voidaan muuttaa elementin esitystapaa esim. rivinsisäisestä lohkotasolle. Suntuubissa tätä ominaisuutta tarvitaan ainoastaan kategorioiden kanssa; kategorioita muokatessa muokataan oikeastaan linkkielementtiä <a>, joka on rivinsisäinen elementti. Jos emme muuta sitä lohkotason elementiksi, emme esimerkiksi saa jokaisen kategorian taustasta saman levyistä, emmekä saa kategorioiden ympärille yhtään tilaa, vaan ne ovat yhdessä mytyssä. 

Display-ominaisuudella on useita arvoja, mutta Suntuubissa niistä ei tarvitse tietää kuin inline ja block. Block tekee elementistä lohkotason elementin ja inline rivinsisäisen. Nyt jotta voimme jatkaa kategorioiden muokkausta, meidän täytyy tehdä niistä lohkotason elementtejä lisäämällä seuraava määrite kaikkiin neljään lohkoon:

display: block;

Jos sinusta tuntuu, että et ymmärrä, mistä tässä on kyse, niin ei hätää. Laitan jatkossa pari kertaa navistamme kaksi esimerkkikuvaa: toisessa on määrite "display: block;"  ja toisessa ei. Tulet kyllä huomaamaan, mikä ero on rivinsisäisellä ja lohkotason elementillä.

Suntuubin käytössä tämä määrite pitää ainoastaan muistaa kategorioiden muokkauksen kanssa! Esimerkiksi otsikoiden muokkauksessa tätä määritettä ei tarvita, koska otsikot ovat valmiiksi lohkotason elementtejä.

Text-align, text-decoration ja text-transform

Text-align -ominaisuus määrää tekstin tasauksen. Sillä on neljä arvoa: left, right, center ja justify. Left ryhmittää tekstin vasemmalle, right oikealle, center keskelle ja justify tasaa tekstin niin, että se on kiinni kummassakin reunassa. Laitetaan oman navimme teksti keskelle lisäämällä seuraava määrite kaikkiin koodin neljään lohkoon:

text-align: center;

Text-decoration määrittää tekstin koristelun. Sillä on neljä arvoa: none, underline, overline ja line-through. Arvolla none tekstillä ei ole koristelua, underline tuo alleviivauksen, overline tuo viivan tekstin päälle ja line-through yliviivaa tekstin.

Text-decoration arvolla underline.

Text-decoration arvolla overline.

Text-decoration arvolla line-through.

Otetaan esimerkkinavistamme alleviivaukset pois siitä tilanteesta, kun kursori on tekstin päällä eli laitetaan .paalinkit:hover ja .paalinkitactive:hover kohtiin seuraava määrite:

text-decoration: none;

Text-transform muokkaa tekstin kirjainten kokoa. Sille voi antaa kolme arvoa: capitalize, uppercase ja lowercase. Capitalize muuttaa tekstin jokaisen sanan ensimmäisen kirjaimen isoksi, uppercase muuttaa jokaisen kirjaimen isoksi ja lowercase puolestaan pieneksi.

En laita tätä ominaisuutta esimerkkinaviimme, mutta testata saa ja kannattaa.

Nyt navimme näyttää tältä:

Tässä tulee jo ensimmäinen esimerkki siitä, mitä seuraa, jos emme muuttaisi kategorioita lohkotason elementeiksi. Jos määrite "display: block;" puuttuisi, näyttäisi navi seuraavalta:

Eli rivinsisäisten elementtien tekstiä ei pysty tasaamaan, koska niillä ei ole omaa tilaa; ne eivät ole itsenäisiä kokonaisuuksia, vaan menevät elementtivirran mukana.

Border ja border-radius

Border-ominaisuudella lisätään reunus elementin ympärille. Määrite kirjoitetaan seuraavaan muotoon: "border: leveys tyyppi väri;".  Leveys tarkoittaa reunan leveyttä pikseleinä. Reunan tyyppejä on useita, yleisimpiä ovat solid (suora reuna), dashed (viivoitettu reuna), dotted (pistereuna) ja double (tuplareuna). Reunan värin voi antaa heksadesimaalina, RGB-arvona tai värin englanninkielisellä nimellä. Esimerkkejä:

Yhden pikselin levyinen suora reuna mustana, määrite border: 1px solid black;

Kahden pikselin levyinen pistereuna sinisenä, määrite border: 2px dotted #334ef4;

Yhden pikselin viivoitettu reuna punaisena, määrite border: 1px dashed rgb(255, 0, 0);

Kolmen pikselin tuplareuna oranssina, määrite border: 3px double orange;

Huomaa, että reunaa ei ole pakko laittaa joka puolelle: lisäämällä määritteeseen border-sanan jälkeen joko -top, -bottom, -left tai -right voidaan laittaa reunus yhdelle puolelle, esimerkiksi alas laitetaan reunus määritteellä border-bottom: 1px solid black;

Lisätään naviimme reunukset. Laitetaan .paalinkit ja .paalinkitactive:hover kohtaan:

border: 1px solid #e4b7ff;

.paalinkitactive ja .paalinkit:hover kohtaan:

border: 1px dashed #af4aff;

Nyt tilanne on tämä:

Ilman määritettä display: block; näyttäisi tältä:

Reunat ovat aivan tekstissä kiinni, koska elementeillä ei ole "laatikkoa" ympärillä, vaan rivinsisäisinä elementteinä ne vievät vain tekstinsä verran tilaa, eivätkä täten pyri ottamaan itselleen suurinta mahdollisinta tilaa, kuten lohkotason elementit. Toivottavasti lohkotason ja rivinsisäisen elementin ero on nyt selkeytynyt!

Border-radius -ominaisuudella pyöristetään elementin kulmat. Sille annetaan arvoksi neljä lukua pikseleinä: ensimmäinen kertoo vasemman yläkulman pyöristyksen, toinen oikean yläkulman, kolmas oikean alakulman ja viimeinen vasemman alakulman.

Esimerkiksi määritteellä border-radius: 15px 50px 30px 5px; saadaan tällaiset pyöristykset kulmiin.

Jos haluat pyöristää joka kulmaa yhtä paljon, riittää yksi pikseliarvo. Esimerkiksi jokaista kulmaa voi pyöristää 50 pikselillä määritteellä border-radius: 50px;

Myöskään pyöristystä ei ole pakko määrittää kerralla joka kulmaan, vaan voit lisätä border-radius ominaisuuden nimeen jonkun ilmaisuista top-left, top-right, bottom-left tai bottom-right ja näin määrittää pyöristyksen yhtä arvoa käyttämällä vain yhteen kulmaan. Esimerkiksi oikean alakulman pyöristäminen 20 pikselillä tapahtuu määritteellä border-bottom-right-radius: 20px; ja vasemman yläkulman pyöristys 10 pikselillä määritteellä border-top-left-radius: 10px;

En tällä kertaa pyöristä esimerkkinavimme kulmia, mutta suosittelen testaamaan!

Padding ja margin

Padding suomentuu sanalla 'täyte' ja nimensä mukaisesti sillä tarkoitetaan elementin reunan ja sisällön välistä tilaa eli täytettä. Padding-ominaisuudelle annetaan neljä pikseliarvoa, joilla määritetään reunan ja sisällön välisen tilan suuruus. Ensimmäisellä arvolla määritetään yläpuolen täytteen määrä, toisella oikean puolen, kolmannella alapuolen ja neljännellä vasemman puolen. Esimerkiksi määritteellä padding: 12px 34px 26px 45px; laitetaan ylös täytettä 12 pikseliä, oikealle 34 pikseliä, alas 26 pikseliä ja vasemmalle 45 pikseliä.

Jos joka puolelle halutaan saman verran ilmavuutta reunan ja sisällön väliin, riittää yksi pikseliarvo, esimerkiksi määrite padding: 3px; tuo joka puolelle kolmen pikselin verran täytettä. Lisäksi täytteen määrä voidaan asettaa joka puolelle erikseen lisäämällä määritteeseen padding-sana jälkeen joko -top, -left, -right tai -bottom. Esimerkiksi jos halutaan elementtiin täytettä ainoastaan yläpuolelle 30 pikseliä, voidaan käyttää määritettä padding-top: 30px;

Esimerkkinavimme reunat ovat epämiellyttävän lähellä tekstiä, joten lisätään täytettä joka puolelle 8 pikseliä. Koska laitamme joka puolelle täytettä saman verran, voimme käyttää määritettä, jossa on vain yksi pikseliarvo. Lisätään siis kaikkiin neljään lohkoon seuraava määrite:

padding: 8px;

Nyt navimme näyttää tältä:

Huomaat varmasti eron edelliseen esimerkkikuvaan, joten nyt viimeistään padding-ominaisuuden merkitys taisi valjeta, jos et hatarasta selityksestäni sitä heti käsittänyt. 

Margin-ominaisuus asettaa elementin ulkopuolisen tilan eli marginaalin suuruuden. Paddingin ja marginin eroa voisi havainnollistaa seuraavasti:
 

Tässä oranssi edustaa marginaalia, valkoinen viiva elementin reunaa ja vihreä täytettä


Margin siis määrittää elementin etäisyyden muista elementeistä ja padding elementin sisällön etäisyyden elementin reunasta. 

Marginin määritykset tehdään täsmälleen samalla tavalla kuin paddingin määritykset eli määrityksellä margin: 20px 30px 40px 50px; laitetaan ylös 20 pikseliä etäisyyttä, oikealle 30 pikseliä, alas 40 pikseliä ja vasemmalle 50 pikseliä, määrityksellä margin: 20px; laitetaan joka puolelle 20 pikseliä etäisyyttä ja vaikka määrityksellä margin-left: 10px; laitetaan vasemmalle 10 pikseliä etäisyyttä.

Laitetaanpa naviimme vähän etäisyyttä yläpuolelle ja oikealle eli lisätään kaikkiin neljään lohkoon seuraava määrite:

margin: 3px 3px 0px 0px;

Nyt navi näyttää tältä:

Kategoriat ovat hitusen enemmän erillään edelliseen kuvaan verrattuna, mutta suurta eroa ei tämän kohdan lisäämisestä tullut.

Background

Background nimensä mukaisesti asettaa elementin taustan. Arvoksi voi laittaa värin heksadesimaalina, RGB-arvona tai värin englannin kielisellä nimellä, esimerkiksi background: #00FF00; tekee taustasta vihreän.

Arvoksi voi myös laittaa kuvan määritteellä background: url("kuvanOsoite");
Esimerkiksi tämän sivun tausta on asetettu määritteellä background: url('/datafiles/userfiles/Image/tileable-sand-dunes-patterns-1.jpg'); Kuvan osoite täytyy siis laittaa url-sanan jälkeen sulkuihin joko heittomerkkien tai lainausmerkkien sisään.

Taustakuvan asettamiseen liittyy myös monia muita ominaisuuksia, esimerkiksi background-attachment ominaisuudella määritetään, liikkuuko tausta vierityksen mukana vai pysyykö paikallaan. En käy niitä sen kummemmin tässä läpi, vaan jos kiinnostut Css:tä voit selvittää ja kokeilla niitä itsenäisesti.

Laitetaan esimerkkinaviimme taustavärit. Lisätään .paalinkit ja .paalinkitactive:hover kohtiin seuraava määrite:

background: #ead9f5;

.paalinkitactive ja .paalinkit:hover kohtiin laitetaan seuraava määrite:

background: #cab0e0;

Nyt navimme näyttää jo aika hyvältä:

Text-shadow ja box-shadow

Text-shadow määrittää elementin tekstin varjostuksen. Arvoksi annetaan kolme pikseliarvoa ja väri tyyliin text-shadow: 1px 2px 3px black; tai text-shadow -1px -4px 2px #ffffff; Ensimmäinen pikseliarvo määrittää varjon siirtymän x-akselin suuntaan eli vaakasuunnassa; positiivinen arvo siirtää varjoa oikealle ja negatiivinen vasemmalle. Toinen pikseliarvo määrittää varjon siirtymän y-akselin suuntaan eli pystysuunnassa; positiivinen arvo siirtää alaspäin ja negatiivinen ylöspäin. Viimeinen piksealiarvo määrittää varjon pehmennyksen; arvolla 0px varjo on terävä ja sitä suuremmilla arvoilla pehmenee. Värin voi antaa heksadesimaalina, RGB-arvona tai värin englannin kielisellä nimellä. Esimerkkejä:

Määritteenä text-shadow: 8px 8px 0px grey;

Määritteenä text-shadow: -4px -4px 2px grey;

Määritteenä text-shadow: 2px -3px 5px grey;

Lisätään naviimme tekstin varjostukset. .paalinkit kohtaan laitetaan:

text-shadow: 0px 0px 2px #71448c;

.paalinkit:hover ja .paalinkitactive kohtiin laitetaan:

text-shadow: 1px 0px 1px #9400ff;

.paalinkitactive:hover kohtaan laitetaan:

text-shadow: 0px 0px 2px #975eb9;

Box-shadow -ominaisuudella määritetään elementin "laatikon" varjostukset. Varjo tulee siis reunojen ulkopuolelle. Arvo määritetään täsmälleen samalla tavalla kuin text-shadow'n arvo.

Lisätään naviimme reunojen varjostukset. .paalinkit ja .paalinkitactive:hover kohtiin laitetaan:

box-shadow: -1px 1px 2px #a36bc3;

.paalinkitactive ja .paalinkit:hover kohtiin laitetaan:

box-shadow: 0px 0px 3px #9400ff;

Nyt navimme on tämän näköinen:

Opacity

Opacity määrittää elementin läpinäkyvyyden. Sille annetaan arvo väliltä 0.0 - 1.0; 0.0 on täysin läpinäkyvä ja 1.0 täysin näkyvä. Huomaa, että arvoissa käytetään pistettä eikä pilkkua! Esimerkkejä:

Määritteenä opacity: 0.9;

Määritteenä opacity: 0.5;

Määritteenä opacity: 0.3;

Opacityä voi käyttää Suntuubissa esimerkiksi :hoverin määritteenä kategorioille tai kuville. En kuitenkaan laita tätä määritettä nyt esimerkkinaviimme.

Letter-spacing

Letter-spacing asettaa elementin tekstin kirjainvälin. Sille annetaan yksi pikseliarvo, joka voi olla negatiivinen tai positiivinen; positiivinen loitontaa kirjaimia toisistaan ja negatiivinen lähentää niitä.

Esimerkiksi määritteellä letter-spacing: 5px; saadaan tällainen lopputulos:

Erittäin hienoa tekstiä

Määritteellä letter-spacing: -2px; puolestaan tällainen:

Erittäin hienoa tekstiä

Lisätään naviimme hieman tilaa kirjainten väliin silloin, kun kursori on kategorian päällä eli lisätään .paalinkit:hover ja .paalinkitactive:hover kohtiin seuraava määrite:

letter-spacing: 1px;

Nytpä esimerkkinavimme on aikalailla valmis! Lopulliseksi koodiksi tuli seuraava:

/*Pääkategorioiden valitsija*/
.paalinkit {
    color: #4B0082;
    font-size: 14px;
    font-family: 'Arial';
    display: block;
    text-align: center;
    border: 1px solid #e4b7ff;
    padding: 8px;
    margin: 3px 3px 0px 0px;
    background: #ead9f5;
    text-shadow: 0px 0px 2px #71448c;
    box-shadow: -1px 1px 2px #a36bc3;
}

/*Miltä pääkategoriat näyttävät, kun kursori siirretään niiden päälle*/
.paalinkit:hover {
    color: #4B0082;
    font-size: 14px;
    font-family: 'Arial';
    display: block;
    text-align: center;
    text-decoration: none;
    border: 1px dashed #af4aff;
    padding: 8px;
    margin: 3px 3px 0px 0px;
    background: #cab0e0;
    text-shadow: 1px 0px 1px #9400ff;
    box-shadow: 0px 0px 3px #9400ff;
    letter-spacing: 1px;
}

/*Aktiivisen pääkategorian (eli sen, missä ollaan) valitsija*/
.paalinkitactive {
    color: #4B0082;
    font-size: 14px;
    font-family: 'Arial';
    display: block;
    text-align: center;
    border: 1px dashed #af4aff;
    padding: 8px;
    margin: 3px 3px 0px 0px;
    background: #cab0e0;
    text-shadow: 1px 0px 1px #9400ff;
    box-shadow: 0px 0px 3px #9400ff;
}

/*Miltä aktiivinen pääkategoria näyttää, kun kursori viedään päälle*/
.paalinkitactive:hover {
    color: #4B0082;
    font-size: 14px;
    font-family: 'Arial';
    display: block;
    text-align: center;
    text-decoration: none;
    border: 1px solid #e4b7ff;
    padding: 8px;
    margin: 3px 3px 0px 0px;
    background: #ead9f5;
    text-shadow: 0px 0px 2px #975eb9;
    box-shadow: -1px 1px 2px #a36bc3;
    letter-spacing: 1px;
}

Lopputulos, kun kursori on "Materiaali"-kategorian päällä:

Esimerkkimme on nyt valmis, mutta esittelen vielä pari Suntuubin kannalta hyödyllistä Css-ominaisuutta.

Font-weight

Font-weight määrittää elementin fontin paksuuden. Sille on useita arvoja, mutta Suntuubin käytössä tärkein on normal. Font-weight ominaisuutta tarvitaan Suntuubissa eniten otsikoiden kanssa. Otsikot ovat oletustyyliltään lihavoituja, mikä ei aina ole haluttu ominaisuus, sillä kaikki fontit eivät näytä hyvältä lihavoituna. Lisäämällä otsikoille Css:llä määrite font-weight: normal; saadaan lihavointi pois.
Esimerkki:

Tämä on oletustyylinen otsikko

Tähän otsikkoon on lisätty määrite font-weight: normal;

Content

Content-ominaisuus nähtiin jo esimerkkinä kohdassa "Valitsijan muodostaminen" ja nyt selitän vähän tarkemmin, miten tätä käytetään. Content-ominaisuus toimii ainoastaan lohkoissa, joiden valitsijan osana on joko pseudoelementti :before tai :after. Missään muussa lohkossa tämä ominaisuus ei toimi, sillä content määrittää ainoastaan sen sisällön, joka tulee elementtien eteen (before) tai jälkeen (after).

Arvoksi voi laittaa joko tekstiä tai symbolin heittomerkkien tai lainausmerkkien väliin, esimerkiksi seuraavassa koodissa

h1:after {
  content: '♦';
}

asetetaan ♦-symboli jokaisen otsikko 1:n jälkeen.

Arvoksi voi myös laittaa kuvan määritteellä content: url('kuvanOsoite'), esimerkiksi koodissa

h2:before {
  content: url('www.suntuubi.com/datafiles/userfiles/Image/fin_f.gif');
}

asetetaan kuva suomen lipusta  jokaisen otsikko 2:n eteen.

Huomaathan, että vaikka content toimii ainoastaan lohkoissa, joiden valitsijaan kuuluu :before tai :after, voi näihin samaisiin lohkoihin laittaa ihan vapaasti muita ominaisuuksia arvoineen. Esimerkiksi koodiin

h1:after {
  content: '♦';
}

voi padding-ominaisuudella lisätä täytettä symbolin ympärille ja font-size -ominaisuudella määrittää symbolin koon seuraavasti:

h1:after {
  content: '♦';
  padding-right: 5px;
  font-size: 18px;
}

Tässä olisi nyt selitettynä oman käsitykseni mukaan yleisimmät Suntuubissa tarvittavat Css-ominaisuudet arvoineen, mutta toki näitä ominaisuuksia löytyy enemmänkin. Jos haluat oppia lisää, niin tämän materiaalin lopusta löydät linkin, josta löytyy lisää tietoa Css:n ominaisuuksista ja Css:tä yleensä.
 

Css ja selaintuki

Css:n toiminta yksinkertaistettuna perustuu siihen, että on tehty sopimuksia erilaisista ominaisuuksista ja niiden arvoista, ja selainten tekijät sitten ohjelmoivat selaimensa niin, että ne tunnistavat näitä ominaisuuksia ja esittävät ne graafisesti sivuja selaavalle käyttäjälle. Css:ää kehitetään jatkuvasti ja tällä hetkellä siitä on menossa kolmas versio eli siitä on julkaistu kolme luonnosta. Jokainen luonnos on tuonut uusia ominaisuuksia Css:ään ja selainten tekijöiden vastuulla on toteuttaa nämä ominaisuudet selaimiinsa.

Valitettavasti selainvalmistajat eivät kaikki ole yhtä ahkeria tekemään näitä toteutuksia, mikä tarkoittaa sitä, että joillekin ominaisuuksille ei löydy tukea kaikista selaimista, varsinkaan vanhemmista versioista. Esimerkiksi Microsoft on pahamaineinen siitä, että se toteuttaa Internet Explorer -selaimeensa tuskallisen hitaasti Css:n ominaisuuksia. Hyvänä esimerkkinä text-shadow -ominaisuus toteutettiin vasta IE:n kymmenenteen versioon siinä missä muut selaimet kuten Chrome ja Firefox saivat tuen jo ensimmäisiin versioihinsa.

Sen lisäksi, että selaintuki joillekin ominaisuuksille on puutteellista, ovat selainvalmistajat toteuttaneet muutamat ominaisuudet jokainen eri tavalla. Parhaiten tämä tulee ilmi liukuvärjätyissä taustoissa: niissä eri selaimet tunnistavat eri tyyppiset määrittelyt, mikä tarkoittaa, että koodiin pitää laittaa jopa viisi erilaista määrittelyä eri selaimille. Käykääpä esimerkiksi katsomassa tämä liukuvärjätty viekkukoodi: kuinka monta background sanaa näette "vieraskirjan reunojen värit" -kohdassa?

Vielä kaiken huipuksi joihinkin ominaisuuksiin pitää laittaa useampi samannäköinen määrittely eri prefixeillä eli etuliitteillä eri selaimille. Firefoxille tämä etuliite on -moz-, Operalle -o-, Chromelle ja Safarille -webkit-. Ja mistä tämä johtuu? Liian innokkaista selainvalmistajista. Css3-luonnoksessa ei ole vielä tarkkaan joka ominaisuuden kohdalla määrätty, missä muodossa arvo annetaan. Innokkaat selainvalmistajat ovat kuitenkin päättäneet julkaista selainversioita, joihin he ovat jo tehneet omalla tavallaan toteutuksen näille ominaisuuksille, ja erottavat toteutuksensa luonnoksen standardista lisäämällä niihin omat etuliitteensä.

Tämä useamman määrittelyn tekeminen koskee ainoastaan joitakin Css3:n kuuluvia ominaisuuksia. Esimerkiksi tässä oppaassa esitettyihin ominaisuuksiin ei tarvitse tehdä eri selaimille omaa määrittelyä. Selostin tätä asiaa kuitenkin jonkin verran varsinkin niille lukijoille, jotka haluavat itse jatkaa tutustumista Css:n ja sen muihin ominaisuuksiin. Jos siis haluaa testata sivuillaan muitakin Css:n ominaisuuksia kuin tässä oppaassa mainitut, kannattaa tarkistaa niiden selaintuki. Joillakin täysin uusilla ominaisuuksilla ei välttämättä ole vielä toteutusta yhdessäkään selaimessa ja joissakin ominaisuuksissa pitää huomata tehdä määritys useampaan kertaan eri selaimille eri etuliitteillä.

Selostin tätä myös sen takia, että jos testaat oppaassa annettuja koodeja ja teet omia koodeja oppaan pohjalta ja huomaat, että jokin ominaisuus ei millään näytä toimivan, vaikka olet varmasti kirjoittanut sen määritteen oikein, niin tarkista selaimesi. Jos käytät IE:tä, varsinkin vanhempia versioita, niin satavarmasti jotkin ominaisuudet, kuten text-shadow, eivät toimi. Chromella ja Firefoxilla puolestaan satavarmasti toimii oppaassa esitetyt koodit, ja suosittelen monesta muustakin syystä vaihtamaan IE:n jompaan kumpaan niistä.

Tämä osio varmaan selvensi myös sitä, miksi sivustoni etusivulla on mainittu, että sivut toimivat parhaiten Firefoxilla tai Chromella ja että IE näyttää koodit (tai ainakin osan niistä) väärin.
 

Valmis pohja Css-koodeille suntuubiin

Laitan tähän alas valmiit pohjat Css-koodien tekoon Suntuubiin. Annan sinulle siis kaikki oleelliset valitsijat ja selitän, mihin osiin niille annetut määritteet vaikuttavat. Saat sitten itse testailla erilaisia määritteitä ja tehdä vaikka lisää valitsijoita.

Huom. Jos tästä pohjasta puuttuu jokin sinun mielestä olennainen valitsija tai haluat tietää, miten muokataan joitain muuta kohtaa sivuilla, niin mainitse asiasta viekussa tai chatissa, niin lisään sen!

Jos sinulla on sivunavi, kopioi seuraava:
 

/*Linkkien muokkaus*/
a {

}

/*Miltä linkki näyttää, kun kursori laitetaan sen päälle*/
a:hover {

}

/*Otsikko 1:n muokkaus*/
h1 {

}

/*Otsikko 2:n muokkaus*/
h2 {

}

/*Otsikko 3:n muokkaus*/
h3 {

}

/*Lihavoidun tekstin ulkonäkö*/
b, strong {

}

/*Alleviivatun tekstin ulkonäkö*/
u, underline {

}

/*Kursivoidun tekstin ulkonäkö*/
i, em {

}

/*Yliviivatun tekstin ulkonäkö*/
s, strike {

}

/*Pääkategorioiden muokkaus*/
.paalinkit {

}

/*Miltä pääkategoriat näyttävät, kun kursori viedään niiden päälle*/
.paalinkit:hover {

}

/*Aktiivisen pääkategorian (eli sen, missä ollaan) muokkaus*/
.paalinkitactive {

}

/*Miltä aktiivinen pääkategoria näyttää, kun kursori viedään päälle*/
.paalinkitactive:hover {

}


Jos sinulla on ylänavi, kopioi seuraava:
 

/*Linkkien muokkaus*/
a {

}

/*Miltä linkki näyttää, kun kursori laitetaan sen päälle*/
a:hover {

}

/*Otsikko 1:n muokkaus*/
h1 {

}

/*Otsikko 2:n muokkaus*/
h2 {

}

/*Otsikko 3:n muokkaus*/
h3 {

}

/*Lihavoidun tekstin ulkonäkö*/
b, strong {

}

/*Alleviivatun tekstin ulkonäkö*/
u, underline {

}

/*Kursivoidun tekstin ulkonäkö*/
i, em {

}

/*Yliviivatun tekstin ulkonäkö*/
s, strike {

}

/*Pääkategorioiden muokkaus*/
.submenu {

}

/*Miltä pääkategoriat näyttävät, kun kursori viedään niiden päälle*/
.submenu:hover {

}

/*Aktiivisen pääkategorian (eli sen, missä ollaan) muokkaus*/
.submenuactive {

}

/*Miltä aktiivinen pääkategoria näyttää, kun kursori viedään päälle*/
.submenuactive:hover {

}

Kysymyksiä ja vastauksia

Kerään tähän saamani kysymykset vastauksineen siltä varalta, että joku sattuu miettimään samoja asioita kuin mitä muut ovat aiemmin kysyneet.

Transition

"Tutkailin ja testailin äsken CSS-koodin maailmaa näin aloittelijana, ja lueskeltuani oppaasi mieleeni putkahti linkkien CSS:ää käsittelevä asia, nimittäin koodin "liike". Olen muutamilla (kuten täälläkin) törmännyt siihen, että kun linkin päälle vie kursorin, linkki muuttuu esim. eriväriseksi tavallaan kuin animoituna. Aloin miettimään, että mites se semmoinen mahtaa toimia?"

Kyseessä on sellainen mukava ominaisuus kuin transition. Sitä käytetään Suntuubissa aikalailla ainoastaan sellaisten elementtien kanssa, joille annetaan :hover määrittelyt. Otetaan esimerkiksi seuraava koodi:

a {
color: red;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a:hover {
color: black;
}

Tuossahan nyt määritellään linkkien väriksi punainen, joka muuttuu mustaksi, kun kursori viedään linkin päälle. Transitionia käytetään juuri tällaisissa tilanteissa, joissa elementin ominaisuuksien arvot muuttuvat toisenlaisiksi, kuten tässä tapauksessa color-ominaisuuden arvo muuttuu punaisesta mustaksi. Transition määrää tämän muutoksen nopeuden.

Transitionille annetaan kolme arvoa, joista ensimmäinen määrää, mille ominaisuuksille tämä muutos (=transition) toteutetaan. Yleensä se halutaan toteuttaa kaikille ominaisuuksille, joiden arvo muuttuu :hover osassa, siksi käytetään sanaa 'all'. Toinen arvo määrää nopeuden, jolla muutos tapahtuu. Viimeinen määrää muutoksen tyylin eli onko muutos koko ajan yhtä nopea vai esim. alussa hitaampi. Seuraavasta linkistä voit katsoa lisää ohjeistusta:

www.w3schools.com/css/css3_transitions.as

Transitionissa tulee ilmi juuri tuo useamman määrittelyn tekeminen eri etuliitteillä eri selainversioille ja se ei muutenkaan mielestäni kuulu aloittelijatasolle, joten en esitellyt sitä Css:n yleisimpien ominaisuuksien yhteydessä.

Fontit

"Mistähän voisi johtua, että kun Css-koodiin esim. Otsikko 1-kohtaan lisää fontiksi jonkun Google Fonts -sivulta löytyvän fontin, se ei toimi kun koodin laittaa sivulle?"

Se johtuu siitä, että selain ei voi esittää fonttia pelkän nimen perusteella, koska sen pitää myös tietää, miltä fontti näyttää eli sillä pitää olla hallussaan fontin tiedosto. Pelkän nimen perusteella selain voi näyttää vain sellaiset fontit, jotka on asennettu koneellesi. Tällaisia fontteja kutsutaan termillä 'web safe fonts', sillä niiden oletetaan löytyvän joka järjestelmästä. Näitä fontteja ovat mm. Verdana, Arial, Sans-serif ja muut tuollaiset perusfontit. Oman systeemisi oletusfontit löydät, kun laitat ohjauspaneelin hakuun sanan 'fontit'.

Kun sitten halutaan käyttää erikoisempia fontteja, kuten noita Google Fontsista löytyviä, täytyy Css-tiedostoon laittaa määrite, joka käskee selainta lataamaan fontin tiedoston tietystä osoitteesta tietyllä nimellä. Tämä määrite on @font-face ja sen syntaksi (='kokoonpano') on yksinkertaisimmillaan seuraava:

@font-face {
  font-family: 'Fontin nimi';
  src: url('fontinosoite') format('tiedostomuoto');
}

Google Fontsin tapauksessa pääsemme helpommalla, sillä meidän ei tarvitse itse tehdä noita @font-face määritteitä, vaan Google Fonts tekee sen puolestamme. Se kokoaa tuollaisen @font-face rykelmän kaikista valitsemistamme fonteista css-tiedostoon. Meidän täytyy vain tuoda tämä ulkoinen tyylitiedosto omaan css-tiedostoomme @import-määritteellä.

Kuinka tämä sitten käytännössä tehdään? Kun valitset Google Fontista kirjasimia painamalla fontin nimen vieressä olevaa + merkkiä, alas ilmestyy teksti "x families selected". Kun olet ottanut haluamasi määrän fontteja, paina tuota tekstiä, jolloin aukeaa kooste valitsemistasi fonteista. Paina "Embed Font" kohdan alta sanaa @IMPORT, jolloin pitäisi näyttää seuraavalta: 

Kopioi <style>-tagien välissä oleva @import-kohta (eli jätä tagit valinnan ulkopuolelle) ja liitä tämä css-tyylitiedoston alkuun kaiken koodin edelle. Tämän jälkeen ei tarvitse tehdä muuta kuin kirjoittaa fontin nimi 'font-family'-kohtaan.

Huom. @importin täytyy ehdottomasti olla ennen kaikkea muuta koodia, muuten se ei toimi! Katso mallia asetteluun esim. tämän ulkan koodista.

Mitä seuraavaksi?

Jos innostuit Css:tä, niin tässä olisi pari linkkiä, minne jatkaa seuraavaksi:

w3schools.com - Englanninkielinen erittäin laaja sivusto, josta löytyy hyvät esimerkit ja hurjasti tietoa Css:tä, Html:stä ja monesta muustakin kielestä! Sivustolta löytää myös täydellisen listan kaikista Css:n ominaisuuksista, tässä linkki suoraan sinne (ominaisuudet näet vasemmalle "Css properties" -tekstin alla)

Css-perusteet - Suomenkielinen dokumentti, jossa käydään läpi Css:n perusteet tarkemmin ja yleisluontoisemmin kuin tässä ja hienompia termejä käyttäen.

Html-perusteet - Suomenkielinen dokumentti, jossa selostetaan alusta alkaen Html-sivujen tekeminen. Kunnon opiskelumateriaalia tehtävineen, jos kiinnostuit Html:stä

Lisäilen linkkejä sitä mukaa, kun löydän hyviä ohjesivustoja.

 

Tässäpä tämä nyt oli, mahtavaa, jos jaksoit lukea aivan loppuun asti! Korostan tässä vielä lopuksi, että palaute oppaasta on erittäin tervetullutta, jotta tiedän, mitkä kohdat vaativat kehittämistä/selventämistä. Laitahan myös mieleen tulleita kysymyksiä joko chattiin tai viekkuun, niin pääsen vastailemaan.

©2017 Kopiointisivusto Captured World - suntuubi.com