След изобретяването на езика за маркиране на хипертекст, HTML, концепциите за оформление и оформление на уеб документи са се променили драстично. С почти пълната поддръжка на популярните браузъри за стандартите за каскаден стил на CSS и CSS2 стана възможно да се повлияе на почти всеки аспект от визуалното представяне на документ. Например можете да направите фона на връзка оцветен, запълнен с някакво изображение и също да се променя в зависимост от действията на потребителя.
Необходимо
- - възможността за редактиране на текста на документа или текста на таблиците със стилове на документа;
- - текстов редактор, който ви позволява да запишете документа в оригиналното кодиране.
Инструкции
Етап 1
Направете фона на връзката равномерно запълнен с произволен цвят, като добавите вградена информация за стил към елемента А. Добавете стил към атрибутите на елемента A, съответстващ на връзката, чийто фон искате да промените. В съдържанието на атрибута стил поставете CSS свойството background-color с дадената стойност, която е правилният идентификатор за цвета на фона. Например, може да изглежда така:
текст на връзката
Стъпка 2
Определете фона на връзката във външен или вграден лист със стилове във вашия документ. В подходящата таблица със стилове добавете набор от правила, адресирани от селектор с приемливо ниво на специфичност. В набора от правила въведете свойството background-color по същия начин, както в предишната стъпка. Изберете специфичността на селектора въз основа на CSS2 каскадни правила и желания обхват. Така че, ако трябва да зададете цвета на само една връзка, има смисъл да използвате селектор на ID, ако има няколко такива връзки, по-добре е да използвате селектор на атрибути въз основа на стойността на класа.
Например, за да зададете зелен фон за конкретна връзка в документ, можете да добавите набор от правила към таблицата със стилове:
A # ID_GREEN
{
фон-цвят: # 00FF00;
}
Трябва също така да зададете атрибута ID на елемента A, съответстващ на желаната връзка, на ID_GREEN:
текст на връзката
Стъпка 3
Попълнете фона на връзката с изображение. Следвайте методите, описани в стъпки една и две, но вместо свойството CSS за цвят на фона, използвайте background-image. Например:
текст на връзката
Ако е необходимо, добавете свойство за повторение на фона към правилата на CSS, за да дефинирате опции за дублиране на фоновото изображение хоризонтално и вертикално.
Стъпка 4
Направете промяна на фона на връзката, когато задържите курсора на мишката върху нея или когато фокусът се премести. Добавете набори от правила към външен или вграден лист със стил на документ, които определят фона на връзка или група от връзки в различни състояния. Използвайте селектори за идентификатори и атрибути във връзка с динамичните псевдокласове: hover,: active и: focus. Например, за да може фонът на връзка със стойност на атрибута ID на ID_DYNAMIC_BACKGROUND да бъде червен в неактивно състояние и зелен в състоянието, че е под курсора на мишката, трябва да се добавят следните набори от правила към таблицата със стилове:
# ID_DYNAMIC_BACKGROUND
{
фон-цвят: # FF0000;
}
A # ID_DYNAMIC_BACKGROUND: задръжте курсора на мишката
{
фон-цвят: # 00FF00;
}
Можете да направите същото, за да създадете фон с динамично променящо се изображение.
