урок 5

Як Ви пам'ятаєте з уроків по HTML посилання підрозділяються на:

Прописуючи ці атрибути в тезі ми визначали зовнішній вигляд посилань на WEB-сторінці. Колір посилання задавався шістнадцятковим значенням або назвою кольору.

В CSS параметри посилань визначається за допомогою псевдокласів визначають зовнішній вигляд тега. які прописують в таблиці стилів. Це робиться так:

a: link - не відвідування посилання;

a: visited - відвідані посилання;

a: focus - стан у фокусі;

a: hover - при установці курсора на посилання;

a: active - при активізації посилань (в момент натискання).

Як бачите, для елементу визначено п'ять псевдокласів (імена яких відокремлюються двокрапкою). Колір посилання задається знову ж виходячи зі смаків web-майстра або загального дизайну сайту (тобто колір будь-який подобається) зазначенням назви кольору або його шістнадцятковим значенням.

Примітка: Псевдоклас a: focus підсвічує положення табуляції для користувачів, які застосовують для навігації клавіатуру. Цей псевдоклас підтримують не всі браузери, тому він практично не застосовується.

Важливо. Всі ці псевдокласи імєєют однакову вагу (порядок виконання браузером), тому порядок в якому вони розміщуються у файлі CSS, має велике значення. Псевдоклас, який з'являється в файлі CSS пізніше, замінює собою преведущій. Правильний порядок зазначений вище!

В HTML все посилання мали обов'язкове підкреслення знизу. В CSS з'явилася цікава можливість додаючи до псевдоклас посилань властивість text-decoration з різними значеннями, впливати на підкреслення посилання. Це властивість може набувати таких значень:

text-decoration: none; - відключає поддчерківаніе;

text-decoration: overline; - підкреслення зверху;

Довавляя властивість text-decoration в псевдокласи посилань можна створювати нові класи з дуже цікавими ефектами.

Так само як і для простого тексту ми можемо поставити для посилань і інші властивості: певний шрифт, розмір шрифту, виділити посилання жирним.

Давайте на нашій тестовій сторінці для всіх посилань змінимо шрифт на Arial, зробимо його жирним. величиною 12px. Чи не відвідані посилання залишимо синього кольору з нижнім підкресленням, відвідані посилання зробимо чорного кольору, а ось посилання в момент наведення курсору зробимо червоного кольору і з верхнім підкресленням.

Відкриваємо файл зі стилями style.css і додаємо в наступний код:

a <
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
>

a: hover <
color: red;
text-decoration: overline;
>

Зберігаємо, оновлюємо файл index.html і дивимося. Ось що у нас вийшло.

Поділіться цією інформацією зі своїми друзями!

уроки HTML

CSS уроки

статті

Інструменти

Шаблони сайтів

книги

прикраси

Сайт від А до Я

Заробити в інтернеті

Обман в Інтернеті

Охорона праці

МОДУЛЬНІ КАРТИНИ

PHP УРОКИ

послуги

скрипти

SEO

jQuery

Спеціальна оцінка умов праці (Соуто) - АРМ

Платіжні системи Інтернету

УРОКИ ФОТОШОП

секретний розділ

З нами зробити сайт
зможе навіть Дитина!
"Сайт від А до Я"
Дізнатися зараз >>>

Хочете заробити?
2-х рівнева
Партнерська програма!
Приєднуйтесь.

Модульна картина: Розкіш червоного оксамиту

Модульна картина абстракція: Енергія сонця

Модульна картина: Сині троянди

Модульна картина: Водоспад

Модульна картина: Орхідеї

Реєстрація доменів

ТОВ "ПК" ЛюксСтрой "

Якщо Вам сподобався
наш сайт, встановіть
Нашу посилання. і
Отримайте подарунки.