Псевдоклассы CSS
Псевдоклассы CSS используются для добавления стилей к HTML-элементам, когда выполняется какое-то определенное условие. Какое именно условие должно быть соблюдено зависит от самого псевдокласса, который добавляется к селектору. Например, это может быть момент наведения пользователем курсора мыши на элемент или определенное положение элемента в дереве HTML-документа и т.д.
Псевдоклассы указываются следующим образом: сначала записывается какой-нибудь простой селектор (класс, идентификатор, селектор атрибутов и т.д.), а затем через двоеточие (:) сам псевдокласс. Общий синтаксис:
Так как псевдокласы имеют отношение к селекторам, а не свойствам CSS, то, к сожалению, их нельзя использовать во встроенных стилях создаваемых с помощью атрибута style.
Пример использования псевдоклассов CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Псевдоклассы CSS</title>
<style type="text/css">
a:link { color: red; } /* красный цвет непосещенной ссылки */
a:visited { color: blue; } /* синий цвет посещенной ссылки */
a:hover {
color: green; /* зеленый цвет ссылки под курсором мыши */
font-weight: bold; /* жирный шрифт */
text-decoration: none; /* убираем подчеркивание */
}
a:active { color: yellow; } /* желтый цвет ссылки в момент нажатия */
tr:hover {
background: green; /* зеленый цвет рядов таблицы под курсором мыши */
}
td {
padding: 5px; /* внутренние отступы ячеек таблицы */
border: 1px #000 solid; /* стили рамки вокруг ячеек */
}
</style>
</head>
<body>
<p><a href="/">Самостоятельное создание сайтов</a></p>
<table>
<tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td><td>Ячейка 1.3</td></tr>
<tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td><td>Ячейка 2.3</td></tr>
<tr><td>Ячейка 3.1</td><td>Ячейка 3.2</td><td>Ячейка 3.3</td></tr>
</table>
</body>
</html>Результат в браузере
Самостоятельное создание сайтов
| Ячейка 1.1 | Ячейка 1.2 | Ячейка 1.3 |
| Ячейка 2.1 | Ячейка 2.2 | Ячейка 2.3 |
| Ячейка 3.1 | Ячейка 3.2 | Ячейка 3.3 |
В этом примере был изменен цвет ссылок в зависимости от их состояния (непосещенная, посещенная, под курсором мыши, в момент нажатия), а также цвет рядов таблицы при наведении на них курсора мыши.
На что надо обратить внимание. Ну, во-первых, если вы недавно были на главной странице сеодон.ру, то цвет ссылки у вас сразу окрасится в «посещенный». Во-вторых — никогда не изменяйте размер или жирность шрифта ссылок в зависимости от их состояния, как было сделано в примере. Так как при этом размер ссылок начинает прыгать, что очень раздражает посетителей, да и вообще некрасиво, а вот убирать у них подчеркивание бывает очень даже к месту.
Internet Explorer 6.0 понимает псевдокласс :hover только для тега <A>, поэтому цвет рядов таблицы в нем не будет меняться.
Домашнее задание.
Задание будет довольно сложным, поэтому я не уверен, что вы сможете самостоятельно выполнить все так, как показано в результате задания, но тем интересней, попытайтесь.
- Возьмите макет одного из предыдущих домашних заданий и укажите в нем стили ссылок во всех меню так, как показано в результате. Возможно для этого вам придется убрать лишние стили, которые были актуальны для того задания и немного изменить HTML-код.
- Сделайте так, чтобы любой первый дочерний элемент (надеюсь помните, что это значит) находящийся внутри любого параграфа отображал текст красным цветом. При этом, если первым дочерним является <STRONG>, то текст внутри него должен быть дополнительно еще и подчеркнут.
- Разместите на странице три изображения и пусть они частично накладываются друг на друга. Сделайте так, чтобы та картинка, которая находится выше в HTML-коде, располагалась поверх двух других. Тут вам понадобится свойство z-index, но не пытайтесь его освоить «с наскока». Это свойство, как и вообще позиционирование, требует к себе очень бережного и нежного отношения, хотя само по себе оно и не сложное, а просто немного запутанное.
| Соседние селекторы | ← Содержание → | Псевдоэлементы |