Връзките са много чести в уеб страниците, но много уеб дизайнери не осъзнават силата, която имат с CSS, за да манипулират и управляват ефективно връзките си. Можете да дефинирате връзки с посетени, задържащи и активни състояния. Можете също така да работите с граници и фонове, за да дадете на връзките си повече пица или да изглеждат като бутони или дори изображения.
Повечето уеб дизайнери започват, като определят стила на маркера "a":
a {цвят: червен; }Това ще оформя всички аспекти на връзката (задържане, посещение и активност). За да оформите всяка част поотделно, трябва да използвате псевдоклас на връзките.
Псевдокласни връзки
Има четири основни типа връзки на псевдо-класове, които можете да дефинирате:
- : link - това е стила по подразбиране за връзката
- : посетен - след кликване върху връзка
- : мишката - когато мишката е поставена върху връзка (преди кликване)
- : активно - вдясно при щракване върху връзката
За да определите псевдоклас на връзка, използвайте я с маркера в CSS селектора . За да промените посетения цвят на всичките си връзки към сивото, напишете:
a: посетен {цвят: сив; }Ако подсказвате една псевдокласна връзка, това е добра идея да ги оформяте всички. По този начин няма да бъдете изненадани от външни резултати. Така че, ако просто искате да промените посетения цвят на сиво, докато всички останали псевдо-свойства на вашите връзки останат черни, бихте написали:
a: link, a: hover, a: активен {цвят: черен; } a: посетено {цвят: сиво; }Промяна на цветовете на връзките
Най-популярният начин за стил на връзките е да промените цвета, когато мишката се движи над него:
a {цвят: # 00f; } а: задръжте {цвят: # 0f0; }Но не забравяйте, че можете да повлияете как изглежда връзката, когато кликват върху нея с: активното свойство:
a {цвят: # 00f; } а: активна {цвят: # f00; }Или как връзката се грижи след като сте я посетили с: посетената собственост:
a {цвят: # 00f; } a: посети {цвят: # f0f; }Да се съберат всички заедно:
a {цвят: # 00f; } a: посети {цвят: # f0f; } а: задръжте {цвят: # 0f0; } а: активна {цвят: # f00; }Поставете фонове върху връзките, за да добавите икони или куршуми
Можете да поставите фон на връзка, както в статията "Стилни фона", но като играете малко на фона, можете да създадете връзка, която има свързана икона. Изберете икона, която е малка, около 15px до 15px, освен ако вашият текст не е по-голям. Поставете фона на едната страна на връзката и задайте опцията повторение на повторение. След това поставете връзката така, че текстът в връзката да се премести достатъчно далече отляво или отдясно, за да видите иконата.
{padding: 0 2px 1px 15px; background: #fff url (ball.gif) ляв център no-repeat; цвят: # c00; }Щом получите иконата си, можете да зададете различно изображение като икони за задържане, активност и посещение, за да промените връзката:
{padding: 0 2px 1px 15px; background: #fff url (ball.gif) ляв център no-repeat; цвят: # c00; } a: hover {background: #fff url (ball2.gif) ляв център no-repeat; } a: активна {background: #fff url (ball3.gif) ляв център no-repeat; }Направете вашите връзки изглеждат като бутони
Бутоните са много популярни, но докато CSS дойде, трябва да създадете бутони, използващи изображения , което прави страниците ви да се зареждат повече. За щастие има граничен стил, който може да ви помогне да създадете бутон-подобен ефект лесно с CSS.
a {border: 4px beginning; подложка: 2 пиксела; текстова декорация: няма; } а: активна {граница: 4px вмъкване; }Забележете, че когато поставяте цветове в началото и в стила на вмъкване, браузърите не са толкова склонни да ги правят, както бихте очаквали. Така че, тук е един по-любим бутон с цветни граници:
{border-style: solid; ширина на границата: 1px 4px 4px 1px; текстова декорация: няма; подложка: 4 пиксела; граничен цвят: # 69f # 00f # 00f # 69f; }И вие можете да повлияете на стила на движение и активните стилове на бутонна връзка, просто използвайте тези псевдо-класове:
a: връзка {border-style: solid; ширина на границата: 1px 4px 4px 1px; текстова декорация: няма; подложка: 4 пиксела; граничен цвят: # 69f # 00f # 00f # 69f; } а: задържи {border-color: #ccc; }