Урок 4. Псевдоселектори посилань

Здрастуй, шановний читачу.

Це четвертий урок вивчення CSS. З даного уроку ви дізнаєтеся що таке псевдоселектори посилань і як їх використовувати.

Перед вивченням CSS пройдіть попередні уроки:

Урок 1. Що таке CSS?
Урок 2. Базові селектори
Урок 3. Групові селектори і селектори нащадків

Теорія та практика

Цей урок буде невеликим але цікавим. Сьогодні ми розглянемо властивості посилань.

У посилання може бути 4 стану:

1. Коли ми тільки відкрили сторінку і нічого не зробили з посиланням.
2. Коли ми навели на посилання.
3. Коли ми натиснули на посилання.
4. Коли ми перейшли.

Для кожного стану в CSS є свій селектор. Розглянемо їх:

• Коли ми нічого не робили з посиланням стан в CSS позначається просто a {властивості-}
• Коли ми навели на посилання - a: hover {властивості-}
• Коли натиснули на посилання - a: active {властивості-}
• Коли перейшли - a: visited {властивості-}

Якщо в CSS не задані властивості, то браузер сам задає властивості за замовчуванням. Але якщо ви хочете самі задати колір і стиль посилань, ви можете зробити це через дані псевдоселектори.

Розглянемо на прикладі. У нас є наступна html сторінка:

1234567891011

lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;link rel="Stylesheet" type="Text / css" href="Style.css"gt;lt;/headgt;lt;bodygt;lt;pgt; Вивчення CSSlt;/pgt;lt;pgt; lt;a href="#"gt; Як швидко вивчити технологію CSSlt;/agt; lt;/pgt;lt;/bodygt;lt;/htmlgt;

Подивіться які кольори і стилі браузер задає за замовчуванням (без властивостей в файлі CSS):

Відео: Курс CSS - Урок №6. Псевдоселектори посилань

Подивитися приклад

Нині ж поставимо свої власні властивості посиланнях через псевдоселектори:

123456789101112131415

a{ / * Посилання з якої щось робили * /color:# 000000- /* чорний колір */}a: hover{ / * Посилання при наведенні * /color:# FFA807- /* помаранчевий колір */}a: active{ / * Посилання при натисканні * /color:# 07ED00- /* зелений колір */}a: visited{color:# F700EF- /* рожевий колір*/}

Відео: GoToWeb - Відеокурс Html і Css, урок 31, селектори CSS, 3 частина - Псевдокласи

Після того, як додали CSS код вище в ваш файл стилів отримали наступне:

Подивитися прімерСкачать

Ми розглянули сьогодні псевдоселектори посилань, за допомогою яких можна задавати властивості для посилань в різних станах. Пробуйте все прописати руками. Тоді ви краще запам`ятайте матеріал.

Більше практикуйтеся!