Kuinka käyttää CSS: ää hyperlinkkien tyyliämiseen verkkosivuilla

Saattaa 3, 2024

Jos tunnet HTML: n, tiedät, että voit hallita verkkosivun tekstin väriä ja hyperlinkkejä. Mutta CSS-tyylitaulukoilla voit tehdä paljon enemmän. Tietyillä tunnisteilla, kuten hyperlinkkien ankkuritagilla, on niin kutsuttu pseudoluokka, joka liittyy tunnisteen eri tiloihin. Esimerkiksi hyperlinkkitunnisteessa on neljä tilaa; linkki, vieraili, leiju ja aktiivinen.

Kun linkkiä ei käytetä (ei valittu), se on linkki pseudoluokka tai tila. vieraili tila on sen jälkeen kun linkkiä on käytetty. häilyä tila on, kun hiiri siirtyy linkin ja aktiivinen tila on kun napsautat linkkiä. CSS: n taikuutta on, että linkin kutakin tilaa ohjataan itsenäisesti pseudoluokkien kautta. Joten voit asettaa erilaisia ominaisuuksia kullekin tilalle. Voit käyttää mitä tahansa ominaisuutta, joka liittyy hyperlinkin ankkuritunnisteeseen CSS: ssä.

Oheisessa esimerkissä asetamme linkin tilan punaiseksi, vierailun tilan purppuraksi (# 400040), hiiren osoittimen ja aktiivisen tilan punaiseksi, alleviivattuksi ja kursivoituksi.

Huomautus--Nuoli

osoittaa, että koodi on kääritty toiselle riville ja sen pitäisi todella olla kaikkien yhdellä rivillä.

Kuten huomaat, olemme asettaneet väriominaisuuden punaiseksi kaikissa tiloissa paitsi vierailulle, jonka asetimme violetiksi. Koska haluamme vain hyperlinkin alleviivatun leijautumis- ja aktiivitiloissa, olemme asettaneet tekstin koriste-ominaisuuden arvoksi mitään mitään kahden muun tilan osalta. Viimeinkin olemme asettaneet fonttityylin kursiiviksi hover- ja aktiivitiloille, mikä aiheuttaa tekstin kursivoinnin, kun ohitat linkin tai napsautat sitä, ja olemme asettaneet tekstin koristeen takaisin alleviivaukseksi. Tämä on vain yksinkertainen esimerkki. Voit tehdä tyylistäsi niin yksinkertaisia tai hienoja kuin haluat. Muutamia asioita on kuitenkin muistettava.

Web-selaimet eroavat toisistaan siitä, kuinka ne käsittelevät tätä. Yleensä, jos asetat ominaisuuden tiettyyn arvoon, sen perivät (siirtävät) kaikki sen jälkeen luetellut tilat. Yllä olevassa esimerkissä ensimmäinen koodi, joka oli lueteltu koodissamme, oli linkkitila ja asetimme väriominaisuuden punaiseksi. Suurimman osan ajasta tämä siirretään kolmeen muuhun osavaltioon, ellemme muuta sitä koodilla, kuten teimme vieraillun valtion osalta. Lisäksi, jos emme olisi asettaneet tekstin koristelua takaisin alleviivaukseksi, hover- ja aktiivitilojen tekstiä ei olisi alleviivattu, koska sammutimme sen ensimmäisessä tilassa. Mutta et voi luottaa siihen, että kaikki selaimet tekevät tämän. Siksi on parasta asettaa kaikki ominaisuudet kullekin tilalle erikseen.

Kun suunnittelet hienoja linkkejä, älä tee suuria muutoksia tilojen välillä, kuten esimerkiksi lisää tekstin koko dramaattisesti. Tämän vuoksi selain lataa sivun uudelleen ja kävijät ovat erittäin järkyttyneitä kanssasi.

Kaskadijärjestys vaikuttaa järjestykseen, jossa listaat näiden pseudoluokkien koodin. Keskustelemme kaskadijärjestyksestä myöhemmässä opetusohjelmassa. Muista nyt, että konfliktien estämiseksi koodaa tilat yllä käytetyssä järjestyksessä; linkki, vieraili, leiju ja aktiivinen.

Video-Ohjeita: How to use marquee tag in HTML(scrolling images and text in web page ) (Saattaa 2024).

Kuinka käyttää CSS-tyylihyperlinkkejä tyylillä verkkosivuilla, HTML: ssä, tunnisteen eri tiloihin liittyvissä pseudoluokissa, pseudoluokassa, hyperlinkissä, hyperlinkkien koodauksessa CSS: ssä, CSS-pseudoluokassa, CSS-tiloissa, tunnisteen tilassa, kuvitteellisissa linkkissä CSS: n verkkosivuilla, kuvitteelliset linkit

Edellinen Artikkeli

Seuraava Artikkeli

Aiheeseen Liittyviä Artikkeleita

tietokoneet

Kwik 2 -polun animaatio elokuvaleikkeelle tai spritelle

Saattaa 2024

Nyt voimme luoda Path Animaation. Ero lineaarisen ja reitin animaation välillä on viiva. Kummassakin animaatiossa esine liikkuu määritettyä viivaa pitkin. Kuten havaitsimme sivun kääntöanimaation...

tietokoneet

OSU-opiskelijat latautuivat

Saattaa 2024

Se tapahtui Columbuksessa, Ohiossa - kotikaupungissani. Kuulin sen tämän viikon uutisista ja se sai minut kirjoittamaan tämän artikkelin. Yhdeksälletoista opiskelijalle lähetettiin kirjeitä, joissa...