Атрибутът Cascading Style Sheets (CSS) се използва най-често за промяна на цвета на хипервръзките в уеб страниците. По-малко функционални решения на този проблем са в езика HTML (HyperText Markup Language - „хипертекстов език за маркиране“).
Необходимо е
Основни познания по езици HTML и CSS
Инструкции
Етап 1
Подгответе стилизиращ блок за хипервръзки. В най-простата си форма тя може да изглежда по следния начин: {color: Green} Тук "a" се нарича "селектор", което показва, че описанието на стила в скоби трябва да се приложи към всички маркери за връзки в документа. Зеленото определя цвета на връзката; това е много груба дефиниция на цвета и рядко се използва. Много по-често към селектора „a“се добавя „псевдоклас“- това е етикет, който ви позволява да зададете стила на връзката в три различни състояния.
Стъпка 2
Използвайте псевдокласа на връзката, за да оформите нормалното (неактивно) състояние на връзката. Може да изглежда така, например: a: link {color: Green}
Стъпка 3
Използвайте псевдокласа за нанасяне на курсора, за да укажете как връзката да се показва при задържане. Например: a: hover {color: Lime}
Стъпка 4
Използвайте посетения псевдоклас, за да опишете стила на вече посетена връзка. Например: a: посети {цвят: DarkGreen}
Стъпка 5
Комбинирайте всичките три състояния в един блок за описание на стила. Външният вид на HTML кода, съдържащ CSS описания на стилове, може например да изглежда така:
a: link {цвят: зелен}
a: посетен {цвят: DarkGreen}
a: hover {цвят: Лайм}
Тук отварящите и затварящите HTML стилови тагове казват на браузъра къде започват и завършват описанията на стилове, а между тях е описание на поведението на връзката в три състояния.
Стъпка 6
Използваната по-горе проба показва само цветовите характеристики, но в описанието могат да бъдат включени и други атрибути. Например, ако дизайнът на страницата изисква връзката да не се подчертава в нормално (неактивно) състояние, но да се подчертава, когато курсорът се наведе над курсора, тогава кодът може да бъде модифициран, както следва:
a: link {цвят: зелен; декорация на текст: няма;}
a: посетен {цвят: DarkGreen; декорация на текст: няма;}
a: hover {цвят: Лайм; декорация на текст: подчертаване;}
Стъпка 7
Ако искате да промените цвета само на някои връзки на страницата и да оставите останалите с настройките по подразбиране, добавете атрибута class към маркера на всяка променяща се връзка. Например дайте име на този клас на хипервръзка newLinks. Тогава тагът на връзката може да изглежда така: текстова връзка Същото име на клас трябва да бъде добавено към описанието на стила:
a.newLinks: link {color: Green; декорация на текст: няма;}
a.newLinks: посетен {цвят: DarkGreen; декорация на текст: няма;}
a.newLinks: hover {цвят: Лайм; декорация на текст: подчертаване;}
Стъпка 8
Поставете кода за описание на стила, приготвен от примерите, описани по-горе, в заглавката на страницата - между етикетите и и. Ако е необходимо, добавете атрибут на клас към маркерите на връзката с името, използвано в описанията на стиловете. След това запазете модифицираната страница и процедурата за промяна на цвета на хипервръзките ще бъде завършена.
