CSS-tyylivalitsimet
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äisluokka | Toiminto | Huomioitavaa |
---|---|---|
: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 navi. Luo 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.