Skip to content. | Skip to navigation

Jyväskylän yliopiston Koppa

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


Navigation

CSS-tyylivalitsimet

by Tanja Tuulikki Välisalo last modified Nov 13, 2014 12:31 AM

Tähän mennessä olet muokannut tyylejä niin, että HTML-dokumentin jokaisen elementin kaikki ilmentymät ovat saaneet saman tyylin. Toisin sanoen kaikki tekstikappaleet ovat keskenään samanlaisia, kaikki alaotsikot ovat keskenään samanlaisia, kaikki hyperlinkit ovat keskenään samanlaisia jne. Seuraavaksi opimme määrittelemään samanlaisille elementeille keskenään erilaisia tyylejä. Tähän on useita eri tapoja, jotka vaativat sekä HTML-dokumentin että CSS-tyylitiedoston muokkausta.

Id-tyylit

Id-attribuutilla erotetaan verkkosivuistolta yksittäinen elementti, joka poikkeaa kaikista muista saman sivun elementeistä ja on siis tyyliltään ainutlaatuinen. Ensin HTML-dokumentin elementille annetaan id-attribuutti seuraavasti:

<aloituselementti id=”nimi”>Sisältötekstiä…</lopetuselementti>

Sitten attribuutin avulla määritellään CSS-merkinnöillä tyylin ominaisuudet seuraavasti:

#nimi {
ominaisuus: arvo
}

TAI

elementti#nimi {
ominaisuus: arvo
}

Nimi valitaan oman maun mukaan, mutta sen kannattaa tietysti olla kuvaava. Aliluokan nimi kirjoitetaan pienillä kirjaimilla, ilman erikoismerkkejä ja skandinaavisia aakkosia. Se ei saa koskaan alkaa numerolla!

Esimerkki. Yksittäinen otsikko voidaan määritellä toisista poikkeavaksi. Tällöin muihin otsikoihin vaikuttavat niille annetut tyylit, mutta id-attribuutilla erotettu otsikko näyttäytyy sille annettujen tyylien mukaisena.

HTML:

<h1>Ensimmäinen otsikko</h1>
<p>tekstiä…</p>
<p>tekstiä…</p>

<h1 id=”huom”>Toinen otsikko</h1>  <p>tekstiä…</p> <p>tekstiä…</p>  <h1>Kolmas otsikko</h1>  <p>tekstiä…</p> 

CSS:

 

h1 { font-family: ”Courier New”, sans-serif; color: #666666; text-transform: uppercase } h1#huom { color:#cccccc; text-transform:none }

Aliluokat

Aliluokan eli class-attribuutti toimii samaan tapaan kuin id-attribuutti, mutta sitä voidaan käyttää useampaan eri elementtiin. Merkinnät ovat seuraavanlaiset:

HTML-dokumentissa

<aloituselementti class=”aliluokannimi”>Sisältötekstiä…</lopetuselementti>

CSS-dokumentissa

.aliluokannimi {
ominaisuus: arvo
}

TAI

elementti.aliluokannimi {
ominaisuus: arvo
}

Esimerkki. Otsikkoa ja listan yhtä kohtaa halutaan korostaa punaisella värillä. Merkinnät olisivat seuraavat:
HTML:

<h1 class=”tarkea”>Tietoturvariskien hallinta</h1>
<p>Tietoturvariskien hallinnassa tärkeimmät seikat ovat:</p>
<ul>
<li>virustorjunta</li>
<li>palomuuri</li>
<li class=”tarkea”>oma toiminta</li>
</ul>

CSS-dokumentissa:

.tarkea {
color: red;
font-weight: bold
}

Tehtävä

Viruksista kertovan taulukon viimeinen kohta kertoo levykeviruksista, joita ei oikeastaan enää ole. Tätä voitaisiin ilmaista myös tyyleillä.

  • Anna taulukon viimeiselle riville tai viimeisen rivin molemmille soluille aliluokka ja sille haluamasi nimi esim. himmea.
  • Luo CSS-tiedostoon tyyli, jonka nimi on äsken luomasi aliluokan nimi, esim. .himmea. Määritä väriksi esim. tummanharmaa #666666.
  • Tallenna ja tarkastele muutoksia selainnäkymässä. Taulukon viimeisen rivin teksti on nyt muita himmeämpi

Näennäisluokat ja -elementit

Näennäisluokkien ja -elementtien avulla tyyleihin voidaan lisätä erityisefektejä. Näennäisluokkia käytetään erityisesti hyperlinkkien ulkoasun määrittämiseen. Näennäiselementit puolestaan antavat aiempaa joustavampia mahdollisuuksia tekstin tyylien määrittelyyn.

HUOM! Näennäisluokkien keskinäiseltä merkintäjärjestyksellä on joissain tapauksissa merkitystä. Katso tarkemmin alla olevasta taulukosta.

Yleisimmät näennäisluokat ja -elementit ovat:

NäennäisluokkaToimintoHuomioitavaa
:link Vierailematon linkki
:visited Vierailtu linkki
:hover Hiiren osoitin elementin päällä Kirjataan vasta :link- ja :visited-luokkien jälkeen, jos ne ovat olemassa.
:first-child Lisää efektin elementin ensimmäiseen ilmentymään. Esim. efektin lisääminen sivun ensimmäiseen tekstikappaleeseen
p:first-child {font-weight: bold}
:first-letter Lisää efektin tekstin ensimmäiseen kirjaimeen Esim.
p:first-letter {font-size:xx-large}
:first-line Lisää efektin tekstin ensimmäiseen riviin

Näennäisluokkaa hyödyntävä tyyli merkitään näin:

elementti:näennäisluokka {
ominaisuus: arvo
}

Esimerkki. Hyperlinkille voitaisiin määritellä vieraillun linkin väriksi punainen seuraavasti:

a:visited {
color: red
}

Kun aliluokkia ja näennäisluokkia käytetään yhdessä, merkitään aliluokka aina ensin:

elementti.aliluokka:näennäisluokka {
ominaisuus: arvo
}

Tehtävä

Muokataan sivuston hyperlinkkejä. Hyperlinkeille on jo määritelty tyyli a, jonka ominaisuudet vaikuttavat sivuston kaikkiin hyperlinkkeihin. Näennäisluokkien avulla voidaan kuitenkin määrittää hyperlinkeille a-tyylistä poikkeavia ominaisuuksia.

  • Luo vierailtuja linkkejä varten uusi tyyli a:visited ja anna sille a-tyylin väristä poikkeava fonttiväri.
  • Tallenna ja tarkastele sivua selaimessa. Kokeile linkkejä ja seuraa niiden muutosta.
  • Luo vielä uusi tyyli a:hover ja määritä sille alleviivaus.
  • Tallenna ja testaa toimintoa kuljettamalla hiiren osoitinta sivun linkkien päällä.

Toisen elementin sisällä olevan elementin tyylit

Elementti voidaan tyyliltään erottaa toisista myös sen perusteella, missä se sijaitsee. Tällöin merkintä on muotoa

elementti elementti {
ominaisuus: arvo
} 

Esimerkki. Jos haluttaisiin muokata dokumentin kaikille listaelementtien sisällä sijaitsevat hyperlinkit isoin kirjaimin kirjoitetuiksi, tapahtuisi merkintä seuraavasti:

ul a {
text-transform: uppercase
}

Tehtävä

Muokataan index.html-sivun navigaatiopalkkia niin, että sen hyperlinkit ovat hieman toisenlaisia kuin dokumenttien muut hyperlinkit. Samalla harjoitellaan useimpia tämän luvun uusista asioista.

  • Anna navigaation sisältävälle listalle oma id-attribuutti, ja anna sille arvoksi naviLuo tyylitiedostossa tyyli #navi. 

Määritä #navi-tyylille seuraavat ominaisuudet:

  • Poista navigaatiolistasta listamerkit.
  • Anna navigaatiolistan kohtien väriksi esim. tummanvioletti #6633cc. Tallenna ja tarkastele selaimessa. Nyt muutokset näkyvät vain niillä navigaatiolistan kohdilla, joissa ei ole hyperlinkkejä.
  • Anna vielä sama väri navigaatiolistan hyperlinkeille hyödyntäen edellä esitettyä merkintätapaa. 

Anna navigaatiolistan hyperlinkeille hover-näennäistyyli. Luo siis uusi tyyli #navi a:hover. Anna sille seuraavat ominaisuudet:

  • Lihavoi teksti. Tallenna ja tarkastele selaimessa. Huomaat, että a:hover-tyylin ominaisuudet ovat periytyneet tyylille #navi a:hover. 
  • Poista tyylistä vielä alleviivaus.

 

  • Kopioi index-dokumenttiin lisäämäsi id-attribuutti myös virusinfo.html-sivulle.

Materiaalin on laatinut Tanja Välisalo.