Линковите се многу чести на веб-страниците, но многу веб-дизајнери не ја сфаќаат моќта што ја имаат со CSS за ефикасно манипулирање и управување со нивните врски. Можете да дефинирате врски со посетените, лебдите и активните состојби. Можете исто така да работите со граници и позадини за да ги дадете вашите врски повеќе пица или да ги направите да изгледаат како копчиња или слики.
Повеќето веб-дизајнери започнуваат со дефинирање на стил на ознаката "a":
{боја: црвено; }Ова ќе ги стимулира сите аспекти на врската (лебди, посети и активно). За секој стил да се дизајнира посебно, мора да користите линк псевдо-класи.
Врска псевдо-класи
Постојат четири основни типови врски псевдо-класи што можете да ги дефинирате:
- : врска - ова е стандардниот стил за врската
- : посетени - откако е кликнато врската
- : лебдиш - како глушец е поставен преку врска (пред-клик)
- : активен - десно како врската е кликнато
За да дефинирате врската псевдокласа, користете ја со ознака во вашиот CSS селектор . Значи, за да ја промените посетената боја на сите ваши врски до сива, напишете:
а: посетени {боја: сива; }Ако стигнете еден линк псевдоклас, тоа е добра идеја да ги стилизирате сите. На тој начин нема да бидете изненадени од важни резултати. Значи, ако само сакате да ја промените посетената боја на сиво, додека сите други псевдо-својства на вашите врски остануваат црни, би напишале:
a: врска, a: лебди, а: активен {боја: црно; } a: посетени {боја: сива; }Променете ги боите на линкот
Најпопуларниот начин на стил на врски е да ја смени бојата кога глувчето лебди над неа:
a {боја: # 00f; } a: лебдат {боја: # 0f0; }Но, не заборавајте дека можете да влијаете врз изгледот на линкот додека го кликаат со: активната сопственост:
a {боја: # 00f; } a: активен {боја: # f00; }Или како врската изгледа откако сте ја посетиле со: Посетено имот:
a {боја: # 00f; } a: посетени {боја: # f0f; }Да се стави сето тоа заедно:
a {боја: # 00f; } a: посетени {боја: # f0f; } a: лебдат {боја: # 0f0; } a: активен {боја: # f00; }Ставете ги позадините на линковите за да додадете икони или куршуми
Можете да поставите позадина на врската како во статијата Стилски позадини, но со малку позади играње, можете да креирате врска која има поврзана икона. Изберете икона што е мала, околу 15px со 15px, освен ако вашиот текст е поголем. Поставете ја позадината на едната страна од врската и поставете ја опцијата за повторување да не се повторува. Потоа, поврзете ја врската така што текстот во рамките на линкот ќе се премести доволно далеку лево или десно за да ја видите иконата.
a {padding: 0 2px 1px 15px; позадина: #fff url (ball.gif) лево центар без повторување; боја: # c00; }Откако ќе ја имате вашата икона, можете да поставите поинаква слика како вашите лебди, активни и посетени икони за да направите врската промена:
a {padding: 0 2px 1px 15px; позадина: #fff url (ball.gif) лево центар без повторување; боја: # c00; } a: hover {позадина: #fff url (ball2.gif) лево центар не-повторува; } a: активен {позадина: #fff url (ball3.gif) лев центар не-повторува; }Направете ги вашите врски да изгледаат како копчиња
Копчињата се многу популарни, но додека CSS не дојде, мораше да креирате копчиња користејќи слики , што ги прави вашите страници да траат подолго да се вчитаат. За среќа, постои граница стил кој може да ви помогне да креирате ефект сличен на копче лесно со CSS.
(граница: 4px почеток; Соочувајќи се: 2px; текст-декорација: нема; } a: активен {border: 4px вметнат; }Забележете дека, кога ќе ставите бои на почетокот и вметнете стилови, прелистувачите не се толку веројатни што ќе ги направат како што можете да очекувате. Значи, тука е познат копче со обоени граници:
{граничен стил: цврст; border-width: 1px 4px 4px 1px; текст-декорација: нема; Соочувајќи се: 4px; граница боја: # 69f # 00f # 00f # 69f; }И може да влијае на лепењето и активните стилови на врската со копче, исто така, само користете ги овие псевдокласи:
a: link {border-style: solid; border-width: 1px 4px 4px 1px; текст-декорација: нема; Соочувајќи се: 4px; граница боја: # 69f # 00f # 00f # 69f; } a: лебди {гранична боја: #ccc; }