Добралися ми до теми посилань! І сьогодні займемося кольором посилання! Ви вже помітили, що у посилання, на самому початку сторінки є колір. Чому саме цей колір і такий варіант посилання? Ну просто на інших сайтах кольору і варіанти декорування посилань інший, а тут, ось захотілося зробити так!
Тут закрався певна суперечність!
У термінології та візуалізації!
І я ніколи про це навіть і не замислювався, поки не став писати про це! Коли люди пишуть "колір посилання", то вони мають на увазі "колір тексту посилання"!
Але погодьтеся, що це і звучить, і виглядає по-різному! І якщо ви подивитеся на посилання, і коли ми виключимо текст посилання - залишиться лише колір посилання!
Тому, мені здається, що правильніше задній фон посилання, все-таки називати кольором посилання. Хоча ви, можете думати, як вам подобається!
Закінчили зі вступом, тепер, що стосується посилань! Для того, щоб зробити кольорову посилання, можна скористатися двома способами!
- Змінити колір посилання,
1.1. - Cоздадім нову, просту, порожню сторінку, в неї вставимо стилі, в яких пропишемо властивість - колір посилання.
1.2. - Змінимо колір посилання на даній сторінці, до якої вже прикріплений файл css (І в якому, вже прописаний колір посилання ось він.) Тут потрібно відзначити, що якщо вам потрібно зробити колір посилання відмінною від всіх основних посилань на сторінці - цей варіант, як раз той, що потрібно!
Звичайно, я віддаю перевагу другому варіанту, але для повноти картини почнемо з першого!
Колір посилання без файлу css.
Для того, щоб зробити посилання кольоровий в новому документі, нам буде потрібно:
- Нова, порожня, проста сторінка.
- Код посилання.
- Стиль, з прописаним в ньому кольором посилання.
Код посилання звичайний, і кольору тут немає ніякого!
- кінець посилання
"Код кольоровий посилання" - текст посилання.
Далі, ми повинні створити, на самій сторінці, стиль для тега
background-color: # F4F307; - колір нашого лінку.
font-size: 17px; - розмір тексту посилання.
Код стилю кольоровий посилання.
Ось так буде виглядати код нашої сторінки з приписаним кольором посилання!
Дивимося, на цю кольорову посилання в натурі.
Поміняємо колір посилання на даній сторінці.
Тепер, приступимо до другого варіанту - змінимо колір посилання на даній сторінці. До даної сторінці прикріплений файл css, в якому вже прописаний колір посилання.
Для того, щоб перебити даної колір посилання, нам потрібно прописати в самій посилання новий клас або id.
Назвемо цей клас - Primer-ismenenoy-ssilki
І та верхній рядок з посиланням, буде у нас виглядати так:
Пояснення всіх елементів см. В пункті 1.1.
Далі, нам потрібно прописати стиль для цієї кольорової посилання!
Якщо ми в першому варіанті прописали властивості для посилання таким чином,
Тому, ми і прикріпили до заслання новий клас. Тепер нам потрібно стиль змінити і прописати в ньому властивість цього класу.
Ще відзначимо, що потрібно додати до калассу id, в котрому і знаходиться остновной на цій сторінці!
#rightPan - id, основного діва, в якій написані ці рядки.
Primer-ismenenoy-ssilki - новий клас, в якому прописаний колір, що відрізняється від осикового кольору посилань на даному сайті.
Вставимо код посилання і стиль в дану сторінку і отримаємо ось таке:
Ще відзначимо, що, коли ви наведете курсор на посилання, то буде виконано властивість a: hover - основний, для всіх посилань на цьому сайті. Для того щоб змінити властивості a: hover, для даної посилання, ви повинні прописати для класу Primer-ismenenoy-ssilki - a: hover окремо! Ми напишемо скоро і про це!
Колір посилання через css.
Ми вже створили файл css. прикріпили його до сторінці і тепер треба прописати колір посилання в даному документі.
Для того, щоб прописати колір посилання в файлі css, як наприклад на цій сторінці, нам знадобиться код, ось такий:
a background-color: # D3F1EF;
font-size: 16px;
>
І він би спрацював, але сам текст знаходиться в діві, який має назву rightPan, тому, його потрібно додати в даний код.
+ додамо відступ зліва і справ - padding: 0 10px 0;
+ додамо колір тексту посилання - color: # 2F5958;
- сам колір посилання - background-color: # D3F1EF;
+ скасуємо всяке декорування тексту - text-decoration: none;
+ додамо розмір тексту - font-size: 16px;
Код посилання в кольорі, через файл css.
#rightPan a padding: 0 10px 0;
color: # 2F5958;
background-color: # D3F1EF;
text-decoration: none;
font-size: 16px;
>
От і все! Тепер на всіх сторінках сайту колір посилання буде саме такою!