Opi helppo tapa poistaa sivun alle linkit HTML-muodossa

Poistettavat vaiheet tekstiyhteyksistä ja asioista, jotka ovat tietoisia

Oletusarvon mukaan tekstisisältö, joka on liitetty HTML: hen tai "ankkuri" -elementillä, on tyylin alleviiva. Usein web-suunnittelijat poistavat tämän oletustyylin poistamalla aliverkon.

Monet suunnittelijat eivät välitä alleviivattujen tekstien ulkoasusta, etenkin tiivistetyissä sisällön lohkoissa, joissa on paljon linkkejä. Kaikki nämä alleviivatut sanat voivat todella rikkoa asiakirjan lukuvirtaa. Monet ovat väittäneet, että nämä korostukset todella tekevät sanoja vaikeammaksi erottaa ja lukea nopeasti, koska tavoite korostaa muutoksia luonnollisiin kirjainmuotoihin.

On kuitenkin oikeutettua hyötyä näiden tekstiviestien korostamisen säilyttämisessä. Kun esimerkiksi selaa suuria tekstilohkoja, alleviivattujen linkkien ja oikean värikontrastin avulla lukijat voivat helposti selata sivua ja nähdä, missä linkit ovat. Jos katsot web designartikkeleita täällä osoitteessa banner.info sekä muut sivuston artikkelit, näet tämän tyylin alleviivattujen linkkien paikallaan.

Jos päätät poistaa linkkejä tekstistä (yksinkertainen prosessi, joka katetaan pian), varmista, että löydät tapoja muotoilla tekstiä edelleen erottamaan linkki tavallisesta tekstistä. Tämä tapahtuu useimmiten edellä mainitun värinkontrastin kanssa, mutta väri voi itsessään aiheuttaa ongelmia näkövammaisille vierailijoille, kuten värisokeudelle. Riippuen niiden erityisestä värisokeudesta, kontrasti voi olla täysin kadonnut heille, estäen heitä näkemästä linkitettyjen ja sidottujen tekstien välisen eron. Siksi alleviivattu teksti on edelleen paras tapa näyttää linkkejä.

Joten miten poistat alleviivan, jos haluat silti tehdä sen? Koska tämä on visuaalinen piirre, josta olemme huolissamme, käännymme verkkosivustosi osaan, joka käsittelee kaiken visuaalisen - CSS: n.

Käytä Cascading-tyyppisiä arkkeja poistaaksesi linkkien alleviivat

Useimmissa tapauksissa et halua kääntää alleviivausta vain yhdellä tekstilinkillä. Sen sijaan suunnittelutyylisi todennäköisesti edellyttää, että poistat kaikki linkit alleviivistä. Tee tämä lisäämällä tyylejä ulkoiseen tyyliarkistoosi.

{text-decoration: none; }

Se siitä! Tämä yksinkertainen CSS-rivi poistaisi alleviivan (joka todella käyttää CSS-ominaisuutta "tekstin koristeluun") kaikilla linkillä.

Voit myös saada täsmällisempiä tähän tyyliin. Jos esimerkiksi haluat vain poistaa navigaation alareunan tai linkit, voit kirjoittaa:

nav a {teksti-sisustus: ei yhtään; }

Nyt sivun tekstilinkit saisivat oletuskorjauksen, mutta ne, jotka ovat navassa, poistavat sen.

Yksi asia, jota monet web-suunnittelijat haluavat tehdä, on kytkeä linkki takaisin päälle, kun joku kohtaa tekstin. Tämä tehdään käyttämällä: hover CSS pseudo-luokkaa, kuten:

{text-decoration: none; } a: hover {text-decoration: underline; }

Inline CSS -ohjelman käyttäminen

Vaihtoehtona muutosten tekemisessä ulkoiselle tyylitaulukolle voit myös lisätä tyylit suoraan elementtiin itse HTML-muodossa:

tämä linkki ei ole alleviivattu

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

Jos haluat, että kaikki sivuston tekstilinkit, joiden alleviivaus on poistettu, lisäämällä tyylitiedot kullekin linkille yksilöllisesti merkitsisi sitä, että sivustosi koodiin lisätään ylimääräinen lisämerkintä. Tämä sivumainen paine voi hidastaa sivuston latausaikaa ja tehdä sivujen hallinnan paljon haastavammaksi. Näistä syistä kannattaa aina kääntyä ulkoiseen tyyliarkkiin kaikille sivutyylitarpeille.

Suljettaessa

Niin helppoa kuin poistaa sivut tekstiviestistä, sinun on myös otettava huomioon sen seuraukset. Vaikka se voi todellakin puhdistaa sivun ulkoasun, se voi tehdä sen yleisen käytettävyyden kustannuksella. Ota tämä huomioon seuraavan kerran, kun harkitset sivun "tekstin koristeluominaisuuksien" muuttamista.

Alkuperäinen artikkeli Jennifer Krynin. Edited on 9/19/16 Jeremy Girard