Mae'r dolenni'n gyffredin iawn ar dudalennau gwe, ond nid yw llawer o ddylunwyr gwe yn sylweddoli'r pŵer sydd ganddynt gyda CSS i drin a rheoli eu cysylltiadau yn effeithiol. Gallwch chi ddiffinio dolenni gyda'r ymweliadau â chi, hofran, a datganiadau gweithredol. Gallwch hefyd weithio gyda ffiniau a chefndiroedd er mwyn rhoi mwy o pizzaz i'ch cysylltiadau neu eu gwneud yn edrych fel botymau neu hyd yn oed delweddau.
Mae'r rhan fwyaf o ddylunwyr gwe yn cychwyn trwy ddiffinio arddull ar y tag "a":
a {lliw: coch; }Bydd hyn yn arddull pob agwedd ar y ddolen (hofran, ymweld ag ef, ac yn weithgar). I arddull pob rhan ar wahân, rhaid i chi ddefnyddio ffug-ddosbarthiadau cyswllt.
Cyswllt Dosbarthiadau ffug
Mae yna bedwar math sylfaenol o ffug ddosbarthiadau cyswllt y gallwch eu diffinio:
- : dolen - dyma'r arddull ddiofyn ar gyfer y ddolen
- : ymwelwyd - ar ôl i gyswllt gael ei chlicio
- : hofran - wrth i'r llygoden gael ei lunio dros ddolen (cliciwch ymlaen llaw)
- : yn weithgar - yn iawn wrth i'r ddolen glicio
I ddiffinio ffug dosbarth ddosbarth, defnyddiwch y tag â'ch tag yn eich dewisydd CSS . Felly, i newid lliw yr ymwelwyd â'ch holl gysylltiadau â llwyd, ysgrifennwch:
a: ymwelwyd {lliw: llwyd; }Os ydych chi'n arddull un ffug ddosbarth ddolen, mae'n syniad da eu steilio i gyd. Felly ni fyddwch chi'n synnu gan ganlyniadau allwedd. Felly, os ydych chi am newid y lliw yr ymwelir â hi yn llwyd, tra bod holl eiddo ffug eraill eich dolenni'n dal yn ddu, byddech chi'n ysgrifennu:
a: link, a: hover, a: active {lliw: du; } a: ymwelwyd {lliw: llwyd; }Newid y Lliwiau Cyswllt
Y ffordd fwyaf poblogaidd o gysylltu â steil yw newid y lliw pan fydd y llygoden yn troi drosodd:
a {lliw: # 00f; } a: hover {lliw: # 0f0; }Ond peidiwch ag anghofio y gallwch chi effeithio ar sut mae'r ddolen yn edrych wrth iddynt glicio arno gyda'r: eiddo gweithredol:
a {lliw: # 00f; } a: active {lliw: # f00; }Neu sut mae'r ddolen yn gofalu amdanoch chi wedi ymweld â'r eiddo: yr ymwelwyd â hi:
a {lliw: # 00f; } a: ymwelwyd {lliw: # f0f; }Rhoi'r cyfan i gyd gyda'i gilydd:
a {lliw: # 00f; } a: ymwelwyd {lliw: # f0f; } a: hover {lliw: # 0f0; } a: active {lliw: # f00; }Rhowch Gefndiroedd ar y Cysylltiadau i Ychwanegu Eiconau neu Bwledi
Gallwch roi cefndir ar ddolen fel yn yr erthygl Cefndiroedd Stylish, ond trwy chwarae gyda chefndir ychydig, gallwch greu dolen sydd ag eicon cysylltiedig. Dewiswch eicon sy'n fach, tua 15px gan 15px, oni bai bod eich testun yn fwy. Rhowch y cefndir i un ochr i'r ddolen a gosodwch yr opsiwn ailadrodd i ddim-ailadrodd. Yna, rhowch y ddolen fel bod y testun yn y cyswllt yn cael ei symud dros ddigon pell i'r chwith neu'r dde i weld yr eicon.
a {padin: 0 2px 1px 15px; cefndir: #fff url (ball.gif) canolfan chwith heb ei ailadrodd; lliw: # c00; }Unwaith y bydd gennych eich eicon, gallwch osod delwedd wahanol fel eich eiconau hofran, gweithredol ac ymweliedig i wneud y cyswllt yn newid:
a {padin: 0 2px 1px 15px; cefndir: #fff url (ball.gif) canolfan chwith heb ei ailadrodd; lliw: # c00; } a: hover {cefndir: #fff url (ball2.gif) canolfan chwith heb ei ailadrodd; } a: active {background: #fff url (ball3.gif) canolfan chwith heb ei ailadrodd; }Gwnewch eich botymau i edrych ar eich dolenni
Mae'r botymau'n boblogaidd iawn, ond nes i CSS ddod draw, bu'n rhaid i chi greu botymau gan ddefnyddio delweddau , sy'n golygu bod eich tudalennau'n cymryd mwy o amser i'w llwytho. Yn ffodus, mae arddull ffiniol a all eich helpu i greu effaith tebyg i botwm yn hawdd gyda CSS.
ffin {ffin: 4px; padio: 2px; text-decoration: dim; } a: active {ffin: 4px inset; }Sylwer, pan fyddwch chi'n rhoi lliwiau ar y cychwyn ac mewn arddulliau mewnosod, nid yw porwyr mor debygol o'u cyflwyno fel y gallech ei ddisgwyl. Felly, dyma botwm ffansio gyda ffiniau lliw:
{ffin-ffin: solid; ffin-led: 1px 4px 4px 1px; text-decoration: dim; padio: 4px; ffin-ffin: # 69f # 00f # 00f # 69f; }Ac fe allwch chi effeithio ar hofran ac arddulliau gweithredol dolen botwm hefyd, dim ond defnyddio'r ffug-ddosbarthiadau hynny:
a: link {border-style: solid; ffin-led: 1px 4px 4px 1px; text-decoration: dim; padio: 4px; ffin-ffin: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }