Tässä viimeisessä valitsimien opetusohjelmassa esittelen teille hyvin erityisen valitsimien muodon. Nämä ovat niin kutsuttuja pseudoluokkia ja pseudo-elementtejä. Nämä ovat valitsimia, joita ei kohdisteta tiettyihin HTML-elementteihin, vaan ne luodaan tulostuslaitteella.
Pseudoluokkia ja pseudo-elementtejä voidaan käyttää määrittelemään tiettyjä HTML-osia, joita ei voida kuvata yksiselitteisesti HTML-elementillä. Tyypillisiä esimerkkejä ovat juuri napsautettu hyperlink tai vielä vierailematon hyperlink.
Linkkien ulkoasu
Hyvin usein haluamme muokata sivuston hyperlinkkejä. CSS tarjoaa monia mahdollisuuksia erilaisten linkkien tilojen hallintaan ja niiden ulkoasun muokkaamiseen.
Jos esimerkiksi haluat antaa hyperlinkille punaisen värin, se näyttäisi seuraavalta:
a:link {
color: red;
}
a:visited-merkitsee jo vierailtuja hyperlinkkejä. Seuraavalla syntaksilla voit esittää hyperlinkit, jotka on jo napsautettu, sinisellä värillä.
a:visited {
color:blue;
text-decoration:none;
}Selaimessa tämä näyttää seuraavalta:
Voit myös muokata erityisesti juuri napsautettuja hyperlinkkejä.
a:active {
font-weight: bold;
color: blue;
text-decoration: none;
}
Tähän käytetään syntaksia a:active.
Syntaksi a:hover puolestaan viittaa tilaan, jossa hiiren osoitin on hyperlinkin päällä. Lisäksi on olemassa toinen pseudo-elementti, a:focus. Tämä kuvaa hetkeä, jolloin hyperlinkki saa fokuksen.
Muita pseudo-elementtejä
On pseudo-elementtejä, jotka voivat osoittaa toisten elementtien osia. Tyypillinen esimerkki on ::first-letter. Tämä pseudo-elementti valitsee nykyisen elementin ensimmäisen merkin. Sitä voidaan käyttää kaikissa tekstiä sisältävissä elementeissä. Mutta huomio: pseudo-elementit on kirjoitettava kaikkien valitsimien loppuun. Niiden on siis oltava aaltosulkeiden edessä.
h1::first-letter {
color: blue;
}
::first-line-kautta voidaan valita elementin ensimmäinen rivi. Tämä pseudo-elementti voidaan soveltaa ainoastaan lohkoasteen elementteihin. Esimerkki:
p::first-line {
background-blue;
}
Tässä tulokset selaimessa:
one
:before- ja :after-pseudo-elementtejä voidaan käyttää lisäämään lisäsisältöä elementin eteen ja jälkeen. contentin avulla määritetään, mitä tulisi näyttää.
• normaali – tyypillisesti määritelty pseudo-elementti ei luoda.
• ei mitään – pseudo-elementtiä ei luoda.
• <string> – tässä annettu merkkijono tulostuu. Merkkijonot on asetettava yksinkertaisiin tai tuplaheittomerkkeihin.
• <uri> – annettu URI-resurssi lisätään.
• <laskuri> – määrittelee laskurin tai viittaa tiettyyn laskuriin.
• attr(< tunniste>) – sulkujen sisällä olevan attribuutin arvo lisätään.
• close-quote – lisää päättävän lainausmerkin.
• no-close-quote – päättävää lainausmerkkiä ei lisätä, mutta sisennyssyvyys kasvaa yhdellä.
• no-open-quote – avaavaa lainausmerkkiä ei lisätä, mutta sisennyssyvyys kasvaa yhdellä.
• open-quote – lisää avaavan lainausmerkin.
Esimerkki:
ul li:before {
content: uri("bullet.gif");
}
CSS3:ssa esiteltiin myös pseudo-selectori :not. Sen avulla voidaan helposti valita tiettyjä sisältöjä. Ensimmäinen esimerkki on osoitus siitä, kuinka tehokas tämä pseudo-valitsin todella on. Oletetaan, että haluat valita kaikki hyperlinkit, joilla ei ole href-attribuuttia. Vastaava syntaksi näyttää tältä:
a:not([href])
"Normaalit" hyperlinkit pysyvät koskemattomina tästä syntaksista. Ankkurimäärittelyihin voi kuitenkin päästä sen avulla.
<a name="top">Alkusivu</a>
Hieman yksityiskohtaisempi esimerkki osoittaa :nota tehokkuuden. Dokumentissa on määritelty erilaisia tekstikappaleita.
<body> <h1>PSD-Tutorials.de</h1> <p>Tämä on kappale.</p> <p>Tämä on toinen kappale.</p> <div>Tämä on tekstialue.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Lisäksi merkittyjen tekstikappaleiden lisäksi on myös div-alue ja hyperlinkki. Nyt tapahtuu seuraavaa:
• Kaikille p-merkityille kappaleille annetaan musta tekstiväri.
• Kaikkialla missä ei ole p-kappaleita, käytetään punaista tekstiväriä.
Vastaava CSS-syntaksi näyttää tältä:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Perinnön periaate
Yksi tärkeimmistä asioista, kun on kyse CSS-määritelmien ymmärtämisestä, on perintö. Itse asiassa CSS:ssä tyylominaisuudet periytyvät yhdestä toiseen elementtiin.
Esimerkki:
html {
color: red
}Tämän määrityksen avulla html-elementille annetaan punainen etualan väri.
Tämän periaatteen mukaisesti tämä värimääritelmä koskee ensisijaisesti kaikkia html:ään alisteisia elementtejä. Joten alkaen kaikki nämä elementit näkyvät punaisina oletuksena, jotka ovat html:ää alempana. Tämän vaihtoehdon etuna on, että näille elementeille ei tarvitse määrittää punaista väriä. Mutta mitä tapahtuu, jos p-kappaleiden sisältö ei näytetä punaisena? Silloin on ylitettävä html:n yläpuolinen värimääritelmä.
html {
color: red;
}
p {
color: #000;
}
Mikä tapahtuu, kun on olemassa kaksi elementtiä p ja div?
<body> <p>PSD-Tutorials.de</p> <div>Maailma</div> </body>
Tulos näyttää tältä:
Html:n värin määritys vaikuttaa ainoastaan div-elementin sisältöön. P-kappale näkyy kuitenkin mustalla tekstillä.
CSS:ssä on erilaisia tapoja määrittää tyylimalleja. Tämän vuoksi yhden elementin osalta voi olla ristiriitaisia ohjeita. Tällaisia tapauksia varten CSS:ssä on painotusperiaate. Tämän periaatteen avulla on selvitetty, mitkä ohjeet ovat ensisijaisia yhdelle elementille. En aio mennä tässä yksityiskohtiin tämän periaatteen suhteen. Tarkempia tietoja löydät esimerkiksi sivulta http://wiki.selfhtml.org/wiki/CSS/Kaskade tai myös osoitteesta http://www.thestyleworks.de/basics/cascade.shtml.
Tärkeintä minulle on kuitenkin näyttää, mitä sinun on kiinnitettävä huomiota CSS-ominaisuuksia määriteltäessä. Tähän tarkoitukseen toimii seuraava esimerkki:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC;
}
h2 strong {
color: red;
}
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Tämä on kappale <strong>lihavoitu sana</strong>.</p>
<h2>Tämä on otsikko <strong>lihavoitu sana</strong>.</h2>
</div>
</body>
</html>Selaimessa se näkyy tällä tavalla:
Kuten näette, esimerkiksi strongilla merkityt sanat muotoillaan eri tavalla. Käytetty muotoilu riippuu lopulta määritelmien järjestyksestä.
Vaihtoehtoisesti on kuitenkin myös !important -avainsana, jonka avulla voit merkitä CSS-ohjeen erityisen tärkeäksi.
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC !important;
}
h2 strong {
color: red;
}
</style>Tässä on jälleen kerran tulos:
Lue tässä yhteydessä ehdottomasti tässä oppaassa mainitut lähteet. (Vaikka sinun ei varmasti ole vielä tarpeen puuttua tähän aiheeseen syvällisemmin aluksi).
