Линкови су веома чести на веб страницама, али многи веб дизајнери не схватају снагу коју имају са ЦСС-ом како би ефикасно манипулисали и управљали њиховим везама. Можете дефинисати везе са посећеним, лебденим и активним стањима. Такође можете радити са границама и позадинама како бисте својим линковима дали више пиззаза или учинили да изгледају као дугмад или чак слике.
Већина веб дизајнера почиње дефинисањем стила на ознаци "а":
а {боја: црвена; }Ово ће обликовати све аспекте везе (лебдећи, посећени и активни). Да бисте сваки део посебно обликовали, морате користити линк псеудо-класе.
Линк псеудо-класе
Постоје четири основна типа линкова псеудо-класа које можете дефинисати:
- : линк - ово је подразумевани стил везе
- : посећено - након што је кликнула веза
- : лебдећи - када се миш креће преко везе (пре-клик)
- : активан - десно када се кликне на линк
Да бисте дефинисали линк псеудо-цласс, користите га са ознаком у ЦСС селектору . Дакле, да бисте променили посећену боју свих ваших веза на сиво, напишите:
а: посетили {цолор: греи; }Ако обликујете једну везу псеудо-класе, добра је идеја да их сви стишете. На тај начин нећете бити изненађени непознатим резултатима. Дакле, ако желите само да промените обиђену боју у сиво, док све остале псеудо-особине ваших веза остају црне, ви бисте написали:
а: линк, а: ховер, а: активно {цолор: блацк; } а: посетили {цолор: греи; }Промените линије боја
Најпопуларнији начин повезивања стилова је промена боје када миш прелази преко њега:
а {цолор: # 00ф; } а: ховер {цолор: # 0ф0; }Али немојте заборавити да можете утјецати на то како линка изгледа док кликну на њега: активном својином:
а {цолор: # 00ф; } а: активна {цолор: # ф00; }Или како се веза рачуна након што сте је посетили са: посјећеном имовином:
а {цолор: # 00ф; } а: посетили {цолор: # ф0ф; }Све то заједно:
а {цолор: # 00ф; } а: посетили {цолор: # ф0ф; } а: ховер {цолор: # 0ф0; } а: активна {цолор: # ф00; }Ставите позадине на линкове да бисте додали иконе или метке
Можете поставити позадину на везу као у чланку Стилисх Бацкгроундс, али ако играте са позадином мало, можете креирати везу која има придружену икону. Изаберите икону која је мала, око 15пк по 15пк, осим ако је ваш текст већи. Поставите позадину на једну страну везе и подесите опцију понављања на понављање. Затим поставите везу тако да се текст унутар линка помера довољно далеко лево или десно да бисте видели икону.
а {паддинг: 0 2пк 1пк; позадина: #ффф урл (балл.гиф) лево центар но-репеат; боја: # ц00; }Једном када добијете своју икону, можете поставити другу слику као вашу лебдију, активне и посјећене иконе како бисте промијенили везу:
а {паддинг: 0 2пк 1пк; позадина: #ффф урл (балл.гиф) лево центар но-репеат; боја: # ц00; } а: ховер {бацкгроунд: #ффф урл (балл2.гиф) лефт центре но-репеат; } а: активна {позадина: #ффф урл (балл3.гиф) лево центар но-репеат; }Направите своје везе као дугмад
Дугмад су веома популарна, али док ЦСС није дошао, морали сте направити дугмад користећи слике , што чини да ваше странице требају дуже да учитавају. Срећом, постоји стил граница који вам може помоћи у стварању ефекта попут дугмета помоћу ЦСС-а.
{граница: 4пк почетак; паддинг: 2пк; текст-декорација: нема; } а: активна {бордер: 4пк уметнута; }Напомена, када стављате боје на почетак и стилове убацивања, прегледачи не верују да ће их изгледати као што бисте очекивали. Дакле, ево бољег дугмета са обојеним границама:
{бордер-стиле: солид; бордер-видтх: 1пк 4пк 4пк 1пк; текст-декорација: нема; паддинг: 4пк; гранична боја: # 69ф # 00ф # 00ф # 69ф; }И можете утицати на лебде и активне стилове везе са тастерима, само користите те псеудо-класе:
а: линк {бордер-стиле: солид; бордер-видтх: 1пк 4пк 4пк 1пк; текст-декорација: нема; паддинг: 4пк; гранична боја: # 69ф # 00ф # 00ф # 69ф; } а: ховер {бордер-цолор: #ццц; }