CSS-opas

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2008!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

Periytyminen ja valitsimet

Pseudovalitsimet

Normaalitilanteessa CSS-tyylimäärittely kohdistuu dokumenttipuun staattisiin elementteihin; ts. elementteihin, jotka on merkitty HTML / XHTML-dokumenttiin tagien avulla. Pseudovalitsintsen avulla tyylimäärittely voidaan kohdentaa dynaamisesti tunnistettaviin rakenteisiin, jotka eivät ole osa dokumentin DOM-puuta ,mutta jotka voidaan päätellä joko dokumenttipuuta tai käyttäjän toimintoja tarkkailemalla. Tälläisiä dynaamisia rakenteita ovat mm:

Hyperlinkin tila ( ei-vierailtu, vierailtu)
Elementin tila (hiiri päällä, muu fokus)
Elementin ensimmäinen kirjain
Elementin ensimmäinen rivi
Elementtiä edeltävä /seuraava tila

Hyperlinkin tila

Hyperlinkki (ankkuri) merkitään HTML / XHTML-kielessä elementin a avulla. Pseudovalitsimia hyödyntäen avulla on mahdollista tarkistaa linkin tila ja määritellä tilaan liitettävä ulkoasu. Mahdolliset valitsimet ovat:

a:link: Valitsin kohdistaa tyylimäärittelyt linkkiin (a-elementti), jonka lähdedokumenttia (href-attribuutti) käyttäjä ei ole avannut selaimessaan.
a:visited: Valitsin kohdistaa tyylimäärittelyt linkkiin (a-elementti), jonka lähdedokumentin (href-attribuutti) käyttäjä on avannut selaimessaan.

Esimerkki. Normaalisti linkit esitetään ilman alleviivausta. Ei-vieraillut linkit esitetään sinisellä värillä, luetut linkit punaisella.

a {
  text-decoration:none;
}

a:link {
 color:blue;
}  

a:visited {
 color:red;
}

Elementin tila

Elementin tila voidaan tarkistaa käyttäen jotain kolmesta pseudovalitsimesta:

E:hover: Hiiri tai muu valintalaite on elementin päällä.
E:focus: Elementillä on fokus (ts. siihen voidaan syöttää tekstiä); lähinnä lomakekentät.
E:active: Elementti on aktivoitunut, esim. käyttäjä on klikannut sitä hiirellä ja vapauttanut hiiren.

Internet Explorer 6 ja vanhemmat tukevat E:hover-pseudoluokkaa oletusarvoisesti vain linkki-elementtien yhteydessä. Muilla elementeillä ominaisuus ei toimi, ellei käyttäjä ole ladannut selaimeensa erillistä päivitystä.

Esimerkki. Kun hiiri on hyperlinkin päällä, vaihdetaan linkin väri ja lisätään alleviivaus. Syötekentän taustaväri muuttuu kun sillä on focus. Kun painike aktivoituu, siihen lisätään reunus

a:hover {
  color:#CCFF99;text-decoration:underline;
}

input[type=text]:focus {
  background-color:#CCFF99; padding:10px;
}

input[type=button]:active {
  border:2px solid blue;
}

:before ja :after -pseudot

Before ja after pseudovalitsinten avulla voidaan määritellä elementtiä edeltävä, tai sen jälkeen esitettävä sisältö. Sisältö määritetään CSS-ominaisuudella content.

Esimerkki. Dokumentilla luodaan tulostus-mediaa varten ylätunniste.

@media print {
body:before 
 { 
   content: "Copyright Koulutus- ja konsultointipalvelu KK mediat © 2007 \A Aineiston kopioiminen ja hyödyntäminen 
   henkilökohtaisen käytön ulkopuolella ilman lisenssiä on kielletty. ";
   display: block;
   margin-top: 2em;
   text-align:left;
  }
}

:first-line, first-letter ja first:child

Pseudovalitsimen first-letter avulla voidaan kohdentaa tyyli elementin ensimmäiseen kirjaimeen. Ts. sen avulla luodaan mm. anfangeja. Esimerkki:

 p:first-letter {
   font-size:2em;
}

Pseudovalitsimen first-line avulla voidaan kohdentaa tyyli elementin ensimmäiseen riviin. Ensimmäinen rivi määritellään selainikkunan (nk.viewport) perusteella. Esimerkki:


 p.first-line{ 
  text-transform:uppercase;
}

Valitsimen first-child avulla tyylimäärittely voidaan kohdentaa jonkin elementin ensimmäiseen lapseen. Esim. jos div-elementin ensimmäinen lapsi on p, kohdistuisi siihen seuraava tyyli:

div > p:first-child {
  text-indent: 10px;
}

Tutustu artikkelin muihin osiin:
»»» CSS »»»Periytyminen
»»» CSS »»»CSS:n valitsimet - yleisesti ja listaus
»»» CSS »»»CSS:n valitsimet - esimerkit ja tarkempi esittely
»»» CSS »»»CSS:n valitsimet - pseudovalitsimet
»»» CSS »»»CSS:n valitsimet - toimivuus eri selaimilla