Tenglar eru mjög algengar á vefsíðum, en margir vefhönnuðir gera sér grein fyrir því hversu mikið þeir hafa með CSS til að vinna og stjórna tenglum sínum á áhrifaríkan hátt. Þú getur skilgreint tengla við heimsótt, sveima og virk ríki. Þú getur einnig unnið með landamæri og bakgrunn til að gefa tenglum þínum meira pizzaz eða láta þær líta út eins og hnappar eða jafnvel myndir.
Flestir vefur hönnuðir byrja með því að skilgreina stíl á "a" merkinu:
a {litur: rauður; }Þetta mun stíll alla þætti tengilinn (sveima, heimsótt og virk). Til að stilla hverja hluti fyrir sig, verður þú að nota hlekk gervitíma.
Link Pseudo-Classes
Það eru fjórar helstu gerðir af gervitunglaflokkum sem þú getur skilgreint:
- : hlekkur - þetta er sjálfgefið stíll fyrir tengilinn
- : heimsótt - eftir að smellt er á tengil
- : sveima - eins og mús er stillt yfir tengil (fyrir smelli)
- : Virkt - rétt eins og smellt er á tengilinn
Til að skilgreina tengil gervigreind skaltu nota það með merkinu í CSS vali þínu . Svo, til að breyta heimsækilegri lit allra tengla þína við grár, skrifaðu:
a: heimsótt {litur: grár; }Ef þú stíll einn tengil gervi-bekknum, þá er það góð hugmynd að stilla þau öll. Þannig verðurðu ekki hissa á óvenjulegum árangri. Svo ef þú vilt bara breyta litnum í gráa, meðan allar aðrar gervileiðir tengla þín eru svörtar skaltu skrifa:
a: hlekkur, a: sveima, a: virk {litur: svartur; } a: heimsótt {litur: grár; }Breyttu litum á tengilinn
Vinsælasta leiðin til að stilla tengla er að breyta litnum þegar músin sveiflast yfir það:
a {litur: # 00f; } a: sveima {lit: # 0f0; }En ekki gleyma því að þú getur haft áhrif á hvernig tengilinn lítur út eins og þeir smella á það með: virkum eignum:
a {litur: # 00f; } a: virkt {litur: # f00; }Eða hvernig tengilinn lítur út eftir að þú hefur heimsótt hana með: heimsótt eign:
a {litur: # 00f; } a: heimsótt {lit: # f0f; }Til að setja það saman:
a {litur: # 00f; } a: heimsótt {lit: # f0f; } a: sveima {lit: # 0f0; } a: virkt {litur: # f00; }Setjið bakgrunni á tenglum til að bæta við táknum eða kúlum
Þú getur sett bakgrunn á tengil og í Stílhreinum bakgrunni greinarinnar, en með því að spila með bakgrunni svolítið geturðu búið til tengil sem hefur tengt tákn. Veldu táknið sem er lítið, um 15px með 15px, nema textinn þinn sé stærri. Setjið bakgrunninn að annarri hliðinni á tengilinn og stilltu endurtekningarvalkostinn til að ekki endurtaka. Þá skaltu tengja tengilinn þannig að textinn innan tengilinn sé fluttur nógu langt til vinstri eða hægri til að sjá táknið.
a {padding: 0 2px 1px 15px; Bakgrunnur: #fff url (ball.gif) vinstri miðstöð ekki endurtaka; litur: # c00; }Þegar þú hefur fengið táknið þitt, getur þú stillt aðra mynd sem sveima, virk og heimsótt tákn til að gera tengilinn breytt:
a {padding: 0 2px 1px 15px; Bakgrunnur: #fff url (ball.gif) vinstri miðstöð ekki endurtaka; litur: # c00; } a: sveima (bakgrunnur: #fff url (ball2.gif) vinstri miðstöð ekki endurtaka; } a: virkt (bakgrunnur: #fff url (ball3.gif) vinstri miðstöð ekki endurtaka; }Gerðu tenglar þínar líta út eins og hnappar
Hnappar eru mjög vinsælar, en þar til CSS kom með, þurftu að búa til hnappa með myndum , sem gerir síðurnar þínar lengri tíma að hlaða. Til allrar hamingju, það er landamæri stíl sem getur hjálpað þér að búa til hnapp-eins áhrif auðveldlega með CSS.
{landamæri: 4px upphaf; padding: 2px; textaskreyting: ekkert; } a: virkt {landamæri: 4px innskot; }Athugaðu, þegar þú setur liti í upphafi og innsláttarstíl, eru vafrar ekki eins líklegir til að gera þær eins og þú gætir búist við. Svo, hér er áhugamaður hnappur með lituðum landamærum:
{landamæri: solid; Breiddarbreidd: 1px 4px 4px 1px; textaskreyting: ekkert; púði: 4px; landamærum lit: # 69f # 00f # 00f # 69f; }Og þú getur haft áhrif á sveima og virkan stíl á hnappatengli eins og heilbrigður, notaðu bara þá gervitíma:
a: hlekkur {landamæri: solid; Breiddarbreidd: 1px 4px 4px 1px; textaskreyting: ekkert; púði: 4px; landamærum lit: # 69f # 00f # 00f # 69f; } a: sveima {border-color: #ccc; }