Lingid on veebilehtedel väga levinud, kuid paljud veebidisainerid ei mõista, et neil on CSS-i abil oma lingid tõhusaks manipuleerimiseks ja haldamiseks. Saate määrata linke külastatud, hõljuvate ja aktiivsete olekutega. Võite töötada ka piiride ja taustadega, et anda oma lingid pizzazile rohkem või muuta need välja nagu nupud või isegi pildid.
Enamik veebidisainerid alustavad välja, määratledes stiilile "a" märgi:
a {värv: punane; }See lihtsustab lingi kõiki aspekte (hõljumine, külastatud ja aktiivne). Iga osa eraldi stiilimiseks peate kasutama linkide pseudo-klasse.
Pseudoklasside linkimine
Seal on neli peamist liiki linkide pseudoklassid, mida saate määratleda:
- : link - see on linki vaikimisi stiil
- : külastatud - pärast lingi klõpsamist
- : hõljumine - hiirega on lingitud (eelklikk)
- : aktiivne - õige, klõpsates lingile
Linki pseudo-klassi määramiseks kasutage seda CSS-valijaga sildi abil. Niisiis, kõigi oma linkide halli külastatud värvi muutmiseks kirjutage:
a: külastatud {värv: hall; }Kui loote ühe linki pseudo-klassi, on hea mõte neid kõiki stiilida. Nii ei võta teid üllatunud kõrvalised tulemused. Nii et kui soovite lihtsalt külastatud värvi muuta halliks, kuigi kõik teie linkide pseudo-omadused on mustad, siis kirjuta:
a: link, a: hover, a: aktiivne {color: black; } a: külastatud {color: gray; }Muuda Link Colours
Kõige populaarsem stiililinkide viis on värvi muutmine, kui hiirekursor liigub üle selle:
a {värv: # 00f; } a: hover {color: # 0f0; }Kuid ärge unustage, et saate mõjutada lingi välimust, nagu see klõpsab sellele: aktiivse vara abil:
a {värv: # 00f; } a: aktiivne {color: # f00; }Või kuidas link pärast seda, kui olete selle külastanud, külastanud:
a {värv: # 00f; } a: külastatud {color: # f0f; }Selle kokku panna:
a {värv: # 00f; } a: külastatud {color: # f0f; } a: hover {color: # 0f0; } a: aktiivne {color: # f00; }Pange taustad ikoonide või kuulide lisamiseks lingidesse
Saate lisada tausta linki, nagu on esitatud stiilsete taustade artiklis, kuid mängides taustal veidi, võite luua linki, millel on seotud ikoon. Valige ikoon, mis on väike, umbes 15px kuni 15px, kui teie tekst pole suurem. Asetage taust linki ühele küljele ja määrake korduv valik, et mitte korrata. Seejärel libistage link, nii et lingi tekst liigutatakse ikooni nägemiseks piisavalt kaugele vasakule või paremale.
a {padding: 0 2px 1px 15px; taust: #fff url (ball.gif) vasak keskel no-repeat; värv: # c00; }Kui olete oma ikooni, võite lingi muutmiseks muuta oma hõljukaks, aktiivseks ja külastatud ikooniks erineva pildi.
a {padding: 0 2px 1px 15px; taust: #fff url (ball.gif) vasak keskel no-repeat; värv: # c00; } a: hover {background: #fff url (ball2.gif) left center no-repeat; } a: aktiivne {background: #fff url (ball3.gif) vasak keskus no-repeat; }Tee oma lingid välja nagu nupud
Nupud on väga populaarsed, kuid enne CSS-i jõudmist peate looma nupud piltidega , mis muudab teie lehtede laadimiseks kauem aega. Õnneks on piiri stiil, mis aitab hõlpsasti CSS-i abil hõlpsalt nupuvajutusega efekti luua.
{border: 4px algus; padding: 2px; teksti-dekoratsioon: puudub; } a: aktiivne {border: 4px sisend; }Pange tähele, et kui asetate värvid algusesse ja sisestusseadistustesse, ei pruugi brauserid neid tõenäoliselt tõenäoliselt esile kutsuda. Niisiis, siin on värviliste piiridega nuusutav nupp:
a {piir-stiilis: kindel; piiri laius: 1px 4px 4px 1px; teksti-dekoratsioon: puudub; padding: 4px; piiri värv: # 69f # 00f # 00f # 69f; }Samuti võite mõjutada nupuvajutuse hõljukit ja aktiivseid stiile, vaid kasutage neid pseudoklasse:
a: link {border-style: solid; piiri laius: 1px 4px 4px 1px; teksti-dekoratsioon: puudub; padding: 4px; piiri värv: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }