Poista linkin alleviivat tai luo katkoviivoitetut tai kaksinkertaiset alleviivatut linkit
Oletusarvoisesti web-selailu tietyt CSS-tyylit, joita ne käyttävät tiettyihin HTML-elementteihin. Jos et palauta näitä oletusasetuksia sivustosi omilla tyylisivuilla, oletusasetuksia sovelletaan. Hyperlinkkejä varten oletustyyli on, että kaikki linkitetyt tekstit ovat sinisiä ja alleviivattuja. Selaimesi tekee niin, että sivuston kävijät voivat helposti nähdä, mitä tekstiä linkitetään. Monet web-suunnittelijat eivät välitä näistä oletustyyleistä, etenkin korostuksista. Onneksi CSS: n avulla on helpompi muuttaa heijastusten ulkoasua tai poistaa ne kokonaan.
Tekstiviivojen alleviivauksen poistaminen
Alleviivattu teksti voi olla haastavampi lukea ei-alleviivattu teksti. Lisäksi monet suunnittelijat eivät yksinkertaisesti välitä alleviivattujen tekstilinkkien ulkoasusta. Näissä tapauksissa todennäköisesti haluat poistaa nämä korostuvat kokonaan.
Tekstiviestien alleviivojen poistamiseen käytetään CSS-ominaisuuden tekstin koristelua. Tässä on CSS, jonka kirjoittaisit tähän:
{text-decoration: none; }
Tämän yhden rivin CSS avulla poistat alleviivan kaikista tekstilinkistä. Vaikka tämä on hyvin yleinen tyyli (se käyttää elementtivalitsinta), sillä on vielä enemmän spesifisyyttä kuin oletusselaimen tyylit tekevät. Koska nämä oletustyylit ovat sitä, mikä luo korostukset aluksi, on se, mitä sinun on korvattava.
Varoitus alalinjojen poistamisesta
Visuaalisesti korostusten poistaminen voi olla täsmälleen mitä haluat saavuttaa, mutta sinun on oltava varovainen, kun teet tämän myös. Haluaisitko alleviivattujen linkkien ulkoasua tai ei, et voi väittää, että ne tekevät selväksi, mikä teksti on linkitetty ja mikä ei ole. Jos otat pois alleviivaa tai muuta sinisen sinisen oletusväriä, sinun kannattaa korvata ne tyyleillä, jotka sallivat edelleen linkitetyn tekstin erottuvan. Tämä tekee entistä intuitiivisemman kokemuksen sivustosi kävijöistä.
Älä paina ei-linkkejä
Toinen varovaisuus linkit ja korostaa, älä korosta tekstiä, joka ei ole linkki keinona korostaa sitä. Ihmiset ovat odottaneet, että alleviivattu teksti on linkki, joten jos korostat sisältöä korostamisen lisäämiseksi (sen sijaan, että kirjoitit lihavoituna tai kursivoidessasi sitä), lähetät väärän viestin ja sekoitat sivuston käyttäjät.
Vaihda alleviivaus pisteviivoihin tai viivoihin
Jos haluat säilyttää tekstilinkkesi alleviivauksen, mutta muuttaaksesi sen alleviivaavan tyylin oletusnäkymästä, joka on "money" -viiva, voit tehdä sen myös. Sen sijaan, että kiinteä linja, voit käyttää pisteitä korostamaan linkkejä. Voit tehdä tämän poistamalla edelleen alleviivan, mutta korvata se raja-pohjaisella tyyliominaisuudella:
{text-decoration: none; raja-pohja: 1px pisteviiva; }Koska olet poistanut standardin alleviivatun, katkoviiva on ainoa, joka näkyy.
Voit tehdä saman kohdan saada vihjeitä. Vain muuta raja-pohjaista tyyliä katkoviivalla:
{text-decoration: none; raja-pohja: 1px katkoviiva; }Vaihda alleviivausväri
Toinen tapa kiinnittää huomiota linkkeihisi on muuttaa alleviivan väriä. Varmista vain, että väri sopii värimallisi kanssa .
{text-decoration: none; raja-pohja: 1px kiinteä punainen; }Kaksinkertaiset kohdat
Uskottomuus kaksinkertaisten korostusten käyttämiseen on, että rajan leveys on muutettava. Jos luot 1px leveä rajan, pääset kaksinkertaiseen alleviivaan, joka näyttää yhdeltä alleviivattuna.
{text-decoration: none; raja-pohja: 3px kaksinkertainen; }Voit myös käyttää nykyistä alleviivaa tekemällä kaksinkertainen alleviivaus muiden ominaisuuksien kanssa, kuten yksi pisteviivoista:
{border-bottom: 1px kaksinkertainen; }Älkää jättäkö Linkin valtiot
Voit lisätä rajatason tyylin linkkeihisi eri valtioissa, kuten: hiiren osoitin, aktiivinen tai vierailu. Tämä voi luoda mukavan "rollover" -työkalun vierailijoille, kun käytät tätä "hover" pseudo-luokkaa. Toinen pisteytetty alleviivaus tulee näkyviin, kun viet linkin päälle:
{text-decoration: none; } a: hover {border-bottom: 1px pisteviiva; }Alkuperäinen artikkeli Jennifer Krynin. Toimittaja Jeremy Girard