[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Opassivut > 7. Miten CSS liitetään ankkureille ja linkeille

7. Miten CSS liitetään ankkureille ja linkeille

Aiheet

Yleistä

Ankkurit ja linkit

Että ankkurit toimisivat asianmukaisesti, edellyttää tiettyä järjestystä. Esim. väärässä paikassa määritelty :hover toimii vain kerran ja lopettaa välittömästi toiminnan, kun linkki tulee vierailluksi. Mikäli laitat esim. a:active saman taustavärin kuin sinulla on a:hover tekstiväri, teksti sulautuu taustaväriin! Oikea järjestys on seuraava:

a {text-decoration: none; color:black !important} /* ankkurielementti (A) on eräiden selainten tähden syytä määritellä */
a[name] {color: ... !important; background-color: transparent !important} /* CSS2:n mukaan toimivat selaimet toteuttavat a:hover myös nimetyille ankkureille; jotta a:hover ei muuttaisi ankkurin ominaisuuksia ne täytyy määritellä erityisen tärkeiksi; tässä ratkaisussa a:hover ei saa käyttää !important sääntöä */
a:link {color: #3f3f3f; text-decoration: underline;} /* vierailematon linkki */
a:visited {color: green; text-decoration: underline;} /* vierailtu linkki */
a:hover {color: red; text-decoration: none} /* hiiri kulkee linkin ylitse */
a:active {color: green; text-decoration: none; background-color: yellow;} /* CSS2-spesifikaation mukaan :active pitäisi toimi vain hiiren alas painamisen ja ylösnostamisen välisenä aikana, mutta CSS1:ssä tila on voimassa siihen asti kun jotain muuta kohtaa klikataan */
a:focus {color: green; text-decoration: none; background-color: yellow;} /* :focus on eri asia kuin :active; vasta :focus jää voimaan seuraavan linkin valitsemiseen asti (toiminto on ensisijaisesti suunniteltu näppäimistönavigointiin ja lomakekontrollielementeille; selaimet eivät ole velvollisia toteuttamaan sitä elementille A) */

Jos haluat, että selain huomioi linkin ympäröivälle (esi-isä)elementille tai BODY elementille antamasi luokan (esim. <BODY class="oma">), toteuta sääntö hahmonsovitus-periaatteella [S][Pw]:

.oma a:hover {color: #dcd2d3; text-decoration: none; background-color: #706a6a;} /* määrittelyä sovelletaan ensin ikään kuin mille tahansa elementille, mutta sille annetaankin tarkennettu ehto; linkin ominaisuuksien muutos tapahtuu vain sillä ehdolla, että linkin esi-isäelementillä on luokka oma */
.oma table a:hover {color: #dcd2d3; text-decoration: none; background-color: #706a6a;} /* määrittelyä sovelletaan edellistä esimerkkiä tarkemmin - sääntö toteutuu vain sillä ehdolla, että linkki on sellaisen taulukon sisällä, jonka esi-isäelementillä on luokka oma */

Selainkohtaisia huomautuksia:

  1. Opera 3.x ja Netscape 4.x-selaimet laittavat alleviivauksen ankkureihin, joissa on mainittu vain ankkurin nimi (esim. name="ankkuri"), mutta ei linkkiä, vaikka niin ei pitäisi tehdä. A on yksinään käytettynä normaali tyyppivalitsin, mutta :link ja :visited ovat näennäisluokkavalitsimia, joiden tulisi toimia vain siinä tapauksessa, että ankkurielementti sisältää linkin ilmaiseman attribuutin href.

  2. Yhdistelmänäennäisluokat toimivat oikein vain Mozilla Gecko ja Opera 7.x+ -selaimissa. Periaatteessa se, että a:hover ei toimisi linkeille voitaisiin toteuttaa a:link:hover ja a:visited:hover yhdistelmillä, mutta ne eivät toimi Opera 4.x-6.x -selaimissa. MS IE -selaimet lukevat vain yhdistelmän jälkimmäisen puolen (testi, jossa sekä tekstin ja taustan värin pitäisi muuttua).


    David Baron: Notes on suggesting link styles.

  1. Linkkeihin liittyvien näennäisluokkien toimivuus on selostettu pääpiirteissään sivulla 4[S][Pw]. Lisäksi on syytä huomauttaa, että MS IE toteuttaa a:active CSS1:n mukaisesti toisin kuin uudet Opera ja Mozilla Gecko -selaimet, jotka noudattavat CSS2 spesifikaatiota.

  2. Mozilla Gecko ja Opera 7.x -selaimet soveltavat dynaamisia näennäisluokkia useille elementille. Seurauksena on se, että ne toteuttavat a:hover myös nimetyille ankkureille ja mm. eräille lomake-elementeille (Model23b.html[S][Pw]). Teksti voi ajelehtia, mikäli :hover on määritelty jokin sellainen ominaisuus (esim. font-weight), joka jollakin tavoilla vaikuttaa elementtien asemointiin ja joka on eri kuin linkin osoittimen vieressä olevalla tekstillä.

[Alku]

Kuva- ja tekstilinkit

Periaatteessa kuva- ja tekstilinkit tulee käsitellä eri tavalla. Mikäli kuvalle ei ole määritelty omaa linkkejä koskevaa näennäisluokkaa[S][Pw], taustavärin or -kuvan pitäisi näkyä vain yhden rivin korkuisena.

W3C: CSS2: 10 Visual formatting model details, 10.6.1[Pw].

Mikäli a:hover, a:active ja a:focus kanssa käyttää taustamääreitä ja reunuksia, myös kuville tulee tehdä säännöt, esim.:

a.orange {display:display:block; border-width:0;} /* width ja height ominaisuudet voi olla tarpeen lisätä*/
a.orange:hover {color:red;background-color: #f85b07; border-width:0;}
a.orange:hover img {background:#f85b07 url(.gif);}
a.orange:active {color: #f85b07; background:#dcd2d3; border-width:0;}
a.orange:active img {background:#f85b07 url(.gif); border: #660033 1px solid;}
a.orange:focus {color: #f85b07; background:#dcd2d3; border-width:0}
a.orange:focus img {background:#f85b07 url(.gif); border: #660033 1px solid;}

Ks. suurin piirtein toimivia esimerkkinä entinen esittelysivuni[S][Pw], joissa olen määritellyt taustavärin CSS:llä linkkeinä käytetyissä kuvissa. Tein myös erillisen englanninkielisen testisivun[S].

Selainkohtaisia huomautuksia:

  1. Varo määrittelemästä a:hover siten, että tekstikoko muuttuu. Tekstikoon muutos saattaa johtaa siihen, että kaikki linkin rinnalla ja jälkeen oleva sisältö pitää muotoilla uudestaan. Jatkuva uudelleen muotoilemisen tarve tekee sivun käsittelyn hitaaksi, se voi luoda selaimen käytökseen epävakautta ja jopa kaataa selaimen. Opera 5.12-6.x ei lisää tekstikoon muutoksen vuoksi tekstille varattua kokoa. Tästä on lopputuloksena ruma efekti (testi), mutta tällä estetään uudelleen lataamisen tarve, sillä autetaan selainta säilymään vakaana ja sivun rullaus ei pääse hidastumaan (tämä voi olla myös syynä siihen, että Opera 4.x-6.x ei salli dynaamisia display-arvon muutoksia).

    Jos halutaan käyttää suurentuvaa tekstiä, seuraavia ohjeita olisi mielekästä noudattaa:

    • Linkki on lohkon sisällä ja lohkolle on määritetty riittävä korkeus ja leveys, että kasvava teksti mahtuu lohkoon ilman, että muiden elementtien paikka muuttuu, jotta ympäröivä sisältö ei vello.
    • Linkki määritellään lohkoksi ja sille annetaan width ja height ominaisuudet siten, että teksti ei kasvaessaankaan katkea Opera 5.x-6.x selaimissa.

  1. Asettamalla tekstilinkille display:block se näyttää uusilla selaimilla ikään kuin kuvalta. Uusilla Opera ja Netscape -selaimilla koko elementti toimii aina linkkinä, mutta MS IE kohdalla toisinaan koko elementti on aktiivinen ja toisinaan ei; jälkimmäisessä tapauksessa display:block saa aikaan vain visuaalisen efektin, mutta vain teksti toimii linkkinä. Jos MS IE:llä ominaisuuden width arvo on jokin muu kuin auto, linkit ovat aktiivisia koko käytettävissä olevalta leveydeltään lukuun ottamatta tilanteita, joissa linkit käyttävät ominaisuutta float eivätkä kaikki linkit mahdu samalle riville.

  2. Display:block ei toimi oikein Netscape 4.x ja MS IE 4.x (Windows) selaimissa.

  3. MS IE -selaimissa taustaväri näkyy koko kuvalle ilman display:block määritystä mutta ei Opera 4.x+ ja Netscape 6.x+ -selaimissa. Tosin oikea määrittely olisi display:inline-block (huomautan tästä asiasta CSS2 spesifikaation ongelmia[S]). Opera 4.x+ hyväksyy myös display:inline-table, joka luo rivisisäislaatikon; ja useimmissa tapauksissa ainakin suurin piirtein tavoitellun lopputuloksen.

  1. Opera ei tue taustakuvia linkki- ja dynaamisille näennäisluokille (korjattu Opera 7.0 Beta 2:ssa, mutta taustat eivät toimi moitteetta Opera 7.01:ssä). (Testi.)

  2. Joissakin Opera-selaimissa border:none ei poista Operan kanssa kuvilta reunuksia.

  3. Joissakin vanhoissa[S] CSS:ää tukevissa selaimissa reunukset eivät toimi linkeillä. Mikäli haluat niitä käyttää a:hover kanssa, laita myös elementeille A taustavärin mukaiset reunukset. Näin näkyvän reunuksen ilmestyminen linkille ei aiheuta dokumentin minkään osan uudelleen muotoilun tarvetta. Systeemi toimii Operassa hyvin myös a:active kanssa. MS IE ja Mozilla Gecko -selaimet pistävät tilassa a:active selaimen oletusääriviivat sivujen tekijän määrittelemien reunusten päälle. Reunukset tai oletusääriviivat toimivat Mozilla Gecko -selaimissa :active ja :focus näennäisluokille vain satunnaisesti. Ensimmäiset Opera 7.x -sarjan selaimet eivät tue elementille A :focus lainkaan. Huomasin sattumalta, että se on tuettuna ainakin Opera 7.23:ssa (en tiedä tarkalleen mistä versiosta asti piirre on tuettuna). Elementti A ei pidä käyttäjää tietyssä fokuksessa, joten fukuksen toimimattomuus ei ole mielestäni suoranainen virhe. Mutta nyt käyttäjä voi maalata linkin ja pitää sitä jonkin aikaa fokuksessa.

  1. Olen havainnut, että jos muuttaa text-decoration ja background-color ominaisuuksia, muutokset eivät aina toteudu kaikissa selaimissa. Näennäisluokkien toimivuus täytyy testata mahdollisimman monessa selaimessa. Olen havainnut erityisesti background-color:transparent muuttamisen ongelmallisiksi.

  2. Opera 7.x vanhemmat versiot eivät tue a.luokka:näennäisluokka elementti {...} tyyppisiä sääntöjä (esim. a.luokka:hover img {border:1px solid black} - toimii jos otetaan pois img).

  3. Käsittelen linkkejä myös sivulla, joka koskee dynaamisia valikoita[S].

[Alku]

Attribuuttivalitsimet

CSS2 tarjoaa myös attribuuttivalitsimiin perustuvan määrittelytavan. Otan esille muutaman tämän tavan käyttömahdollisuuksista:

a[href] {color:blue} /* vastaa samaa kuin a:link */
a[id] {color:blue} /* samalle sivulle viittaavat linkit merkitään erilailla kuin sivulta pois vievät linkit */
a[id="ankkurin_nimi"] {color:blue} /* ankkuri merkitään vain siinä tapauksessa, että sillä on tarkka tunniste eli tietty nimi */
a[href] img {background-color:yellow} /* elementteihin ja attribuutteihin perustuvia tunnistettavia hahmoja voidaan myös yhdistellä */
a[href="http://www.server.fi/~joku/"] {color:blue} /* vain tietty linkki merkitään */
a[target="new"], a[target="_blank"] {color:olive; background-color:yellow} /* omien sivujen ulkopuolelle uuteen ikkunaan ohjaavat linkit merkitään erilailla kuin omiin sivuihini viittaavat linkit */
 

Selainkohtaisia huomautuksia:

  1. Mikäli haluat testata attribuuttivalitsinten toimivuutta, sinun tulee välttämättä ladata uusi Opera tai Mozilla Gecko -selain. Näet vaikutuksen tällä sivustolla. Löydät muut attribuuttivalitsimia koskevat huomautukset sivulta 4[S][Pw]

Linkkielementeille kuten muillekin elementeille voidaan laittaa taustoja ja reunoja, joita käsittelen seuraavaksi.

[Alku]
   
Copyright Tapio Markula 1999-2003, Salo (kotisivu, s-posti - lisää s-postiosoiteeseen pisteellä erotettuna nimeni, Tapio Markula) (@dnainternet.net) - ei julkiskäyttöön ilman sopimusta.
Get Expression!
Editori, jolla saa luotua standardit täyttäviä HTML ja XML dokumentteja. Tämän sivuston sivut on useimmissa tapauksissa tarkastettu Dave Raggetin (W3C) tekemällä HTML-Tidy apuohjelmalla ja satunnaisesti W3C-organisaation virallisella koodintarkastusohjelmalla. Useimpien sivujen syntaksin pitäisi olla sopusoinnussa W3C:n XHTML 1.0 spesifikaation kanssa. Testaa tämä sivu!
Informaatiota selaimista, jotka näyttävät tai tulostavat tämän sivuston parhaiten.
[Hae Opera] [Hae Mozilla!]
CSS-opasta on viimeksi muutettu 20.12.2004