CSS (Cascading Style Sheets) -määritettä käytetään yleisimmin verkkosivujen hyperlinkkien värin muuttamiseen. Vähemmän toiminnalliset ratkaisut tähän ongelmaan ovat HTML-kielellä (HyperText Markup Language - "hypertekstien merkintäkieli").
Se on välttämätöntä
Perustiedot HTML- ja CSS-kielistä
Ohjeet
Vaihe 1
Valmistele tyylilohko hyperlinkkejä varten. Yksinkertaisimmassa muodossaan se saattaa näyttää tältä: {color: Green} Tässä "a" kutsutaan "valitsimeksi", mikä osoittaa, että sulkeissa olevaa tyylin kuvausta tulisi soveltaa kaikkiin asiakirjan linkkitageihin. Vihreä määrittelee linkin värin; tämä on hyvin karkea värimääritys ja sitä käytetään harvoin. Paljon useammin "a" -valitsimeen lisätään "pseudoluokka" - se on tarra, jonka avulla voit määrittää linkin tyylin kolmessa eri tilassa.
Vaihe 2
Käytä linkin pseudoluokkaa tyylin luomiseen linkin normaalille (ei-aktiiviselle) tilalle. Se voi näyttää tältä, esimerkiksi: a: link {color: Green}
Vaihe 3
Määritä pseudoluokan hoverin avulla, kuinka linkin pitäisi näkyä hiirellä. Esimerkiksi: a: hover {color: Lime}
Vaihe 4
Käytä vierailtua pseudoluokkaa kuvaamaan jo käydyn linkin tyyliä. Esimerkiksi: a: käynyt {color: DarkGreen}
Vaihe 5
Yhdistä kaikki kolme tilaa yhteen tyylikuvauslohkoon. CSS-tyylityyppejä sisältävän HTML-koodin ulkoasu voi esimerkiksi näyttää tältä:
a: link {väri: Vihreä}
a: käynyt {color: DarkGreen}
a: hover {color: Lime}
Tässä avaavat ja sulkevat HTML-tyylitunnisteet kertovat selaimelle, missä tyylikuvaukset alkavat ja loppuvat, ja niiden välillä on kuvaus linkkien käytöstä kolmessa tilassa.
Vaihe 6
Edellä käytetty näyte näyttää vain väriominaisuudet, mutta muita ominaisuuksia voidaan sisällyttää kuvaukseen. Esimerkiksi, jos sivun suunnittelu edellyttää, että linkkiä ei alleviivataan normaalissa (ei-aktiivisessa) tilassa, mutta alleviivataan, kun kohdistin on hiiren päällä, koodia voidaan muokata seuraavasti:
a: linkki {väri: Vihreä; tekstikoristelu: ei mitään;}
a: käynyt {color: DarkGreen; tekstikoristelu: ei mitään;}
a: leijuva {väri: Lime; tekstikoristelu: alleviivattu;}
Vaihe 7
Jos haluat muuttaa vain joidenkin sivun linkkien väriä ja jättää loput oletusasetuksiin, lisää sitten luokan attribuutti jokaisen muutettavan linkin tagiin. Nimeä esimerkiksi tämä hyperlinkkiluokka newLinks. Tällöin linkkitunniste voi näyttää tältä: tekstilinkki Tyylin kuvaukseen on lisättävä sama luokan nimi:
a.newLinks: linkki {väri: Vihreä; tekstikoristelu: ei mitään;}
a.newLinks: käynyt {color: DarkGreen; tekstikoristelu: ei mitään;}
a.newLinks: hover {väri: Lime; tekstikoristelu: alleviivattu;}
Vaihe 8
Sijoita edellä kuvatuista esimerkeistä valmistettu tyylikuvauskoodi sivun otsikkoon - ja -tagien väliin. Lisää tarvittaessa luokan attribuutti linkkitunnisteisiin tyylien kuvauksissa käytetyn nimen kanssa. Tallenna sitten muokattu sivu ja toimenpide hyperlinkkien värin muuttamiseksi valmistuu.
