Girêdanên li ser malperên gelemperî gelemperî hene, lê gelek hostnên web ne desthilatdar e ku ew bi CSS- ê veguhestin û pêwendiyên xwe bi bandor bi rêve bike. Hûn dikarin bi dewletên rekêşî, veşartî û çalakvanan veguherînin. Hûn dikarin bi sînoran û paşnavên xwe re bixebitin ku hûn girêdanên bêtir pizzaz bikin yan jî mîna pelên an jî wêneyên xwe binêrin.
Piraniya sêwirînerên ku ji hêla stenbolê re li ser "a" tagê destnîşan dikin dest pê dike:
{color: red; }Ev dê her cureyên girêdana girêdanê (hover, serdana, û çalak). Ji bo her şêweya her cûreyê vekirî, divê hûn pîşesazên pseudo-karanîna bikar bînin.
Pseudo-Classes
Wê çar rengên bingehîn yên pseudo-class hene ku hûn dikarin define:
- : girêdan - ji bo girêdana stenbolê ev e
- : serdana - piştî piştî girêdanek bitikîne
- : hover - wekî mîksek li ser girêdanek vekirî ye (pre-click)
- : Çalak - rast wekî ku girêda tête binçavkirin
Ji bo danûstendina pseudo-class define, ew bi tagek bijareya CSS -ê re bikar bînin. Ji ber vê yekê, rengê serdana hemî girêdanên we yên spî re biguherînin, binivîse:
a: serdana {reng: gray; }Heke hûn girêdanek pseudo-sembola xweş bikin, ev fikr baş e ku her tiştî bi wan re tevlihev bikin. Bi vî awayî hûn ê encamên bêbawer neyê şaş kirin. Ji ber ku hûn tenê dixwazin ku rengê ziyaret kirî biguherînin, tevahiya hemî pseudo-taybetmendiyên girêdanên we reş be, hûnê binivîsin:
a: link, a: hover, a: active {reng: black; } a: serdana {rengê spî; }Guhertina Girêdanê biguherînin
Riya herî populer ya girêdayî girêdanên lînk e ku dema rengê masî li ser vê rengê rengê biguherin:
{color: # 00f; } a: hover {color: # 0f0; }Lê ji bîr nekin ku hûn dikarin li ser bandora ku çawa bi wan re li ser kopê têne bandor dike, li ser bandor bikin: Malpera çalak:
{color: # 00f; } a: active {color: # f00; }Yan jî pêwendiya we çawa bi we re bi serdana xwe ye?
{color: # 00f; } a: serdana {reng: # f0f; }Ji bo her tiştî bikin
{color: # 00f; } a: serdana {reng: # f0f; } a: hover {color: # 0f0; } a: active {color: # f00; }Li ser Girêdanên Bişkojan an Bulletên Add Addgrounds
Hûn dikarin li ser kategoriya li ser Stenbol Backgrounds article, bi lêgerîna bi paşveçûna piçûk re, hûn dikarin girêdanek ku îkonek girêdayî ye. Nîşanek hilbijêre ku nêzîkî 15px bi 15px ye, heya ku teksta xwe mezintir e. Paşnavê bi yek ji alîyê girêdan vekin û bijareka dubare bidin ku ji bo no-repeat. Piştre, girêdana paddê da ku text di hundirê lînkê de heya berbi çep û rastê ji bo ku nîşan bide icons.
a {padding: 0 2px 1px 15px; paşnav: #fff url (ball.gif) navenda çepê nehêle çep; color: # c00; }Dema ku hûn nîşanên xwe binivîsin, hûn dikarin wêneyê cûda bide ku hûn hover, çalak, û nîşanên biçûk bikin ku guhertina girêdanê:
a {padding: 0 2px 1px 15px; paşnav: #fff url (ball.gif) navenda çepê nehêle çep; color: # c00; } a: hover {paşnav: #fff url (ball2.gif) navenda çepê nehêle çep; } a: çalak {paşnav: #fff url (ball3.gif) navenda çepê nehêle çep; }Lînkên Lînkên Xwe Like Like Button
Buttons gelekî gelemperî ne, lê heta ku CSS dihat, hûn bi wêneyên bi karanîna pelan çêbikin, ku pirtûka we tête dirêj kirin. Bi dilfikir, şêweyek sînor heye ku dikare alîkarî bi pêl-a-rengek bi hêsanî bi CSS re biafirîne.
a {sînor: 4px destpêk; padding: 2px; text-decoration: none; } a: active {border: 4px inset; }Têbînî, dema ku hûn rengên li destpêkê û şêweyên şertan bikin, gerokên ku ne gengaz dikin ku hûn bi wan re were pêşkêş kirin. Ji ber vê yekê, li vir bi sînorên rengê rengek fikirîn e:
a {border-style: solid; border-width: 1px 4px 4px 1px; text-decoration: none; padding: 4px; border-color: # 69f # 00f # 00f # 69f; }Û hûn dikarin li ser hest û çalakiyên çalak ên pêwendiyê li ser pêwendiyê bandor bikin, tenê tenê wan wan pseudo-classan bikar bînin:
a: link {border-style: solid; border-width: 1px 4px 4px 1px; text-decoration: none; padding: 4px; border-color: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }