? ЯК зробити фон посилання :: настройки фону елемента до заслання

З часів винаходу мови гіпертекстової розмітки 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-
}

Аналогічним чином можна вчинити і для створення фону з динамічно змінюються зображенням.