Lidhjet janë shumë të zakonshme në faqet e internetit, por shumë web designers nuk e kuptojnë fuqinë që ata kanë me CSS për të manipuluar dhe menaxhuar lidhjet e tyre në mënyrë efektive. Ju mund të përcaktoni lidhjet me shtetet e vizituara, rri pezull dhe aktiv. Ju gjithashtu mund të punoni me kufij dhe prejardhje për t'i dhënë lidhjet tuaja më shumë pizzaz ose t'i bëni ato të duken si butona apo edhe imazhe.
Shumica e web designers fillojnë nga përcaktimi i një stili në tag "a":
një {ngjyrë: e kuqe; }Kjo do të stilit të gjitha aspektet e lidhjes (hover, visited, dhe aktive). Për të stiluar secilën pjesë veç e veç, duhet të përdorni pseudo-klasa link.
Link Pseudo-Klasat
Ekzistojnë katër lloje themelore të lidhjes së pseudo-klasave që mund të përcaktoni:
- : link - ky është stili i parazgjedhur për lidhjen
- : vizituar - pasi një lidhje është klikuar
- : hover - si një mouse është gati për një lidhje (para-klikoni)
- : aktiv - djathtas si link është duke u klikuar
Për të përcaktuar një lidhje pseudo-klasë, e përdorin atë me një tag në përzgjedhësin tuaj CSS . Pra, për të ndryshuar ngjyrën e vizituar të të gjitha lidhjeve tuaja në gri, shkruani:
një: vizitoi {ngjyrë: gri; }Nëse ju vendosni një lidhje pseudo-klasë, është një ide e mirë për t'i stilizuar të gjithë. Në këtë mënyrë ju nuk do të habiteni nga rezultatet e panjohura. Pra, nëse doni të ndryshoni ngjyrën e vizitoi në gri, ndërsa të gjitha pseudo-pronat e lidhjeve tuaja mbeten të zeza, do të shkruanit:
a: lidhje, a: hover, a: active {color: black; } një: vizitoi {ngjyrë: gri; }Ndrysho ngjyrat e lidhjes
Mënyra më popullore për lidhjet e stilit është të ndryshosh ngjyrën kur miu rri pezull mbi të:
një {color: # 00f; } një: hover {color: # 0f0; }Por mos harroni se ju mund të ndikoni në mënyrën se si duket lidhja ndërsa po klikohen mbi të me: pronë aktive:
një {color: # 00f; } një: aktiv {color: # f00; }Ose si duket lidhja pasi ta keni vizituar atë me: pronë të vizituar:
një {color: # 00f; } a: vizitoi {color: # f0f; }Për ta vënë atë të gjithë së bashku:
një {color: # 00f; } a: vizitoi {color: # f0f; } një: hover {color: # 0f0; } një: aktiv {color: # f00; }Vendosni Sfondet në Lidhjet për Shto Ikona ose Plumbash
Ju mund të vendosni një sfond në një lidhje si në artikullin Stylish Backgrounds, por duke luajtur me sfond pak, ju mund të krijoni një lidhje që ka një ikonë të lidhur. Zgjidhni një ikonë që është e vogël, rreth 15px nga 15px, përveç nëse teksti yt është më i madh. Vendosni sfondin në një anë të lidhjes dhe vendosni opsionin e përsëritjes për të mos përsëritur. Pastaj, lidhni lidhjen në mënyrë që teksti brenda lidhjes të lëvizë aq larg sa të majtë ose të djathtë për të parë ikonën.
një {padding: 0 2px 1px 15px; sfond: #fff url (ball.gif) qendra e majtë pa përsëritje; ngjyra: # c00; }Pasi të keni ikonën tuaj, mund të caktoni një imazh të ndryshëm si ikonat tuaja të lëvizshme, aktive dhe të vizituara për të bërë ndryshimin e lidhjes:
një {padding: 0 2px 1px 15px; sfond: #fff url (ball.gif) qendra e majtë pa përsëritje; ngjyra: # c00; } a: hover {background: #fff url (ball2.gif) qendra e majtë pa-përsëritje; } a: aktiv {sfond: #fff url (ball3.gif) qendra e majtë pa-përsëritje; }Bëni lidhjet tuaja duken si Buttons
Buttons janë shumë të popullarizuara, por deri në arritjen e CSS, ju duhet të krijoni butona duke përdorur imazhe , gjë që i bën faqet tuaja të zgjasin më shumë për t'u ngarkuar. Për fat të mirë, ekziston një stil kufiri që mund t'ju ndihmojë të krijoni lehtë efektin e butonit me CSS.
një {kufi: 4px fillim; mbushje: 2px; tekst-dekorim: asnjë; } a: active {border: 4px inset; }Vini re, kur vendosni ngjyra në fillim dhe në stilet e pamjes, shfletuesit nuk janë aq të ngjarë që t'i bëjnë ato siç mund të prisni. Pra, këtu është një buton i përshtatshëm me kufij me ngjyrë:
një {stil kufiri: i fortë; gjerësia e kufirit: 1px 4px 4px 1px; tekst-dekorim: asnjë; mbushje: 4px; ngjyra kufitare: # 69f # 00f # 00f # 69f; }Dhe mund të ndikoni në hoverin dhe stilet aktive të lidhjes së një butoni, thjesht përdorni ato pseudo-klasa:
a: lidhje {border-style: solid; gjerësia e kufirit: 1px 4px 4px 1px; tekst-dekorim: asnjë; mbushje: 4px; ngjyra kufitare: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }