Как делать в css Псевдоклассы.

Псевдоклассы - это особые свойства, которые позволяют менять стиль элемента в зависимости от действий пользователя, а так же положения этого элемента (тега) в общем потоке документа, что позволяет разбавить дизайн страницы некой динамикой и логикой. Классическим примером применения псевдоклассов является ссылка, которая меняет свой цвет при наведении на неё курсором.

Вот список всех псевдоклассов:

· hover - Стиль элемента на который наведён курсор мыши.

· active - Стиль для ссылки которая становится активной, но переход по ней еще не совершен.

· visited - Стиль для недавно посещённой ссылки.

· link - Стиль для нечасто посещаемой ссылки.

· focus - Стиль элемента находящегося в фокусе.

· first-child - Стиль первого дочернего элемента.

· lang - Определяет язык, который используется в фрагменте документа.

О каждом псевдоклассе мы отдельно поговорим ниже, а сейчас пару слов о синтаксисе.

Для того чтобы применить тот или иной псевдокласс к элементу и определить его стиль нужно следовать следующим правилам синтаксиса:

a:hover { color:#ff0000}

где:

a - элемент (селектор), а проще тег к которому мы решили применить псевдокласс в нашем случае это ссылка.
:hover - после двоеточия собственно нужный нам псевдокласс.
{color:#ff0000} - ну и блок объявления стилей в фигурных скобках.

А вся эта запись вместе будет говорить о том, что если навести курсором на такую ссылку - то она покраснеет.

Так собственно мы подошли к первому, самому популярному, псевдоклассу hover.

Псевдокласс hover.

Как Вы уже, наверное, догадались, псевдокласс hover активизируется в том случае, если на элемент наведен курсор.

Ну а раз уж догадались просто покажу пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Псевдоклассы</title>
<style type="text/css">
.menu {
display: block;
width: 180px;
background-color:#fff8dc;
color:#008;
font-size: 16px;
text-decoration: none;
padding: 3px;
}
.menu:hover {
display: block;
width: 180px;
background-color:#b8860b;
color:#fff;
padding: 3px;
font-size: 16px;
text-decoration: none;
}
tr:hover {
background-color:#b8860b;
}
</style>
</head>
<body>
<p>Чем Вам не блок навигации по сайту?</p>
<a href="#" class="menu">Главная</a>
<a href="#" class="menu">Карта сайта</a>
<a href="#" class="menu">Купить слона</a>
<a href="#" class="menu">Продать слона</a>
<a href="#" class="menu">Взять слона на прокат</a>
<hr>
<p>А вот ещё один распространенный трюк.. строки в таблице подсвечиваются при наведении на них курсором.</p>
<table border="1" bordercolor="#ccc" width="600" cellpadding="1" cellspacing="0">
<tr>
<td>Иванов</td><td>+</td><td>&nbsp;</td><td>&nbsp;</td><td>+</td><td>&nbsp;</td> <td>&nbsp;</td>
</tr>
<tr>
<td>Петров</td><td>&nbsp;</td><td>+</td><td>&nbsp;</td><td>&nbsp;</td><td>+</td> <td>&nbsp;</td>
</tr>
<tr>
<td>Сидоров</td><td>&nbsp;</td><td>&nbsp;</td><td>+</td><td>&nbsp;</td> <td>&nbsp;</td><td>+</td>
</tr>
</table>
</body>
</html>

Несколько слов к примеру выше..

Как Вы наверное заметили в качестве селектора псевдокласса может выступать не только какой либо элемент - тег, но и класс или идентификатор. Так в примере к классу .menu применён псевдокласс hover и синтаксис приобретает следующий вид:

.menu:hover { color:#ff0000;}

Не запутались в терминологии?

Простыми словами мы сказали браузеру что мол подсвечивай красным только те ссылки которые находится в навигационном блоке (выведены в класс.menu ), а остальное оставь как есть!

Псевдокласс hover может быть применён к любому элементу, выводимому на экран, так в нашем примере, для того чтобы организовать подсветку строк таблицы мы применили его к тегу <tr>. Однако следует отметить, что браузер Internet Explorer 6 и его более ранние версии поддерживает псевдокласс hover только для ссылок - тег <a>, так что, к примеру, строки таблицы, при наведении на них курсора, в браузерах IE6 и ниже подсвечиваться не будут!








Дата добавления: 2016-02-02; просмотров: 706;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.003 сек.