Lyen yo trè komen sou paj wèb, men konsèpteur entènèt anpil pa reyalize pouvwa a yo ke yo gen ak CSS manipile ak jere lyen yo efektivman. Ou ka defini lyen ki gen vizite, hover, ak aktif eta yo. Ou ka travay tou avèk fwontyè yo ak orijin yo pou bay lyen ou plis pizzaz oswa fè yo sanble bouton oswa menm imaj.
Pifò konsèpteur entènèt kòmanse soti nan defini yon style sou tag nan "yon":
yon {koulè: wouj; }}Sa a pral style tout aspè nan lyen an (hover, te vizite, ak aktif). Pou estil chak pati separeman, ou dwe itilize lyen pseudo-klas yo.
Link Pseudo-klas
Gen kat kalite debaz nan lyen pseudo-klas lyen ou ka defini:
- : lyen - sa a se style la default pou lyen an
- : vizite - apre yon lyen te klike
- : hover - kòm yon sourit se tann sou yon lyen (pre-klike sou)
- : aktif - dwa kòm lyen an ke yo te klike sou
Pou defini yon lyen pseudo-klas, sèvi ak li ak tag nan yon nan seleksyon CSS ou. Se konsa, chanje koulè a te vizite nan tout lyen ou a gri, ekri:
yon: te vizite {koulè: gri; }}Si ou style youn lyen pseudo-klas, li nan yon bon lide yo style yo tout. Nan fason sa a ou pa pral etone pou rezilta envalid. Se konsa, si ou jis vle chanje koulè a te vizite nan gri, pandan tout lòt pseudo-pwopriyete nan lyen ou rete nwa, ou ta ekri:
yon: lyen, yon: hover, yon: aktif {koulè: nwa; } yon: vizite {koulè: gri; }}Chanje Koulè Link yo
Fason ki pi popilè nan lyen style se chanje koulè a lè sourit la sou li:
yon {koulè: # 00f; } yon: hover {koulè: # 0f0; }}Men, pa bliye ke ou ka afekte kouman lyen an sanble jan yo ap klike sou li ak la: pwopriyete aktif:
yon {koulè: # 00f; } yon: aktif {koulè: # f00; }}Oswa ki jan lyen an sanble apre ou te vizite li ak: vizite pwopriyete a:
yon {koulè: # 00f; } yon: vizite {koulè: # f0f; }}Mete l tout ansanm:
yon {koulè: # 00f; } yon: vizite {koulè: # f0f; } yon: hover {koulè: # 0f0; } yon: aktif {koulè: # f00; }}Mete Istorik sou lyen ki mennen nan Add Icons oswa bal
Ou ka mete yon background sou yon lyen tankou nan atik la Stylish Backgrounds, men pa jwe ak background nan yon ti kras, ou ka kreye yon lyen ki gen yon icon ki asosye. Chwazi yon icon ki piti, anviwon 15px pa 15px, sòf si tèks ou pi gwo. Mete background nan nan yon sèl bò nan lyen an epi mete opsyon repete a pa gen okenn-repete. Lè sa a, padd lyen an pou tèks la nan lyen an te deplase sou byen lwen sou bò gòch la oswa dwa yo wè icon la.
yon {padding: 0 2px 1px 15px; background: #fff URL (ball.gif) sant kite pa-repete; koulè: # c00; }}Yon fwa ou te gen icon ou a, ou ka mete yon imaj diferan kòm hover ou a, aktif, ak vizit ikon fè chanjman nan lyen:
yon {padding: 0 2px 1px 15px; background: #fff URL (ball.gif) sant kite pa-repete; koulè: # c00; } yon: hover {background: #fff URL (ball2.gif) kite sant pa gen okenn-repete; } yon: aktif {background: #fff URL (ball3.gif) kite sant pa gen okenn-repete; }}Fè Lyen ou yo sanble bouton
Bouton yo trè popilè, men jouk CSS te vini ansanm, ou te kreye bouton lè l sèvi avèk imaj , sa ki fè paj ou pran plis tan chaj. Chans, gen yon style fwontyè ki ka ede w kreye yon efè bouton ki fasil ak CSS.
yon {fontyè: 4px kòmansman; padding: 2px; tèks-decoration: okenn; } yon: aktif {fontyè: 4px inset; }}Remake byen, lè ou mete koulè sou estaj la ak estil ensèt, navigatè yo pa gen anpil chans yo rann yo jan ou ta ka atann. Se konsa, isit la nan yon bouton fancier ak fwontyè ki gen koulè:
yon {font-style: solid; fontyè-lajè: 1px 4px 4px 1px; tèks-decoration: okenn; padding: 4px; fontyè koulè: # 69f # 00f # 00f # 69f; }}Epi ou ka afekte hover a ak estil aktif nan yon lyen bouton kòm byen, jis itilize sa yo pseudo-klas:
yon: lyen {fontyè-style: solid; fontyè-lajè: 1px 4px 4px 1px; tèks-decoration: okenn; padding: 4px; fontyè koulè: # 69f # 00f # 00f # 69f; } yon: hover {font-color: # cc; }}