Hyperlinkit ovat keskeinen elementti verkossa. Jokainen verkkosivusto käyttää niitä yhdistääkseen eri sisältöjä ja helpottaakseen navigointia. Kuitenkin linkkien vakiosuunnittelu on usein vähän houkutteleva. Hyperlinkkejä voidaan kuitenkin helposti piristää ja tehdä käyttäjäystävällisimmiksi CSS:n avulla. Tässä oppaassa näytän sinulle, miten voit tyylitellä linkkien eri tilat houkuttelevasti CSS:n avulla.
Tärkeimmät havainnot
- Linkeillä on kolme päätilaa: normaali, hover ja visited.
- CSS mahdollistaa näiden tilojen ulkoasun muokkaamisen yksilöllisesti.
- Pseudoluokkien:hover,:visited ja:active käyttö on olennainen houkuttelevan suunnittelun kannalta.
Vaiheittainen opas
Linkkien tila-perusteet
On tärkeää ymmärtää hyperlinkkien kolme päätilaa:
- Normaali (käymätön)
- Hover (kun hiiri on linkin päällä)
- Visited (jo käydyt linkit)
Ilmaistaksesi tämän, käy jollain verkkosivustolla, kuten w3.org, ja tarkkaile linkkien käyttäytymistä. Vakiossa ne näkyvät sinisinä. Klikkaamisen jälkeen niiden väri muuttuu usein violetiksi tai liilaksi, mikä viestii, että olet jo käynyt linkissä.
CSS-selektorit linkeille
Linkkien tilojen tyylittelyyn CSS:ssä käytät selektoreita a, a:hover ja a:visited.
- a-selektorilla käsitellään normaalia tilaa.
- a:hover-selektorilla huolehditaan ulkoasusta, kun käyttäjä vie hiiren linkin yli.
- a:visited-selektorilla käytetään linkkejä, jotka on jo käyty.
Hover-efektien lisääminen
Käyttäjäkokemuksen parantamiseksi sinun tulisi lisätä hover-efekti. Voit esimerkiksi leikkiä täytön (padding) kanssa ja muuttaa taustaväriä, kun linkki on kohdistettu. Tämä tarjoaa käyttäjälle visuaalista palautetta siitä, missä hiirekursorisi sijaitsee.
Tekstin koristelun säätäminen
Toinen tapa parantaa linkkien suunnittelua on tekstikoristelun säätäminen. Sen sijaan, että linkki olisi aina alleviivattu, voit aktivoida tämän alleviivauksen vain, kun käyttäjä vie hiiren linkin yli. Tämä antaa modernin ja siistin ilmeen.
a:hover { text-decoration: underline; }
Aktivi tila lisääminen
Tila, jossa linkkiä klikataan, määritellään a:active-selektorilla. Tämä tila osoittaa, että käyttäjä valitsee linkin aktiivisesti.
Kaikkien tila yhdistäminen
Olet nyt käsitellyt kaikki tarvittavat tilat linkkien suunnittelua varten.
a:visited { color: green; }
a:hover { background-color: #aaa; padding: 5px 15px; text-decoration: underline; }
a:active { background-color: lightgrey; }
Yhteenveto – Hyperlinkkien kaunistaminen CSS:llä
Olet tässä oppaassa oppinut, kuinka voit tyylitellä hyperlinkkien eri tilat tehokkaasti CSS:n avulla. Tiedät nyt, että on tärkeää käyttää tiloja:hover,:visited ja:active oikein, jotta voit luoda houkuttelevan ja käyttäjäystävällisen verkkoliittymän. Yksinkertaisilla muutoksilla, kuten väri- ja täyttömuutoksilla, voit tehdä linkeistä houkuttelevampia ja intuitiivisempia.
Usein kysyttyjä kysymyksiä
Mitkä ovat tärkeimmät linkkitilat CSS:ssä?Tärkeimmät tilat ovat normaali, hover ja visited.
Kuinka voin säätää hover-tilaa linkeille?Käytä CSS:ssä selektoria a:hover muuttaaksesi ulkoasua hiiren ollessa linkin päällä.
Kuinka muotoilen käytyjä linkkejä CSS:ssä?Käytä selektoria a:visited muokataksesi jo käytyjen linkkien ulkoasua.
mikä on ero a:active ja a:hover välillä?a:hover koskee linkkejä, joiden päällä hiiri leijuu, kun taas a:active kuvastaa tilaa, jossa linkkiä klikataan.
Kuinka voin säätää linkkien alleviivausta?text-decoration: none -koodilla voit poistaa alleviivauksen ja a:hover -osassa voit lisätä alleviivauksen takaisin.
