logo

Kuinka muuttaa linkin väriä CSS:ssä?

Linkkejä käytetään yhdistämään yksi sivu toisiin verkkosivuihin. Linkit samaan väri koska muuta tekstiä on vaikea havaita. CSS:n väriominaisuutta käytetään linkkien värin vaihtamiseen.

CSS:n avulla voimme muotoilla linkit eri tavoin. Voimme asettaa joitain hyperlinkin tiloja, jotka ovat seuraavat:

a:aktiivinen Sitä käytetään lisäämään tyyliä aktiiviseen elementtiin.
a:hover Se lisää elementtiin erikoistehosteita, kun käyttäjä siirtää hiiren osoittimen elementin päälle.
linkki Se lisää tyyliä vieraamattomaan linkkiin.
a:vieraillut Se lisää tyyliä vierailltuun linkkiin.

On huomattava, että CSS-määritelmässä a:hover täytyy tulla perässä linkki ja a:vieraillut ja myös a:aktiivinen täytyy tulla sen jälkeen a:hover ollakseen tehokasta.

Hyperlinkin tilojen ilmoittamisjärjestys on annettu seuraavasti:

 a:link {color: lightblue;} a:visited {color: #060235} a:hover {color: #FCFC0C} a:active {color: #C0F0FC} 

Linkin värin muuttamiseksi meidän on käytettävä väri CSS:n omaisuutta. Värin nimi voidaan antaa missä tahansa kelvollisessa muodossa, kuten värin nimi, rgb()-arvo tai HEX-arvo.

Katsotaanpa nyt, kuinka linkkien väri asetetaan esimerkkien avulla.

Esimerkki

Oletuksena normaalien tai vierailemattomien linkkien väri on sininen. Tässä esimerkissä muutamme linkin oletusväriä käyttämällä väri omaisuutta.

 a{ color: brown; } <p> The text <b>javaTpoint.com</b> in the above line is the hyperlink. </p> 
Testaa nyt

Lähtö

Kun ohjelma suoritetaan, saamme seuraavan näytön.

Kuinka muuttaa linkin väriä CSS:ssä

Hiirtä liikuttaessa linkki näyttää tältä:

Kuinka muuttaa linkin väriä CSS:ssä

Kun linkki on aktiivisessa tilassa, linkin väri on punainen, kuten alla näkyy.

Kuinka muuttaa linkin väriä CSS:ssä