Saites ir ļoti izplatītas tīmekļa lapās, taču daudzi tīmekļa izstrādātāji neizprot spēku, kas tiem ir ar CSS, lai efektīvi manipulētu un pārvaldītu savas saites. Jūs varat definēt saites ar apmeklētajām, novirzītām un aktīvām valstīm. Jūs varat arī strādāt ar robežām un fonu, lai piešķirtu saitēm vairāk pizzas vai padarītu tās par pogām vai pat attēliem.
Lielākā daļa tīmekļa dizaineru sākas, definējot stilu "tagam":
a {krāsa: sarkana; }Tas stipinās visus saites aspektus (novietot kursoru, apmeklētu un aktīvi). Lai katra daļa būtu stilīga atsevišķi, jums jāizmanto saišu pseidoklases.
Saite pseidoklases
Ir četri pamata saites pseido-klases veidi, kurus varat definēt:
- : saite - šis ir noklusējuma saites stils
- : apmeklēta - pēc saites noklikšķināšanas
- : novietojiet kursoru - jo peles pogai ir izveidota saite (iepriekš noklikšķinot)
- : aktīvs - labi, kad noklikšķina uz saites
Lai definētu saiti pseidoklasi, izmantojiet to ar CSS atlasītāja tagu. Tātad, lai mainītu visas saites uz pelēko apmeklēto krāsu, rakstiet:
a: apmeklēja {krāsa: pelēka; }Ja jūs veidojat vienu saiti pseidoklasi, tad ir ieteicams tos visus veidot. Tādā veidā jūs neesat pārsteiguši ārēji rezultāti. Tātad, ja jūs vienkārši vēlaties mainīt apmeklēto krāsu pelēkā krāsā, bet visas pārējās pseidonīmā esošās saites joprojām ir melnas, rakstīt:
a: saite, a: hover, a: aktīvs {krāsa: melna; } a: apmeklēja {krāsa: pelēka; }Mainīt saites krāsas
Populārākais veids, kā veidot saites, ir mainīt krāsu, kad peles kursors atrodas virs tā:
a {color: # 00f; } a: hover {color: # 0f0; }Bet neaizmirstiet, ka varat ietekmēt to, kā saite izskatās, jo tie noklikšķina uz tā ar: aktīvo īpašumu:
a {color: # 00f; } a: aktīvs {color: # f00; }Vai arī kā saite izskatās pēc tam, kad to apmeklējāt ar: apmeklēto īpašumu:
a {color: # 00f; } a: apmeklēja {color: # f0f; }Lai to visu saliktu kopā:
a {color: # 00f; } a: apmeklēja {color: # f0f; } a: hover {color: # 0f0; } a: aktīvs {color: # f00; }Ievietojiet fons saitēs, lai pievienotu ikonas vai marķierus
Jūs varat ievietot fona saiti, kas ir iekļauta Stilīgo fonu rakstā, taču, spēlējot ar fona mazliet, varat izveidot saiti, kurai ir saistīta ikona. Izvēlieties ikonu, kas ir maza, apmēram 15 pikseļi līdz 15 pikseļi, ja vien jūsu teksts nav lielāks. Ievietojiet fonu vienā saites pusē un iestatiet atkārtotas izvēles iespēju, lai atkārtotu. Tad paslīdējiet saiti, lai teksts saitē tiktu pārvietots pietiekami tālu, lai redzētu ikonu pa kreisi vai pa labi.
a {padding: 0 2px 1px 15px; fons: #fff url (ball.gif) kreisajā centrā nav-atkārtot; krāsa: # c00; }Kad esat ieguvis ikonu, varat iestatīt citu attēlu kā peles kursoru, aktīvo un apmeklēto ikonu, lai saite mainītos:
a {padding: 0 2px 1px 15px; fons: #fff url (ball.gif) kreisajā centrā nav-atkārtot; krāsa: # c00; } a: hover {background: #fff url (ball2.gif) left centre no-repeat; } a: aktīvs {background: #fff url (ball3.gif) kreisais centrs ne-atkārtot; }Izveidojiet savas saites kā pogas
Pogas ir ļoti populāras, taču, kamēr CSS nāca kopā, jums bija jāizveido pogas, izmantojot attēlus , kas ļauj jūsu lapām ielādēt vairāk laika. Par laimi, ir robežas stils, kas var palīdzēt jums viegli izveidot pogas efektu ar CSS.
{robeža: 4px sākums; polsterējums: 2 pikseļi; teksta apdare: nav; } a: aktīvs {border: 4px inset; }Ņemiet vērā: ja jūs sākat krāsas no sākuma un ievietot stilus, pārlūkprogrammas, iespējams, nedod tos kā jūs varētu sagaidīt. Tātad, šeit ir mīļotājs poga ar krāsainām malām:
{robežas stils: ciets; robežas platums: 1px 4px 4px 1px; teksta apdare: nav; polsterējums: 4px; robežas krāsa: # 69f # 00f # 00f # 69f; }Un jūs varat ietekmēt arī pogas saites kursoru un aktīvo stilu, vienkārši izmantojiet šīs pseidoklases:
a: saite {border-style: solid; robežas platums: 1px 4px 4px 1px; teksta apdare: nav; polsterējums: 4px; robežas krāsa: # 69f # 00f # 00f # 69f; } a: peles kursorsvirziens {border-color: #ccc; }