Понеділок, 25.11.2024, 10:25
Головна Реєстрація RSS
Вітаю Вас, Гість
Меню сайту
Реклама
Категорії розділу
Архітектура ПК [1]
Архітектура та експлуатація персонального комп'ютера
СПЗ [12]
Системне програмне забезпечення та операційні системи
Комп'ютерна графіка [25]
КСМ [28]
Комп'ютерні системи та мережі
ІСІТО [1]
Інформаційні системи і технології обліку
Бухгалтерський облік [0]
АМтП [10]
Алгоритмічні мови та програмування
Копирайт рерайт [1]
СУБД [18]
Системи управління базами даних
ОКТ практикум [2]
Основи комп'ютерних технологій практикум
Інформатика (практ) [1]
інформатика практикум, практичні заняття
ТіОБВ [61]
Технологія і організація будівельного виробництва
ОСАПр [6]
Основи систем автоматизованого проектування, AutoCAD, ArchiCAD
ТіОБВ (заочники) [1]
Пошук
Статистика
Яндекс.Метрика
Онлайн всього: 1
Гостей: 1
Користувачів: 0
Форма входу
Календар
«  Грудень 2013  »
ПнВтСрЧтПтСбНд
      1
2345678
9101112131415
16171819202122
23242526272829
3031
Архів записів
Головна » 2013 » Грудень » 4 » Псевдокласи в CSS
15:19
Псевдокласи в CSS
Псевдокласи визначають динамічний стан елементів, які змінюються з часом або за допомогою дій користувача, а також положення в дереві документа. Прикладом такого стану служить текстове посилання, яке змінює свій колір при наведенні на нього курсора миші. При використанні псевдокласів браузер не перевантажує поточний документ, тому з їхньою допомогою можна отримати різні динамічні ефекти на сторінці. Синтаксис застосування псевдокласів наступний.

Елемент:Псевдоклас {Опис правил стилю}

Спочатку слідує елемент, до якого додається псевдоклас, потім ставиться двокрапка, після чого йде ім'я псевдокласа. Допускається застосовувати псевдокласи до імен ідентифікаторів або класів (a.menu: hover {color: green}) і контекстних селекторів (.menu a: hover {background: #fc0}). Умовно всі псевдокласи діляться на групи, які перераховані далі.

Псевдокласи, що визначають стан елементів

До цієї групи відносяться псевдокласи, які визначають поточний стан елемента і застосовують стиль до нього тільки в цьому випадку.

active

Відбувається при активації користувачем елементу. Наприклад, при наведенні курсору на посилання та натисканні лівої кнопки миші.

link

Застосовується до невідвідуваної ссилки, тобто ссилки, на які користувач ще не натискав. Браузер, причому, зберігає історію відвідувань деякий час, тому ссилка може бути позначена як відвідана хоча б тому, що по ній був зафіксований перехід раніше.
Зауваження

Запис A{...} і A: link {...} за своїм результатом рівноцінна, оскільки в браузері дає один і той же ефект, тому псевдоклас link можна не вказувати.

focus

Застосовується до елемента при отриманні ним фокусу. Наприклад, для текстового поля форми отримання фокусу означає, що курсор встановлений в полі, і за допомогою клавіатури можна вводити в нього текст (приклад 16.1).

Приклад 16.1. Застосування псевдокласса focus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <title>Псевдокласи</title> 
<style type="text/css"> 
INPUT:focus {
 color: red; /* Червоний колір тексту */
 }
 </style>
 </head> 
<body>
 <form action="">
 <p><input type="text" value="Чорний текст"></p> 
</form>
 </body> 
</html>
Результат прикладу показаний нижче.
У даному прикладі в текстовому полі міститься попередній текст, він визначається значенням параметра value тега <INPUT>. При клацанні по елементу форми відбувається отримання полем фокусу, і колір тексту змінюється на червоний. Досить клацнути в будь-якому місці сторінки (крім текстового поля, звичайно ж), як відбудеться втрата фокусу і текст повернеться до первісного чорного кольору.
Зауваження 1

Результат буде видно тільки для тих елементів, які можуть отримати фокус. Зокрема, це теги <A>, <INPUT>, <SELECT> і <TEXTAREA>.

Зауваження 2

Псевдокласс focus не підтримується браузером Internet Explorer.

hover

Псевдоклас hover активізується, коли курсор миші знаходиться в межах елемента, але клацання по ньому не відбувається.

visited

Даний псевдокласс застосовується до відвіданої ссилки. Зазвичай таке посилання змінює свій колір за замовчуванням на фіолетовий, але за допомогою стилів колір і інші параметри можна задати самостійно (приклад 16.2).

Приклад 16.2. Зміна кольору посилань

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <title>Псевдокласи</title>
 <style type="text/css">
 A:link {
 color: #036; /* Колір невідвіданих ссилок */
 }
 A:visited {
 color: #606; /* Колір відвіданих ссилок */
 }
 A:hover { 
color: #f00; /* Колір ссилок при наведенні на них миші */
 }
 A:active { 
color: #ff0; /* Колір активних ссилок */ 
} 
</style>
 </head>
 <body> 
<p> 
<a href="link1.html">Ссилка 1</a> | <a href="link2.html">Ссилка 2</a> 
| <a href="link3.html">Ссилка 3</a>
</p> 
</body>
 </html>
У даному прикладі показано використання псевдокласів спільно із ссилками. При цьому має значення порядок проходження псевдокласів. Спочатку вказується visited, а потім йде hover, в іншому випадку відвідані посилання не будуть змінювати свій колір при наведенні на них курсору. Псевдокласси link і visited можуть застосовуватися тільки до посилань, а псевдокласси active і hover також і до інших елементів документа. Це розширює набір прийомів і дозволяє створювати ефект перекочування, коли стиль елемента міняється при наведенні на нього курсору миші.
Зауваження

Браузер Internet Explorer 6 і молодше дозволяє використовувати псевдокласси active і hover лише для посилань. Починаючи з версії 7.0 псевдокласси в цьому браузері можна додавати і до інших елементів.

У прикладі 16.3 показана таблиця, рядки якої змінюють свій колір при наведенні на них курсору миші. Це досягається за рахунок додавання псевдокласса hover до селектора TR.

Приклад 16.3. Виділення рядків таблиці

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <title>Псевдокласи</title> 
<style type="text/css">
 TR:hover { background: #fc0; /* Змінюємо колір фону рядка таблиці */
 } 
</style>
 </head> 
<body>
 <table width="400" border="1" cellpadding="4" cellspacing="0">
 <tr> 
 <th> </th>
 <th>Піки</th>
 <th>Трефи</th>
 <th>Бубни</th>
 <th>Черви</th> 
</tr>
 <tr>
 <td>Том</td> 
<td>5</td> 
<td>2</td>
 <td>4</td> 
<td>2</td> 
</tr> 
<tr>
 <td>Джері</td>
 <td>2</td> 
<td>7</td>
 <td>1</td>
 <td>3</td>
 </tr> <tr>
 <td>Нео</td>
 <td>5</td> 
<td>4</td> 
<td>3</td>
 <td>1</td>
 </tr> 
<tr> 
<td>Малий</td>
 <td>1</td>
 <td>0</td>
 <td>5</td>
 <td>7</td> 
</tr>
 </table>
 </body>
 </html>
Результат прикладу показаний нижче.
  Піки Трефи Бубни Черви
Том 5 2 4 2
Джері 2 7 1 3
Нео 5 4 3 1
Малий 1 0 5 7

Псевдокласи, що мають відношення до дерева документа

До цієї групи відносяться псевдокласи, які визначають положення елемента в дереві документа і застосовують до нього стиль в залежності від його статусу. Таких псевдокласів не так багато, але деякі браузери розширюють цей список, наприклад, Netscape підтримує досить велика кількість псевдокласів, які можна віднести до цієї групи.

first-child

Застосовується до першого дочірнього елементу селектора, який розташований у дереві елементів документу. Щоб стало зрозуміло, про що мова, розберемо невеликий код (приклад 16.4).

Приклад 16.4. Використання псевдокласа first-child

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<title>Псевдокласи</title>
 <style type="text/css">
 B:first-child { 
color: red; /* Червоний колір тексту */
 } 
</style>
 </head>
 <body>
<p>
<b>Lorem ipsum
</b> dolor sit amet,
 <b>consectetuer
 </b> 
adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet 
dolore magna aliguam erat volutpat.
</p> 
<p><b>Ut wisis enim</b> ad minim 
veniam, <b>quis nostrud</b> exerci tution ullamcorper suscipit lobortis nisl
 ut aliquip ex ea <b>commodo consequat</b>.
</p>
 </body> 
</html>
Результат прикладу показаний нижче (рис. 16.2).

Рис. 16.2. Використання псевдокласса first-child

У даному прикладі псевдокласс first-child додається до селектора B і встановлює для нього червоний колір тексту. Хоча контейнер <B> зустрічається в першому абзаці три рази, червоним кольором буде виділено лише перша згадка, тобто текст «Lorem ipsum». В інших випадках вміст контейнера <B> відображається чорним кольором. З наступним абзацом все починається знову, оскільки батьківський елемент помінявся. Тому фраза «Ut wisis enim» також буде виділена червоним кольором.
Зауваження

Браузер Internet Explorer підтримує псевдокласс first-child починаючи з версії 7.0.

Псевдокласс first-child зручніше всього використовувати в тих випадках, коли потрібно задати різний стиль для першого і інших однотипних елементів. Наприклад, за правилами типографіки червону рядок для першого абзацу тексту не встановлюють, а для решти абзаців додають відступ першого рядка. З цією метою застосовують параметр text-indent з потрібним значенням відступу. Але щоб змінити стиль першого абзацу і прибрати для нього відступ буде потрібно скористатися псевдоклассом first-child (приклад 16.5).

Приклад 16.5. Відступи для абзацу

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<title>Псевдокласи</title> 
<style type="text/css">
 P {
 text-indent: 1em; /* Відступ першого рядка */
 } 
P:first-child {
 text-indent: 0; /* Для першого абзацу відступ прибираємо */
 }
 </style> 
</head>
 <body>
 <p>Історію цю вже почали забувати, хоча перебували городяни,
 які час від часу розповідали її новоприбулим в місто
 відвідувачам.</p> 
<p>Легенда обростала подробицями і вже зовсім не нагадувала
що сталося в дійсності подія. І, тим не менш, ні
одна людина не наважувався заїкнутися про неї з настанням темряви.</p> 
<p>Але одного разу в місто знову ввійшов незнайомець. Він кульгав на
 ліву ногу.</p> 
</body>
 </html>
Результат прикладу показаний нижче (рис. 16.3).

Рис. 16.3. Зміна стилю першого абзацу

У даному прикладі перший абзац тексту не містить відступу першого рядка, а для інших він встановлений.
Категорія: КСМ | Переглядів: 1663 | Додав: Gryzley | Рейтинг: 0.0/0
Всього коментарів: 0
Ім`я *:
Email *:
Код *: