HTML ja CSS aloittelijoille (osa 26): Näin pääset käsiksi valitsimilla (1)

Valitsimet määrittävät, miten CSS-tyylit määrätään HTML-elementeille. Vastaavassa määrityksessä ensimmäisenä annetaan elementin nimi, johon valitsimen tulee kohdistua. Todellinen määrittely tapahtuu sitten aaltosulkeiden sisällä. Määrittelyn sisällä voidaan määrittää yksi tai useampi ominaisuus. Yleinen syntaksi on siis seuraava:

Valitsin {
   Ominaisuus1: Arvo;
   Ominaisuus2: Arvo;
   Ominaisuus3: Arvo;
}

Vastaava määritys on jo tullut vastaan aiemmassa opetusohjelmassa.

h1 {
   font-family:"Courier New", Courier, monospace;
   font-size: 200%;
}

Huolehtikaa ehdottomasti siitä, että jokainen määrittely päättyy puolipisteeseen.

Tutkitaan saatavilla olevia valitsimia

Itse asiassa CSS:llä on runsaasti valitsimia, joista esittelen teille tärkeimmät. Sillä vain valitsimien hallinnan osaaminen mahdollistaa järkevien CSS-ominaisuuksien määrittämisen.

Yksinkertaisin tapa määrätä tyylejä HTML-dokumentissa on Elementtivalitsin.

Seuraavalla syntaksilla kaikille p-elementeille annetaan musta väri.

p { 
   color: #009966; 
}

Halutessasi määrittää useille elementeille saman tyylin, se on myös mahdollista.

Tässä tapauksessa kirjoitat kyseiset elementit yksinkertaisesti peräkkäin, erotettuina toisistaan pilkulla.

p, h1,  li { 
   color: #000; 
}

Voit myös määrätä useita tyylejä elementeille. Tällöin tyylit kirjoitetaan puolipisteellä toisistaan erotettuina.

p { 
   color: #000; 
   background-color: red;
}

Edellä mainittujen vaihtoehtojen yhdistäminen on myös mahdollista.

p, h1,  li { 
   color: #009966; 
   background-color: red;
}

Tulos voisi näyttää tältä:

Alueet useilla elementeillä

Usein on tarpeen muotoilla alue, joka koostuu useista HTML-elementeistä. Tällaisiin tapauksiin HTML:ssä on kaksi erityistä elementtiä: span ja div. Nämä elementit tulevat teille – muuten myös tässä sarjassa – ilmestymään jatkuvasti vastaan.

Esimerkiksi:

<div class="artikel">
  <h1>Värikkäät räjähdykset</h1>
  <p class="thema">Opas värikkäiden räjähdysten luomiseen <span class="autor">MarkusMelzer</span>.</p>
</div>

Ainoa ero div ja span välillä on se, että div-elementti pakottaa uuden rivin tekstivirtaan. span sen sijaan ei tee niin. Esimerkissä määritellään div-alue, joka sisältää otsikon ja kappaleen. Kappaleen sisällä on jälleen span-alue.

ID- ja luokkavalitsimet

Tähän asti on käytetty elementtivalitsimia. Seuraavassa esimerkissä elementtivalitsimen avulla määritetään kaikki h1-otsikot.

h1 { 
   color: #000; 
   background-color: red;
}

Tämä ei kuitenkaan ole aina toivottua. Mitä esimerkiksi, jos haluat antaa tiettyjä ominaisuuksia vain yhdelle tai joillekin, mutta ei kaikille h1-otsikoille? Tällaisiin tilanteisiin CSS tarjoaa kaksi mahdollisuutta, nimittäin luokka- ja ID-valitsimet.

Luokkavalitsimilla voi valita tarkasti HTML-elementtejä luokkaominaisuudella. Kyseisen HTML-elementin täytyy sisältää class-attribuutti. Luokan määritykset alkavat pisteellä.

.rot { 
   color: red; 
}

Tässä määriteltiin luokka rot. Lisätäksesi punaiset ominaisuudet HTML-elementtiin, anna class ja sen perään luokan nimi.

<p class="rot">PSD-Tutorials.de</p>

ID-valitsinta on yhtä helppo käyttää. ID-valitsin tunnistetaan kaksoisristillä.

#topnavi { 
   color: blue; 
};

Esimerkissä määriteltiin ID topnavi. Mutta huomioithan: Yhtä ID:tä saa todellisuudessa määrittää vain kerran dokumentissa. Pääsy määriteltyyn ID-ominaisuuteen tapahtuu sitten seuraavasti:

<div id="topnavi">Tässä on navigointi</div>

Ominaisuus "id" osoittaa ID-nimen. Varmistakaa, että ristikko ei kirjoiteta tähän.





Nämä tiedot voidaan muuten myös yhdistää toisiinsa. Näin voit esimerkiksi osoittaa useita luokkia yhdelle HTML-elementille.

<p class="punainen suuri">PSD-Tutorials.de</p>

Tässä esimerkissä tekstikappaleelle on osoitettu kaksi luokkaa, punainen ja suuri. Jos haluat määrittää luokan ja ID:n, se näyttää kuitenkin tältä:

<p class="punainen" id="navi">PSD-Tutorials.de</p>

Voit myös yhdistää elementtejä ja ID:itä. Tässäkin esimerkki:

div.navi { 
   color: sininen; 
}

Tämä syntaksi koskisi yksinomaan div-elementtejä, joille on osoitettu luokka navi. p-elementit, joilla on myös luokka navi, eivät vaikuta siihen.

CSS:ssä on vielä toinen tapa yhdistää valitsimia. Katso seuraava syntaksi:

h1 { 
   color: punainen;
}
em { 
   color: sininen; 
}

Kaikki ensimmäisen tason otsikot saavat punaisen värin. em-elementit puolestaan saavat sinisen värin.

Yhdistämällä näitä kahta ohjetta voit varmistaa, että vain em-elementit ovat sinisiä, jotka ovat h1-elementtien sisällä.

h1 em { 
   color: sininen; 
};

Elementtien nimet erotetaan tässä toisistaan ilman pilkkuja.

Tämä on muuten yleinen virhe, johon erityisesti CSS-aloittelijat lankeavat. Tässä sama syntaksi, mutta jossa on kuitenkin pilkku:

h1, em { 
   color: sininen; 
}

Mitä tämä syntaksi tarkoittaa? Kaikki h1- ja kaikki em-elementit viitataan. Tämä on siis täysin erilaista kuin syntaksi ilman pilkkua!

Yksi tärkeä valitsin on yleisvalitsin. Tämä mahdollistaa minkä tahansa elementin valitsemisen. Tämä valitsin määritellään asteriskillä.

* { 
   color: punainen; 
}

Tämän syntaksin avulla kaikki elementit väritettäisiin punaisiksi. Tässäkin valitsimessa on taas joitakin syntaksi erityispiirteitä huomioitavana.

#mainnavi * { 
   color: punainen; 
}

Tässä esimerkissä kaikkien elementtien etualanväri mainnavi-ID-elementissä on asetettu punaiseksi. Tämä ei kuitenkaan päde itse elementtiin.

Jos universaaliaselain olisi deklaraation alussa, sitä ei tarvitsisi osoittaa. Joten tällainen olisi siis tarpeeton:

* p { 
   color: punainen; 
}

Tämä syntaksi vastaa seuraavaa:

p { 
   color: punainen; 
}

Seuraavassa tutoriaalissa opit lisää valitsimia.