HTML-linkkiviivojen muuttaminen verkkosivulla

Tässä artikkelissa selitetään useita tapoja, joilla voit muuttaa CSS: ää web-sivun tekstilinkkien oletusnäkymän poistamalla alleviivauksen, muuttamalla sen katkoviivaksi tai muuttamalla sen väriä. Mukana on lisätietoja alleviivatun muuttamiseksi katkoviivaksi tai kaksoisviivaksi.

Tekstilinkkien alleviivan poistaminen

Oletusarvon mukaan selaimet ovat varmoja CSS-tyylit että ne koskevat tiettyjä HTML-elementtejä. Jos et korvaa näitä oletusarvoja sivustosi omilla tyylitauluilla, oletukset ovat voimassa. Sillä hyperlinkit, oletusnäyttötyyli on, että linkitetty teksti on sininen ja alleviivattu. Halutessasi voit muuttaa alleviivojen ulkoasua tai poistaa ne kokonaan verkkosivultasi.

Jos haluat poistaa alleviivat tekstilinkeistä, käytä CSS-ominaisuuden tekstikoristetta. Tässä on CSS, jonka kirjoitat tekemään tämän:

a {tekstikoristelu: ei mitään; }

Tällä CSS-rivillä poistat alleviivauksen kaikista verkkosivusi tekstilinkeistä. Vaikka tämä on hyvin yleinen tyyli (se käyttää elementin valitsinta), sillä on silti enemmän spesifisyyttä kuin oletusselaintyyleillä. Koska nämä oletustyylit luovat alaviivat aluksi, sinun on korvattava se.

Varoitus alleviivojen poistamisessa

Visuaalisesti alleviivausten poistaminen voi olla juuri sitä, mitä haluat saavuttaa, mutta sinun tulee olla varovainen myös näin tehdessäsi. Pidätkö alleviivattujen linkkien ulkoasusta vai ei, et voi väittää, että ne tekisivät selväksi, mikä teksti on linkitetty ja mikä ei. Jos poistat alleviivaukset tai vaihdat sinistä linkin oletusväriä, muista korvata ne tyylillä, jotka sallivat edelleen linkitetyn tekstin erottua. Tämä tekee intuitiivisemmasta kokemuksesta sivustosi kävijöille.

Älä alleviivaa linkkejä

Toinen varoitus linkeistä ja alleviivaus, älä alleviivaa tekstiä, joka ei ole linkki, keinona korostaa sitä. Ihmiset ovat odottaneet alleviivatun tekstin olevan linkki, joten jos alleviivaat sisältöä lisätäksesi korostus (sen sijaan, että tekisit siitä lihavoidun tai kursivoidun), lähetät väärän viestin ja sekoitat sivuston käyttäjille.

Kuinka muuttaa alleviiva pisteiksi tai viivoiksi

Jos haluat pitää tekstilinkkisi alleviivattuina, mutta muuttaa alleviivatun tyyliä oletusnäkymästä, joka on "kiinteä" rivi, voit tehdä myös tämän. Tämän kiinteän viivan sijaan voit käyttää pisteitä alleviivaamaan linkkisi. Voit tehdä tämän poistamalla silti alleviivauksen, mutta korvaamalla sen reunan alaosan tyylillä:

a {tekstikoristelu: ei mitään; reunapohja: 1px pisteviiva; }

Koska olet poistanut tavallisen alleviivauksen, katkoviiva on ainoa, joka näkyy.

Voit tehdä saman asian saada viivoja. Muuta vain reunan alatyyli katkoviivaksi:

a {tekstikoristelu: ei mitään; reuna-pohja: 1px katkoviiva; }

Kuinka muuttaa alleviivatun väriä

Toinen tapa kiinnittää huomiota linkkeihisi on muuttaa alleviivatun väriä. Varmista vain, että väri sopii sinun väriskeema.

a {tekstikoristelu: ei mitään; reunapohja: 1px kiinteä punainen; }

Tuplaviivat

Kaksoisviivojen käyttämisen temppu on, että sinun on muutettava reunan leveyttä. Jos luot yhden kuvapisteen leveän reunuksen, päädyt kaksoisviivalla, joka näyttää yhdeltä alleviivalta.

a {tekstikoristelu: ei mitään; reunapohja: 3 x kaksinkertainen; }

Voit myös käyttää olemassa olevaa alleviivaa kaksinkertaisen alleviivaamisen muiden ominaisuuksien, kuten yhden katkoviivojen kanssa:

a {border-bottom: 1px double; }

Älä unohda linkkitiloja

Voit lisätä reunan alatyylin linkkeihisi eri tiloissa, kuten: leijuva, aktiivinen tai: vierailtu. Tämä voi luoda mukavan "rollover" -tyylielämyksen vierailijoille, kun käytät kyseistä "hover" -pseudoluokkaa. Toisen pisteviivauksen tekeminen, kun viet hiiren linkin päälle:

a {tekstikoristelu: ei mitään; }
a: vie hiiri {border-bottom: 1px dotted; }