Вам понадобится
  • - возможность редактирования текста документа или текста таблиц стилей документа;
  • - текстовый редактор, позволяющий сохранять документ в исходной кодировке.
Инструкция
1
Сделайте фон ссылки однородно заполненным произвольным цветом при помощи добавления встроенной информации о стиле элементу A. Добавьте style в состав атрибутов элемента A, соответствующего ссылке, фон которой необходимо изменить. В содержимое атрибута style поместите CSS-свойство background-color с заданным значением, представляющим собой корректный идентификатор цвета фона. Например, это может выглядеть так:

<a href="target.html" style="background-color: #00CC00">текст ссылки</a>
2
Определите фон ссылки во внешней или встроенной в документ таблице стилей. В соответствующую таблицу стилей добавьте набор правил, адресуемый селектором приемлемого уровня специфичности. В набор правил введите свойство background-color аналогично предыдущему шагу. Специфичность селектора выберите на основе правил каскадирования CSS2 и требуемой области действия. Так, если необходимо задать цвет всего одной ссылки, имеет смысл использовать ID-селектор, если таких ссылок будет несколько, лучше использовать селектор атрибутов на основе значения class.

Например, для установки зеленого фона определенной ссылке в документе, можно добавить в таблицу стилей набор правил:

A#ID_GREEN
{
    background-color: #00FF00;
}


Также следует установить атрибут ID элемента A, соответствующего нужной ссылке, в значение ID_GREEN:

<a href="target.html" ID="ID_GREEN">текст ссылки</a>
3
Заполните фон ссылки изображением. Примените методы, описанные в первом и втором шагах, однако вместо CSS-свойства background-color, используйте background-image. Например:

<a href="target.html" style="background-image: url('image.jpg')">текст ссылки</a>


При необходимости добавьте в набор CSS-правил свойство background-repeat для определения параметров дублирования изображения фона по горизонтали и вертикали.
4
Сделайте фон ссылки изменяющимся при наведении на нее мыши или переходе фокуса ввода. Во внешнюю или встроенную таблицу стилей документа добавьте наборы правил, задающие фон ссылки или группы ссылок в различных состояниях. Используйте ID-селекторы и селекторы атрибутов в сочетании с динамическими псевдоклассами :hover, :active и :focus. Например, для того, чтобы фон ссылки со значением атрибута ID, равным ID_DYNAMIC_BACKGROUND в неактивном состоянии был красным, а в состоянии нахождения под курсором мыши - зеленым, необходимо добавить в таблицу стилей следующие наборы правил:

A#ID_DYNAMIC_BACKGROUND
{
    background-color: #FF0000;
}


A#ID_DYNAMIC_BACKGROUND:hover
{
    background-color: #00FF00;
}


Аналогичным образом можно поступить и для создания фона с динамически изменяющимся изображением.