Как сделать фон ссылки?

Со времен изобретения языка гипертекстовой разметки HTML концепции верстки и оформления web-документов весьма изменились. Благодаря практически полной поддержке популярными браузерами стандартов каскадных таблиц стилей CSS и CSS2, стало возможным влиять практически на любой аспект визуального представления документа. Например, можно сделать фон ссылки цветным, заполненным каким либо изображением, а также меняющимся в зависимости от действий пользователя.

Вам понадобится

• - возможность редактирования текста документа или текста таблиц стилей документа;
• - текстовый редактор, позволяющий сохранять документ в исходной кодировке.

Инструкция

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

Определите фон ссылки во внешней или встроенной в документ таблице стилей. В соответствующую таблицу стилей добавьте набор правил, адресуемый селектором приемлемого уровня специфичности. В набор правил введите свойство background-color аналогично предыдущему шагу. Специфичность селектора выберите на основе правил каскадирования CSS2 и требуемой области действия. Так, если необходимо задать цвет всего одной ссылки, имеет смысл использовать ID-селектор, если таких ссылок будет несколько, лучше использовать селектор атрибутов на основе значения class.Например, для установки зеленого фона определенной ссылке в документе, можно добавить в таблицу стилей набор правил:A#ID_GREEN{ background-color: #00FF00;}Также следует установить атрибут ID элемента A, соответствующего нужной ссылке, в значение ID_GREEN:текст ссылки

Заполните фон ссылки изображением. Примените методы, описанные в первом и втором шагах, однако вместо CSS-свойства background-color, используйте background-image. Например:текст ссылкиПри необходимости добавьте в набор CSS-правил свойство background-repeat для определения параметров дублирования изображения фона по горизонтали и вертикали.

Сделайте фон ссылки изменяющимся при наведении на нее мыши или переходе фокуса ввода. Во внешнюю или встроенную таблицу стилей документа добавьте наборы правил, задающие фон ссылки или группы ссылок в различных состояниях. Используйте ID-селекторы и селекторы атрибутов в сочетании с динамическими псевдоклассами :hover, :active и :focus. Например, для того, чтобы фон ссылки со значением атрибута ID, равным ID_DYNAMIC_BACKGROUND в неактивном состоянии был красным, а в состоянии нахождения под курсором мыши - зеленым, необходимо добавить в таблицу стилей следующие наборы правил:A#ID_DYNAMIC_BACKGROUND{ background-color: #FF0000;}A#ID_DYNAMIC_BACKGROUND:hover{ background-color: #00FF00;}Аналогичным образом можно поступить и для создания фона с динамически изменяющимся изображением.

Оцените статью!