Kuinka poistaa alleviivat linkeistä

click fraud protection

Oletusarvoisesti tekstisisältö on linkitetty HTML-koodiin tai "ankkuri" -elementin käyttö on alleviivattu. Usein web-suunnittelijat haluavat poistaa tämän oletustyylin poistamalla alleviivauksen.

Syyt alleviivaukseen ja sitä vastaan

Monet suunnittelijat eivät välitä alleviivatun tekstin ulkoasusta, etenkään tiheissä sisältölohkoissa, joissa on paljon linkkejä. Kaikki nämä alleviivatut sanat voivat todella rikkoa asiakirjan lukemisvirran. Monet ovat väittäneet, että nämä alleviivat tekevät sanoista vaikeampaa erottaa ja lukea nopeasti johtuen tavasta, jolla alleviivaaminen muuttaa luonnollisia kirjaimia.

Näiden alleviivojen säilyttämisestä tekstilinkeissä on kuitenkin laillisia etuja. Esimerkiksi kun selaat suuria tekstilohkoja, alleviivatut linkit yhdistettynä oikeaan värikontrastiin tekevät lukijoiden helpoksi heti skannata sivun ja nähdä linkit.

Jos päätät poistaa linkit tekstistä (yksinkertainen prosessi, jonka käsittelemme pian), muista löytää tapoja muotoilla tämä teksti erottamaan silti linkki puhtaasta tekstistä. Tämä tehdään useimmiten

instagram viewer
värikontrasti, mutta pelkästään väri voi aiheuttaa ongelmia vierailijoille, joilla on näkövamma, kuten värisokeus. Värisokeuden erityisestä muodosta riippuen kontrasti saattaa kadota kokonaan, mikä estää heitä näkemästä eroa linkitetyn ja linkittämättömän tekstin välillä. Siksi alleviivattua tekstiä pidetään edelleen parhaana tapana näyttää linkit.

Joten miten voit poistaa alleviivauksen käytöstä, jos haluat silti tehdä niin? Koska tämä on visuaalinen ominaisuus, josta olemme huolissamme, siirrymme verkkosivustomme osaan, joka käsittelee kaikkia visuaalisia asioita - CSS: ää.

Kytke linkkien alleviivatteet pois päältä CSS-tyylitaulukoiden avulla

Useimmissa tapauksissa et halua poistaa alleviivaa käytöstä vain yhdellä tekstilinkillä. Sen sijaan suunnittelutyyli edellyttää todennäköisesti, että poistat alleviivat kaikista linkeistä. Teet tämän lisäämällä tyylejä omaan ulkoinen tyyli.

a {
tekstikoristelu: ei mitään;
}

Se siitä! Tuo yksi yksinkertainen rivi CSS sammuttaisi alleviivan (joka tosiasiallisesti käyttää CSS-ominaisuutta "tekstin koristeluun") käytöstä kaikissa linkeissä.

Voit myös tarkentaa tätä tyyliä. Esimerkiksi, jos halusit poistaa käytöstä vain nav-elementin alleviivauksen tai linkit, voit kirjoittaa:

nav a {
tekstikoristelu: ei mitään;
}

Nyt sivun tekstilinkit saisivat oletusarvoisen alleviivauksen, mutta navissa olevat ne poistaisivat sen.

Yksi asia, jonka monet web-suunnittelijat päättävät tehdä, on kääntää linkki takaisin "päälle", kun joku vie hiiren tekstin päälle. Tämä tehdään käyttämällä: hover CSS-näennäisluokka, kuten tämä:

a {
tekstikoristelu: ei mitään;
}
a: vie hiiri {
tekstikoristelu: alleviivaus;
}

Inline CSS: n käyttö

Vaihtoehtona ulkoisen tyylitaulukon muutoksille voit lisätä tyylit suoraan itse elementtiin HTML.

Tämän menetelmän ongelmana on, että se sijoittaa tyylitiedot HTML-rakenteeseen, mikä ei ole paras käytäntö. Tyyli (CSS) ja rakenne (HTML) on pidettävä erillään.

Jos haluat, että kaikki sivuston tekstilinkit poistavat alleviivauksen, lisää nämä tyylitiedot kukin linkki erikseen merkitsisi kohtuullisen määrän ylimääräisiä merkintöjä sivustollesi koodi. Tämän sivun paisuminen voi hidastaa sivuston latausaikaa ja tehdä sivun hallinnasta paljon haastavampaa. Näistä syistä on suositeltavaa aina kääntyä ulkoisen tyylisivun puoleen kaikkien sivutyyliä varten.

Julkaisussa Sulkeminen

Niin yksinkertaista kuin alleviivaus on poistettava verkkosivun tekstilinkeistä, sinun tulee myös ottaa huomioon seuraukset. Vaikka se voi todellakin puhdistaa sivun ulkoasun, se voi tehdä sen yleisen käytettävyyden kustannuksella. Ota tämä huomioon, kun seuraavan kerran harkitset sivun "tekstikoristelu" -ominaisuuksien muuttamista.

instagram story viewer