Як зробити фон посилання
З часів винаходу мови гіпертекстової розмітки HTML концепції верстки та оформлення web-документів вельми змінилися. Завдяки практично повній підтримці популярними браузерами стандартів каскадних таблиць стилів CSS і CSS2, стало можливим впливати практично на будь-який аспект візуального представлення документа. Наприклад, можна зробити фон посилання кольоровим, заповненим якихось зображенням, а також змінним залежно від дій користувача.
Вам знадобиться
- - можливість редагування тексту документа або тексту таблиць стилів документа;
- - текстовий редактор, що дозволяє зберігати документ у вихідній кодуванні.
Інструкція
1
Зробіть фон посилання однорідне заповненим довільним кольором за допомогою додавання вбудованої інформації про стиль елемента A. Додайте style до складу атрибутів елемента A, відповідного посиланням, фон якої необхідно змінити. У вміст атрибута style помістіть CSS-властивість background-color з заданим значенням, що представляє собою коректний ідентифікатор кольору фону. Наприклад, це може виглядати так:
2
Визначте фон посилання у зовнішній або вбудованої в документ таблиці стилів. У відповідну таблицю стилів додайте набір правил, що адресується селектором прийнятного рівня специфічності. У набір правил введіть властивість background-color аналогічно попередньому кроці. Специфічність селектора виберіть на основі правил каскадування CSS2 і необхідної області дії. Так, якщо необхідно задати колір всього одного посилання, має сенс використовувати ID-селектор, якщо таких посилань буде кілька, краще використовувати селектор атрибутів на основі значення class.
Наприклад, для установки зеленого фону певному посиланню в документі, можна додати в таблицю стилів набір правил:
A # ID_GREEN
{
background-color: # 00FF00;
}
Також слід встановити атрибут ID елемента A, відповідного потрібному посиланню, в значення ID_GREEN:
3
Заповніть фон посилання зображенням. Застосуйте методи, описані в першому і другому етапах, однак замість CSS-властивості background-color, використовуйте background-image. наприклад:
При необхідності додайте в набір 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;
}
Аналогічним чином можна вчинити і для створення фону з динамічно мінливих зображенням.
Статті за темою "Як зробити фон посилання"
Оцініть, будь ласка статтю
