Kaunis elementtien CSS-alleviivaus. Alleviivaa html tai tekstin koristelu helpottamaan lukemista

On olemassa joukko erilaisia ​​tapoja muotoilla alleviivausta. Saatat muistaa Marcin Vicharin artikkelin "Crafting link underlines" Mediumissa. Medium-kehittäjät eivät yritä tehdä mitään hullua, he haluavat vain luoda kauniin rivin tekstin alle.

Tämä on yksinkertaisin alaviiva, mutta se on oikean kokoinen eikä mene päällekkäin kirjainten kanssa. Ja se on ehdottomasti parempi kuin oletusarvoinen alaviiva useimmissa selaimissa. Mediumin oli kohdattava haasteita saavuttaakseen tyylinsä verkossa. Kaksi vuotta myöhemmin meidän on edelleen vaikea luoda kauniita alleviivauksia.

Tavoitteet

Mitä vikaa on tavallisessa tekstinkoristeluun: alleviivaus ? Ihanteellisessa skenaariossa alaviivan tulisi toimia seuraavasti:

• sijainti perusviivan alapuolella;
• ohittaa huomiotekstit;
• muuttaa viivan väriä, paksuutta ja tyyliä;
• työskennellä monirivisen tekstin kanssa;
• työskennellä millä tahansa taustalla.

Uskon, että nämä ovat kaikki kohtuullisia vaatimuksia, mutta tietääkseni ei ole intuitiivista tapaa saavuttaa tätä CSS:n avulla.

Lähestymistapoja

Mitkä ovat nämä eri tavat, joilla voimme toteuttaa alleviivauksen verkossa?

Tässä ovat ne joita harkitsen:

• tekstin koristelu ;
• border-bottom ;
• laatikko-varjo ;
• taustakuva ;
• SVG-suodattimet;
• Underline.js(canvas);
• teksti-koriste-* .

Katsotaanpa näitä menetelmiä yksitellen ja puhutaan kunkin niistä eduista ja haitoista.

teksti-sisustus

tekstin koristelu on ilmeisin tapa alleviivata tekstiä. Käytät yhtä ominaisuutta ja se riittää. Pienillä fonttikooilla tämä saattaa näyttää hyvältä, mutta lisää fonttikokoa ja alleviivaus alkaa näyttää hankalalta.

Suurin ongelma tekstin sisustamisessa on räätälöinnin puute. Olet rajoitettu tekstin väriin ja kirjasinkokoon, eikä sitä voi muuttaa selaimen välillä. Puhumme tästä tarkemmin myöhemmin.

• helppokäyttöinen;
• sijoitettu perusviivan alapuolelle;
• ohittaa huomiotekstit oletuksena Safarissa ja iOS:ssä;
• korostaa monirivistä tekstiä;
• toimii millä tahansa taustalla.

• ei ohita alatunnisteita kaikissa muissa selaimissa;
• ei anna sinun muuttaa viivan väriä, paksuutta tai tyyliä.

raja-ala

border-bottom löytää hyvän tasapainon yksinkertaisuuden ja muokattavuuden välillä. Tämä lähestymistapa käyttää vanhaa hyvää CSS border -ominaisuutta, mikä tarkoittaa, että voit helposti muuttaa väriä, paksuutta ja tyyliä.

Tältä reuna-ala näyttää upotetuille elementeille.

Suurin haittapuoli on alleviivauksen etäisyys tekstistä, se on kokonaan huomiotekstien alapuolella. Voit korjata tämän asettamalla elementit inline-block-tilaan ja pienentämällä rivin korkeutta , mutta silloin menetät mahdollisuuden rivittää tekstiä. Sopii yksittäisiin linjoihin, mutta ei sovi mihinkään muualle.

Lisäksi voimme käyttää tekstivarjoa peittämään rivin osan rivin sisäisten elementtien vieressä simuloimalla tätä käyttämällä samaa väriä kuin tausta. Toisin sanoen tämä tekniikka toimii vain yksinkertaisella yksivärisellä taustalla ilman liukuvärejä, kuvioita tai kuvia.

Tällä hetkellä käytämme jo neljää kiinteistöä yhden rivin suunnittelussa. Se on paljon enemmän työtä kuin pelkän tekstin koristelun lisääminen.

• voi ohittaa huomiotekstejä käyttämällä text-shadow ;
• voi muuttaa väriä, painoa ja linjatyyliä;
• voit käyttää värien ja rohkeuden siirtymiä ja animaatioita;
• toimii monirivisen tekstin kanssa, ellei tekstin sisäistä estoa ole käytössä;
• Toimii millä tahansa taustalla, kunhan et käytä tekstivarjoa.

• Liian matalalla ja liikkunut vaikeasti;
• monia lisäominaisuuksia käytetään oikeaan toimintaan;
• tekstivarjoa käytettäessä tekstin korostaminen näyttää rumalta.

laatikko-varjo

box-shadow piirtää aliviivan käyttämällä kahta sisävarjoa: toinen luo suorakulmion ja toinen piilottaa osan siitä. Tämä tarkoittaa, että tarvitset yksivärisen taustan, jotta tämä toimii.

Voit käyttää samaa temppua tekstin varjostuksen kanssa täyttääksesi alleviivausten ja huomiotekstien väliset aukot. Mutta jos alleviivauksen väri eroaa tekstin väristä - tai se on vain tarpeeksi ohut - viiva ei törmää huomiotekstien kanssa niin paljon kuin tekstin koristelussa .

• voit muuttaa viivan väriä ja paksuutta;
• toimii monirivisen tekstin kanssa.

• ei salli alleviivauksen tyylin vaihtamista;
• Ei toimi millään taustalla.

taustakuva

Taustakuvamenetelmä on lähinnä sitä, mitä haluamme, ja siinä on vähiten haittoja. Ajatuksena on käyttää lineaarista gradienttia ja tausta-asentoa luomaan kuva, joka toistuu tekstirivien alla.

Jotta tämä lähestymistapa toimisi, tekstin on oltava vakionäytössä: inline; .

Seuraava vaihtoehto toimii ilman lineaarigradienttia, tehosteita varten voit lisätä oman taustakuvasi.

• voidaan sijoittaa perusviivan alapuolelle;
• voi ohittaa huomiotekstielementtejä käyttämällä text-shadow ;
• toimii mukautettujen kuvien kanssa;
• rivittää useita tekstirivejä;
• Toimii millä tahansa taustalla, kunhan et käytä tekstivarjoa.

• Kuvan koko voi vaihdella näytön resoluution, selaimen ja suurennuksen mukaan.

SVG-suodattimet

Olen pelannut tällä menetelmällä melko vähän. Voit luoda SVG-viivasuodattimen, joka piirtää viivan ja laajentaa sitten tekstiä peittääkseen sen osan viivasta, jonka haluamme olevan läpinäkyvä. Voit sitten antaa suodattimelle tunnuksen ja viitata siihen CSS:ssä, kuten filter: url('#svg-underline') .

Tämän lähestymistavan etuna on, että läpinäkyvyys saavutetaan ilman tekstivarjoa, mikä tarkoittaa, että annamme huomiotekstien näkyä millä tahansa taustalla, mukaan lukien kaltevuudet ja taustakuvat! Tämä toimii vain yhdellä tekstirivillä, joten pidä se mielessä.

Tältä se näyttää Chromessa ja Firefoxissa:

Tuki IE:ssä, Edgessä ja Safarissa on ongelmallista. SVG-suodattimen tukea on vaikea testata CSS:ssä. Voit käyttää @supports-direktiiviä suodattimen kanssa, mutta tämä tarkistaa vain suodatinviittauksen toimivuuden, ei itse suodattimen toimivuutta. Yritykseni päättyi ikävään selaimen ominaisuuksien määrittämiseen, tämä on menetelmän huomattava haittapuoli.

• voidaan sijoittaa perusviivan alapuolelle;
• voi ohittaa laajennuselementit;
• mahdollistaa viivan värin, paksuuden ja tyylin muutokset;
• toimii millä tahansa taustalla.

• ei toimi monirivisen tekstin kanssa;
• ei toimi IE:ssä, Edgessä ja Safarissa, mutta tekstikoristelua voi käyttää varavaihtoehtona, se näyttää hyvältä Safarissa.

Underline.js (kanvas)

Underline.js on kiehtova. Minusta on vaikuttavaa, mitä Wenting Zhang on saanut aikaan JavaScript-taitollaan ja yksityiskohtiin huomioimalla. Jos et ole nähnyt Underline.js:n teknistä demoa, lopeta lukeminen ja odota hetki. Hän pitää myös yhdeksän minuutin puheen siitä, miten se toimii, mutta kirjoitan sen lyhyesti: alleviivaus piirretään elementeillä . Tämä on uusi lähestymistapa, joka toimii yllättävän hyvin.

Tarttuvasta nimestä huolimatta Underline.js on vain tekninen esittely. Tämä tarkoittaa, että et voi vain kytkeä sitä projektiisi vaihtamatta koodia.

Ajattelin mainita tämän todisteena konseptista on mahdollista luoda upeita interaktiivisia alleviivauksia, mutta sinun on kirjoitettava oma JavaScript, jotta se toimii.

Uusia tekstinkoristeominaisuuksia

Muistatteko, että lupasin puhua enemmän tekstinkoristamisesta. Aika on koittanut.

Tämä ominaisuus toimii erinomaisesti yksinään, mutta voit lisätä joitain kokeellisia ominaisuuksia muokataksesi alleviivauksen ulkoasua.

• teksti-koriste-väri
• teksti-koristelu-ohita
• teksti-koriste-tyyli

Mutta älä innostu liikaa... Selaintuki on kuten aina. Niin se menee.

teksti-koriste-väri

Text-decoration-color -ominaisuuden avulla voit muuttaa alleviivauksen väriä erillään tekstin väristä. Tämän ominaisuuden tuki on parempaa kuin odotat – se toimii Firefoxissa ja etuliitteellä Safarissa. Tässä on saalis: jos sinulla on huomiotekstejä, Safari alleviivaa tekstin päälle.

teksti-koristelu-ohita

Text-decoration-skip -ominaisuus mahdollistaa huomiotekstien ohituksen alleviivatussa tekstissä.

Tämä ominaisuus on epästandardi ja toimii tällä hetkellä vain Safarissa -webkit-etuliitteellä. Safari ottaa tämän ominaisuuden käyttöön oletusarvoisesti, joten huomiotekstejä ei aina yliviivata.

Jos käytät Normalisointia, huomaa, että viimeisimmät versiot poistavat tämän ominaisuuden käytöstä selaimen johdonmukaisen toiminnan vuoksi. Ja jos haluat, että alleviivaus ei vaikuta huomioteksteihin, sinun on aktivoitava se manuaalisesti.

teksti-koriste-tyyli

Tekstikoristelutyylinen ominaisuus tarjoaa samat tyylivaihtoehdot kuin reunatyylinen ominaisuus, johon on lisätty aaltoilevaa tyyliä.

Tässä on luettelo käytettävissä olevista arvoista:

• katkonainen
• pilkullinen
• kaksinkertainen
• kiinteä

Tällä hetkellä tekstinkoristetyylinen ominaisuus toimii vain Firefoxissa, tässä on kuvakaappaus siitä:

Mitä puuttuu

Text-decoration-* -ominaisuuksien sarja on paljon intuitiivisempi käyttää kuin muita CSS-koristeiluominaisuuksia. Mutta jos katsomme tarkemmin, ei ole tarpeeksi tapoja asettaa viivan paksuutta tai sijaintia tarpeisiimme.

Pienen tutkimuksen jälkeen löysin pari muuta ominaisuutta:

• teksti-alleviivaus-leveys
• teksti-alleviivaus-sijainti

Nämä näyttävät olevan CSS:n varhaisia ​​luonnoksia, mutta niitä ei koskaan otettu käyttöön selaimissa kiinnostuksen puutteen vuoksi.

johtopäätöksiä

Joten mikä on paras tapa alleviivata?

Pienelle tekstille suosittelen tekstinkoristelun käyttöä ja optimistista tekstinkoriste-ohita lisäystä. Se näyttää hieman tahmealta useimmissa selaimissa, mutta alleviivaus on aina ollut tällaista selaimissa, eivätkä ihmiset vain huomaa. Lisäksi on aina mahdollisuus, että jos sinulla on kärsivällisyyttä, tuo alleviivaus näyttää hyvältä jonakin päivänä ilman, että sinun tarvitsee muuttaa mitään selaimien tapaa.

Leipätekstissä on järkevää käyttää taustakuvaa . Tämä lähestymistapa toimii, näyttää hyvältä, ja siihen on olemassa Sass-sekoituksia. Voit periaatteessa ohittaa tekstin varjon, jos alleviivaus on ohut tai eri värinen tekstistä.

Käytä yksittäisiä tekstirivejä varten border-bottom ja muita ominaisuuksia.

Ja jos tarvitset huomiotekstejä kaltevuutta tai kuvan taustaa vasten, kokeile SVG-suodattimia. Tai vain vältä alaviivojen käyttöä.

Jatkossa, kun selaimen tuki paranee, ainoa vastaus on teksti-koriste-*-ominaisuusjoukko.

Suosittelen myös tutustumaan Benjamin Woodroffen artikkeliin CSS Underlines Suck, joka käsittelee samoja asioita.

Alleviivaa lohkoelementtejä, kuten tagia

voidaan tehdä kahdella tavalla. Aseta esimerkiksi tekstin alla oleva rivi lohkon koko leveydelle riippumatta tekstin määrästä. Ja alleviivaa myös vain teksti. Seuraavaksi tarkastellaan molempia vaihtoehtoja.

Viiva tekstin alla koko lohkon leveydeltä

Jos haluat luoda rivin tekstin alle, lisää elementtiin style-ominaisuus border-bottom, jonka arvo on sekä viivan paksuus, tyyli että väri (esimerkki 1).

Esimerkki 1. Täysleveä viiva

HTML5 CSS 2.1 IE Cr Op Sa Fx

Esimerkkiteksti

Etäisyyttä rivistä tekstiin voidaan säätää lisäämällä H1-valitsimeen ominaisuus täyte-ala. Tämän esimerkin tulos on esitetty kuvassa. 1.

Alleviivaa teksti

Jos haluat alleviivata vain tekstiä, sinun on käytettävä tekstin koristelu-ominaisuutta arvon alleviivauksella ja lisättävä se jälleen H1-valitsimeen (esimerkki 2).

Esimerkki 2. Viivan leveys

HTML5 CSS 2.1 IE Cr Op Sa Fx

Esimerkkiteksti

Musta otsikko herättää huomion, vaikka se on musta eikä valkoinen.

Tämän esimerkin tulos on esitetty kuvassa. 2.

Tekstikoristeluominaisuutta käytettäessä viiva kiinnittyy tiukasti tekstiin, joten sen sijaintia ja tyyliä ei voida määrittää.

Voit luoda erilaisia ​​alleviivauksia HTML:ään: alleviivaus, yliviivaus, tekstin läpiviivaus jne. Yhdistetään tämä ominaisuus edelliseen ja saadaan:

Toinen rivi näyttää kuinka kaikki on kirjoitettu yhdelle riville tekstikoristeella.

text-decoration-style — tekstin alleviivaustyyli

Vaihtoehto määrittää /-linkin koristeviivan ulkoasun. Uudet CSS-ohjeet ovat lisänneet aaltoilevia ja kaksinkertaisia ​​arvoja, joten niitä on nyt viisi:

• kiinteä - kiinteä viiva;
• double - double (yllä olevasta ensimmäisestä esimerkistä);
• pisteviiva - koostuu pisteiden sarjasta;
• katkoviiva - voit luoda katkoviivan CSS-alleviivauksen;
• aaltoileva - upea aaltoviiva.

text-underline-position - CSS-alleviivauspaikannus

Tämän ominaisuuden avulla voit hallita viivan sijaintia suhteessa kirjasinmerkkiin.
Saatavilla on yhteensä 4 vaihtoehtoa:

• auto — sijaitsee mahdollisimman lähellä tekstin perusviivaa;
• alle - fontin alimman reunan alapuolelle;
• vasen ja oikea - vasen/oikea viestit, jotka näytetään pystysuunnassa.

Tässä on visuaalinen ero tekstin alleviivauksen ja automaattisen alleviivauksen välillä:

Ero on mielestäni aika selvä.

text-decoration-skip - poista elementtien alleviivaukset

Vaihtoehtoa käyttämällä voit peruuttaa (ohittaa) joidenkin HTML-rivin elementtien koristelun. Ymmärtääkseni paremmin tilojen, esineiden, laatikkokoristelun, reunojen, musteen hyväksyttäviä arvoja kopioin kuvan edellisestä huomautuksesta:

Toisin sanoen esimerkiksi mustetta käyttämällä voit tehdä CSS:ssä alaviivan, joka ei leikkaa merkkien kanssa. Objektien arvon avulla voit ohittaa rivielementtejä (inline-block) - lisää jänne, ja yhtenäinen viiva katkeaa sopivassa paikassa:

Laatikon koristelu, välilyönnit, reunat -parametreja selaimet tukevat paljon huonommin, joten niiden tulokset eroavat joskus odotetuista. Tässä on tekstin koristelun yhteensopivuuden/tuen tila kirjoitushetkellä:

Muita temppuja linkkien alleviivaamiseen

Aloittelijat kysyvät usein tyypillisiä kysymyksiä aiheesta, joten päätimme myös harkita niitä. Yleinen esimerkki on aivan alareunassa selitysten jälkeen.

Kuinka poistaa linkin alleviivaus

a:hover (tekstin koristelu: alleviivaus; )

Molemmissa alla olevissa esimerkeissä voit ymmärtää osoittimen toiminnan logiikan: joko määrität ensin linkin alleviivauksen CSS:ssä ja poistat sen sitten osoittimesta tai päinvastoin.

Jos sinulla on muita kysymyksiä aiheesta, kysy ne kommenteissa. Yritämme tarkastella sitä myöhemmin tai antaa sinulle vihjeitä vastauksissa. Pääasia tässä asiassa on harjoittelu - kokeile lisätä tekstinkoristevaihtoehdolle erilaisia ​​ominaisuuksia suoraan esimerkeissä tai luo oma testitiedosto. Toivomme, että kaikki on tullut selväksi tekstin ja linkkien alleviivauksesta CSS/HTML:ssä.

Vaikka alleviivausta käytetään perinteisesti tekstilinkkien suunnitteluun, on myös hyväksyttävää käyttää muita tapoja muuttaa linkkien ulkoasua. Tässä muutama niistä:

• linkit ilman alleviivausta;
• koristeellinen korostus;
• korostus taustavärillä;
• puitteet;
• linkin vieressä oleva kuva.

Linkit ilman alleviivauksia

Tekstilinkkien alleviivauksesta on jo tullut tietty standardi ja merkki siitä, että tämä ei ole vain tekstiä, vaan linkki. Tämä on muuten yksi niistä syistä, miksi sinun ei pitäisi käyttää alleviivausta tavalliseen tekstiin - käyttäjät luulevat käsittelevänsä linkkiä. CSS:n ansiosta verkkosivujen kehittäjillä on nyt alleviivauksen lisäksi vaihtoehtoinen vaihtoehto - linkkien luominen ilman alleviivausta. Oikein käytettynä tämä linkkisuunnittelu voi jopa antaa sivustolle tietyn vaikutuksen. Sinun tarvitsee vain tehdä käyttäjälle selväksi, mikä on linkki ja mikä tavallinen teksti, erottelemalla ne esimerkiksi värin perusteella. Voit myös tehdä sen niin, että kun viet osoitinta, linkki alleviivataan, muuttaa väriään tai molempia tehosteita käytetään samanaikaisesti.

Esimerkki 1. Ei alleviivauksia linkeissä

:hover- ja :visited-pseudo-luokkien ei tarvitse lisätä tekstinkoristelua, ne perivät valitsimen ominaisuudet.

Linkkien alleviivaus viemällä osoitinta niiden päälle hiiren osoittimella

Jos haluat lisätä alleviivauksen linkkeihin, joissa on tekstikoristelu : none , sinun tulee käyttää pseudoluokkaa :hover. Se määrittää linkin tyylin, kun hiiren osoitin liikkuu sen päällä. Jäljelle jää vain pseudoluokan tekstinkoriste-ominaisuus lisääminen alleviivauksella (esimerkki 2).

Esimerkki 2: Linkkien alleviivaus

Koristeellinen linkin korostus

Linkkien alleviivaus voidaan asettaa ei vain yhtenäisellä viivalla, vaan esimerkiksi katkoviivalla. Tätä varten sinun on käytettävä border-bottom -ominaisuutta, joka luo rivin elementin alaosaan. Määrittämällä yksi tämän ominaisuuden argumenteista, katkoviiva , saamme katkoviivan alaviivan. Esimerkki 3 näyttää, kuinka punaisille linkeille asetetaan sininen katkoviiva, kun viet hiiren osoittimen niiden päälle.

Esimerkki 3: Linkkien alleviivaus

Yllä olevaa menetelmää käytettäessä normaalin tekstin alleviivauksen alapuolelle ilmestyy katkoviiva. Siksi linkityyliin kannattaa lisätä tekstikoristelu arvolla none, jotta et saa kahta riviä samanaikaisesti (kuva 1).

Riisi. 1. Korosta linkki katkoviivalla

Pisteviivaa ei tarvitse käyttää esimerkiksi kaksoisviivan luomiseen, vaan sinun on määritettävä arvo, kuten esimerkissä 4 on esitetty.

Esimerkki 4: Kaksoisalleviivauslinkit

Muutamalla viivan paksuutta, tyyppiä ja väriä saat monia erilaisia ​​tehosteita.

Käytä taustaväriä

Jos haluat lisätä värillisen taustan linkkiin, käytä taustaominaisuutta ja määritä sille väri missä tahansa käytettävissä olevassa muodossa. Vastaavasti voit käyttää pseudoluokkaa :hover, jolloin linkin alla oleva taustaväri muuttuu, kun viet hiiren sen päälle (esimerkki 5).

Riisi. 2. Muuta taustaväriä, kun siirrät hiiren linkin päälle

Kehys linkin ympärille

Esimerkki 6 näyttää, kuinka reunuksen väriä muutetaan border-ominaisuuden avulla. Tekstin alleviivaus tekstikoristeella voidaan poistaa tai jättää ennalleen.

Esimerkki 6. Linkkien reunavärin muuttaminen

Jotta kehys ei tarttuisi tekstiin, esimerkissä marginaalit asetetaan sen ympärille täyttämällä. Voit myös lisätä taustan kehyksen kanssa käyttämällä tausta-ominaisuutta.

Jos haluat lisätä kehyksen linkkeihin, kun viet hiiren niiden päälle, varmista, että teksti ei liiku tässä tapauksessa. Helpoin tapa saavuttaa tämä on lisätä näkymätön reunus linkin ympärille ja muuttaa sitten reunuksen väriä käyttämällä pseudoluokkaa :hover. Läpinäkyvä väri määritetään käyttämällä läpinäkyvää avainsanaa, muuten tyyli ei muutu.

A (reuna: 1px kiinteä läpinäkyvä; /* Läpinäkyvä reunus linkkien ympärillä */ ) a:hover (reunus: 1px tasainen punainen; /* Punainen reunus vietäessä hiiri linkin päälle */ )

Kuvat ulkoisten linkkien vieressä

Ulkoinen linkki on linkki, joka osoittaa toiselle sivustolle. Tällainen linkki ei eroa sivuston paikallisista linkeistä. Voit määrittää, minne se johtaa, vain katsomalla selaimen tilapalkkia. Mutta kaikki eivät katso tätä linjaa eivätkä aina. Jotta käyttäjät voivat erottaa ulkoiset linkit tavallisista linkeistä, ne tulee korostaa jollakin tavalla. Laita esimerkiksi linkin viereen pieni kuva, joka osoittaa, että linkin tila on erilainen (kuva 3).

Kuvien käyttämisessä ulkoisten linkkien lähellä on se hyvä puoli, että näin suunniteltu linkki eroaa selvästi tavallisista sivuston sisäisistä linkeistä ja oikein valittu kuva kertoo kävijälle, että linkki johtaa toiselle sivustolle. Paikallisten ja ulkoisten linkkien tyylin erottamiseksi käytämme määritteen valitsinta. Koska kaikki linkit muille sivustoille kirjoitetaan protokollalla, esim. http, riittää, että asetetaan tyyli niille linkeille, joiden href-attribuutin arvo alkaa http://. Tämä tehdään käyttämällä a(...)-konstruktia, kuten esimerkissä 7 on esitetty.

Taustakuva sijaitsee linkin oikealla puolella ja jotta teksti ei mene päällekkäin kuvan kanssa, oikealle lisätään marginaali täyte-oikea-ominaisuuden kautta. Jos haluat lisätä kuvan vasemmalle, korvaa 100% arvolla 0 ja täyte-oikea täyttö-vasemmalla .

Protokolla voi olla paitsi http, myös ftp ja https heille tämä resepti lakkaa toimimasta. Joten monipuolisuuden vuoksi on parempi vaihtaa valitsin muotoon a, se sanoo, että tyyliä tulisi soveltaa kaikkiin linkkeihin, joiden osoite sisältää //.

Tältä sivulta löydät esimerkkejä HTML-linkkien muuttamisesta CSS:n avulla, jonka avulla voit estää linkit, ikonilinkit, ilman alleviivauksia, pyöristetyillä kulmilla, muuttaa niiden välistä etäisyyttä ja paljon muuta. Jatkossa näiden esimerkkien perusteella voit luoda erilaisia ​​vaihtoehtoja sivuston navigointivalikoihin.

Ennen kuin alat tutkia esimerkkejä, haluan tehdä pienen selvennyksen. Kaikissa esimerkeissä käytetään selvyyden vuoksi CSS-pseudoluokkaa, jota käytetään linkkien tyylien muuttamiseen, kun hiiren osoitin on niiden päällä. On sanottava, että tämä käytäntö on yleinen ja sitä käytetään tavalla tai toisella lähes kaikilla Internet-sivustoilla.

Tässä esimerkissä poistamme alleviivauksen linkeistä ja lisäämme tai poistamme ne viemällä hiiren osoitinta päälle.

HTML- ja CSS-esimerkki: kuinka poistaa ja lisätä alleviivauksia linkeistä

Esimerkin kuvaus

1. Oletusarvoisesti kaikki suositut selaimet lisäävät linkkeihin alleviivauksen, jota ohjaa CSS-ominaisuus. Eli oletusarvoisesti tämän linkkien ominaisuuden arvo on alleviivattu . Tämän tiedon avulla muutamme linkkien alleviivauksia niiden eri tiloissa.

Aluksi linkkien alleviivaus on yhtenäinen ohut viiva, joka on painettu lähes lähelle tekstiä. Ja useimmissa tapauksissa tämä vaihtoehto on aivan riittävä. Joskus suunnittelu edellyttää kuitenkin, että linkit alleviivataan katkoviivalla yhtenäisen viivan sijaan tai että alleviivauksen ja linkkien välinen etäisyys on standardia suurempi tai että itse alleviivaus on lihavoitumpi. Ja joskus sinun on tehtävä jonkinlainen eksoottinen alleviivaus, esimerkiksi aaltoilevalla tai monivärisellä viivalla. Kaikkia näitä vaihtoehtoja käsitellään tässä esimerkissä.

HTML- ja CSS-esimerkki: Pisteisen linkin alleviivaus

Esimerkin kuvaus

1. Ensin poistamme standardin alleviivauksen kaikista linkeistä, koska käytämme epästandardeja menetelmiä. Sitten lisäämme alareunuksen ensimmäiseen linkkiin CSS-ominaisuuden avulla ja teemme siitä katkoviivan. Tämä on alaviivamme. Alleviivauksen poistamiseksi, kun viet hiiren osoittimen linkin päälle, käytämme pseudoluokkaa ja teemme kehyksen taustasta samanlaisen kuin sivun taustan, eli piilotamme sen. Teoriassa olisi parempi tehdä kehyksen tausta läpinäkyväksi, mutta IE6 ymmärtää tämän merkityksen väärin.
2. Toisella linkillä teemme samoin kuin ensimmäisellä, mutta piirrämme vain kiinteän viivan. Voit lisätä etäisyyttä tekstistä alleviivaukseen antamalla linkille pienen alamarginaalin käyttämällä CSS-ominaisuutta.
3. Kolmannessa linkissämme on monivärinen alleviivaus, joten lisäämme sen taustakuvan avulla. Tätä varten käytämme pientä kuvaa, jonka yhdistämme CSS:n kautta. Sijoita tausta linkin alaosaan (0 100 %) ja anna sen kopioida vain vaakasuunnassa (toista-x). Alleviivaus on valmis, mutta se on liian lähellä tekstiä tämän korjaamiseksi, lisäämme alla olevaan linkkiin pienen sisennyksen. Se siitä.
4. Vanhoissa IE6:ssa ja IE7:ssä voi olla ongelmia alaviivan näyttämisessä ensimmäisessä ja toisessa linkissä. Tämän korjaamiseksi lisää zoom :1 -ominaisuus, joka sisältää ns layout. Tämä ominaisuus on virheellinen ja vain nämä selaimet ymmärtävät sen, joten on parempi ottaa se käyttöön ehdolliset kommentit.

Hyvin usein valikon luomiseksi sinun ei tarvitse tehdä vain tekstilinkkejä, vaan estolinkkejä, joissa aktiivinen alue on sekä itse teksti että tietty alue sen ympärillä.

Esimerkin kuvaus

1. Lohkolinkien luomiseen käytämme CSS-ominaisuutta :block, joka muuttaa ne lohkoelementeiksi, jotka luovat rivinvaihdon ennen ja jälkeen niitä. Jos rivinvaihtoja ei tarvita, voit korvata arvon inline-blockilla.
2. Koska linkkimme ovat nyt lohkoja, voimme tarvittaessa muuttaa niiden leveyttä (CSS) tai korkeutta (CSS).
3. Tässä esimerkissä emme määritä linkkien korkeutta ollenkaan, vaan annamme niille yksinkertaisesti sisäisen täytön (CSS), joka laajentaa lohkoja.

Esimerkin kuvaus

1. Kaikki on hyvin yksinkertaista - CSS-ominaisuuden avulla lisäämme halutun kehyksen kohdistimen alla oleviin linkkeihin. Huomaa kuitenkin, että lisäämme täsmälleen saman kehyksen tavallisiin linkkeihin, mutta teemme niistä samanvärisiä kuin sivun tausta. Eli yksinkertaisesti piilotamme kehyksen toistaiseksi. Tämä tehdään niin, että kun viet hiiren osoitinta, linkit eivät ala "hyppäämään" kehyksen piirtämisen vuoksi.

Sen sijaan, että reunan väri vastaa sivun taustaa, se voitaisiin asettaa läpinäkyväksi ja tehdä läpinäkyväksi, mutta kuten sanoin, IE6 ei käsittele sitä oikein.

HTML ja CSS Esimerkki: 3D-linkkien luominen

Esimerkin kuvaus

1. CSS-ominaisuuden avulla lisäämme linkkeihin kehyksiä ja määritämme niiden avulla niiden värin. Samanaikaisesti ilmoitamme vaalean värisävyn vasemmalle ja yläreunalle ja tumman sävyn ala- ja oikealle. Tämän värijakauman ansiosta saamme linkkejä, jotka näyttävät kolmiulotteisilta painikkeilta.
2. Jotta näyttäisi siltä, ​​että painikkeita painetaan, kun siirrät hiiren osoitinta, käännämme linkkien kehysvärit pseudoluokan avulla. Lisää napsautustehostetta varten aseta suhteellinen sijainti (CSS :suhteellinen) ja tee yhden pikselin siirtymä ylöspäin (CSS :-1px).
3. No, jotta kaikki olisi todella kaunista, asetimme kursorin alla olevien linkkien tekstin ja taustavärin hieman tavallista tummemmaksi. Valmis.

Tässä esimerkissä teemme linkit kuvakkeisiin, jotka eivät sisällä vain kuvia näistä kuvakkeista, vaan myös tekstin niiden alla. Voit kuitenkin jatkossa muuttaa niitä helposti ja jättää esimerkiksi vain kuvakkeet.

Ennen työn aloittamista valmistelemme useita kuvakkeita kahdessa sarjassa - tavallisille linkeille ja linkeille hiiren kohdistimen alla. Toisen sarjan tulisi olla ulkoisesti erilainen kuin ensimmäinen, meillä tämä ilmaistaan ​​väripaletissa.

Esimerkin kuvaus

1. Koodin lyhentämiseksi käytämme linkeissä kahta luokkaa - "linkit" (yhteisillä ominaisuuksilla) ja "image", "audio", "video" (henkilökohtainen jokaiselle linkille). Tämä kohta on kuvattu yksityiskohtaisesti kohdassa luokat CSS-viittaus.
2. Ikonimme ovat kooltaan 50 x 50 pikseliä, ja ne näkyvät linkeissä taustana (CSS), jonka keskitämme yläreunaan (50% 0) ja estämme sitä toistumasta (ei toistoa).
3. Lisäämme linkkeihin täytön (CSS), jotta linkkien teksti ei tartu reunoihin. Samanaikaisesti teemme ylimmän sisennyksen kuvakkeiden korkeuden verran, jotta teksti ei mene päällekkäin niiden kanssa, koska kuvakkeet ovat tausta.
4. Jos linkeissä on hyvin vähän tekstiä, kuvakekuvat leikataan pois sivuilta. Tämän estämiseksi asetamme linkit minimileveyteen (CSS) niin, että se on vähintään yhtä suuri kuin kuvakkeiden leveys. Meidän tapauksessamme meidän on saatava vähimmäisleveys 50 pikseliä, mutta asetamme sen 40 pikseliksi, koska toinen 10 kuvapistettä lisätään sivupehmusteen vuoksi.
5. Jotta vähimmäisleveys toimisi, muunnamme linkit rivin sisäisiksi lohkoiksi (CSS: inline-block).

IE6:n on "parannettava" hieman:

1. IE6 ei ymmärrä vähimmäisleveyden ominaisuutta, mutta se tulkitsee CSS-ominaisuuden vähimmäisleveydeksi. Siksi käytämme siihen yksinkertaista hakata joka korjaa tämän ongelman.

Tässä esimerkissä pyöristetään linkkien kulmat jollakin menetelmistä pyöristää kulmia, kuvataan seuraavassa alaosassa. Emme harkitse CSS 3:n käyttöä, koska siellä kaikki on hyvin yksinkertaista, mutta pyöristykset olisi parempi tehdä kuvien avulla.

Tätä varten leikkaamme ensin useita tyhjiä kuvia kahdessa sarjassa - tavallisille linkeille ja kohdistimen alla oleville linkeille. Meille se eroaa kuvien varjojen läsnäolossa/puuttumisessa.

Esimerkin kuvaus

Emme käsittele itse pyöristystekniikkaa tarvittaessa, voit lukea siitä sivuston vastaavasta osiosta.

1. Käyttämällä CSS-ominaisuutta :inline-block teemme linkit inline-lohkoja. Tämä on tarpeen erityisesti, jotta voimme antaa linkeille tarkan korkeuden, joka vastaa kuvien korkeutta.
2. Poista alleviivaus ja keskitä teksti (CSS:center). Yleensä meidän tapauksessamme tekstiä ei tarvitse keskittää, koska linkit mukautuvat niissä olevan tekstin kokoon, eikä sitä yksinkertaisesti ole mihinkään tasata. Mutta jos sinun on lisättävä linkkien leveyttä (esimerkiksi jopa 150 pikseliä), tämä kohdistus on hyödyllinen.
3. Muuttaaksemme linkkien ulkoasua, kun ne ovat hiiren kohdistimen alla, lisäämme tyyleihin lisävalitsimia CSS-pseudo-luokassa, jossa osoitamme kuvien osamme, mutta ilman varjoa.

IE6:lle ja IE7:lle yhdistämme lisätyylejä käyttämällä ehdolliset kommentit, mutta muutamme itse CSS-koodia hieman ja teemme siitä erilaisen kuin koodissa käytetty tapoja pyöristää kulmia:

1. Muutoksen ydin on, että lausekkeen avulla integroimme linkkien sisään samat kaksi tagia, mutta vain ilman tyylejä sisältäviä attribuutteja. Sen sijaan lisäämme tunnisteisiin luokat “left_bok” ja “right_bok”, lisäämme niille tyylejä ja kirjoitamme ne alle. Nämä tyylit ovat lähes täsmälleen samat kuin CSS-pääkoodissa, mutta tässä kaikkia kuvia käytetään tagien taustana.

Linkkien pyöristetyt kulmat (vaihtoehto kaksi)

Katsotaanpa toista esimerkkiä linkkien kulmien pyöristämisestä, mutta käyttämällä neljää erillistä kulmakuvaa.

Esimerkin kuvaus

Tässäkään emme puhu itse pyöristyksestä, vaan hahmotellaan vain tunnusmerkit.

1. Käyttämällä CSS-ominaisuutta :inline-blok muunnamme linkit tekstin sisäisiksi lohkoiksi. Sitten poistamme niistä alleviivauksen, lisäämme kehyksen ja kohdistamme tekstin keskelle.
2. Koska pseudoelementit, joilla kulmia pyöristetään, sijaitsevat linkkien sisällä, myös niiden sisältö on keskitetty, joten CSS-ominaisuuden lisäämät kuvakulmat eivät sijoiteta kulmiin haluamallamme tavalla. Korjataksemme tämän lisäämällä siihen :left, joka palauttaa selaimien oletusarvoisesti käyttämän arvon.