Як зробити фон посилання

Як зробити фон посилання

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

Вам знадобиться

- Можливість редагування тексту документа або тексту таблиць стилів документа;
- Текстовий редактор, що дозволяє зберігати документ у вихідній кодуванні.

Інструкція

  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;

    }

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