Далее на странице...
В CSS оформление для некоторых элементов, например, для текстовых ссылок, задается с помощью псевдоклассов.
Псевдоклассы - это переменные, при помощи которых меняется оформление определенных элементов страницы в основном в зависимости от действий пользователя или в зависимости от положения этих элементов.
Синтаксис применения псевдоклассов немного отличен от привычного синтаксиса CSS и имеет следующую структуру:
Селектор: Псевдокласс {свойство: значение; свойство: значение;...}
Естественно, сначала указываем селектор, чтобы браузер понимал к какому элементу или в каком месте страницы будет применяться стиль, описанный в фигурных скобках.
А вот после селектора следует поставить двоеточие и указать наименование нужного псевдокласса. Таким образом, стилевое оформление будет применено к определенному элементу страницы только при соблюдении определенных условий, которые характерны для указанного псевдокласса.
Следует знать, что при работе с псевдоклассами, можно применять селектор по элементу,селектор по классу и контекстный селектор. То есть задавать стилевое оформление, используя псевдоклассы, можно при помощи тега (глобальные стили), который как известно располагается в голове документа. Либо работать с внешним файлом со стилями (связанные или внешние стили).
Параметр style не используется для применения псевдоклассов (внутренние стили ).
Ссылки и псевдоклассы active, link, visited и hover
Псевдоклассы, работающие с ссылками, применяются к тегу <a>.
В зависимости от используемого псевдокласса, действий пользователя и указанных свойств CSS меняется оформление ссылок.
- active – псевдокласс определяет стиль для активных ссылок. Ссылка является активной в момент нажатия на нее.
- link – псевдокласс определяет стиль для ссылок, которые еще не посещались.
- visited – псевдокласс определяет стиль для посещенных ссылок. Браузер запоминает, что ссылка посещалась, и какое-то время ссылка отображается в соответствии с заданным стилем.
- hover – псевдокласс определяет стиль, который применяется к ссылке в момент наведения на нее курсора.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Ссылки и псевдоклассы </title>
<style type="text/css">
a:link {color:#0066FF; font-size:18px; font-family:, Courier, monospace;}
a:visited {color:#0066FF; font-size:18px; font-family:, Courier, monospace;}
a:hover {color:#009933; font-size:20px; text-decoration:none;}
a:active {color:#009933; font-size:20px; text-decoration:none; font-weight:bold;}
a.class:link {color:#009933; font-size:18px; font-family: , Courier, monospace;}
a.class:visited {color:#009933; font-size:18px; font-family: , Courier, monospace;}
a.class:hover {color:#FF0000; font-size:20px; text-decoration:none;}
a.class:active {color:#990000; font-size:20px; text-decoration:none;}
</style>
</head>
<body>
<p> <a href="view_tag.php?id=3" target="_blank"> Ссылка на тег а </a> </p>
<p> <a href="view_html_step.php?id=6" target="_blank"> Ссылки в HTML </a> </p>
<p> <a href="view_css_step.php?id=2" target="_blank" class="class"> Селектор CSS </a> </p>
</body>
</html>
В приведенном примере мы применили псевдоклассы active, hover, link и visited для оформления ссылок. В голове документа, в теге <style>, указаны два стиля.
В первом случае псевдоклассы влияют на оформление всех ссылок документа, так как при описании стиля использовался селектор по элементу.
Во втором случае, использование селектора по классу, позволяет применять, указанный стиль (идентифицированный как .class) для оформление одной или нескольких ссылок по выбору разработчика.
Псевдоклассы active и hover
Если псевдоклассы link и visited работают исключительно с тегом <a>, то псевдоклассы active и hover применимы также и к другим элементам страницы.
Псевдокласс active позволяет применить стиль элемента при клике по его содержимому или по области, занимаемой этим элементом. Он используется редко, так как не часто посетители сайта кликают по каким-либо элементам страницы, за исключением ссылок.
А вот выделение того или иного элемента страницы при наведении на него указателя мыши порой может быть полезным. Поэтому псевдокласс hover бывает востребован и в других случаях, помимо выделения ссылок.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Псевдоклассы active и hover </title>
<style type="text/css">
p:active {color:#FF0000; font-style:italic}
tr {text-align:center;}
tr.head:hover {background-color:#009966; color:#FFFFFF;}
tr:hover {background-color:#0099FF; color:#FFFFFF;}
</style>
</head>
<body>
<p> Наведите на любую строку таблицы курсор!</p>
<table width="700px" border="1">
<caption> Каталог аквариумов: </caption>
<tr class="head">
<td> Наименование </td>
<td> Описание </td>
<td> Стоимость </td>
<td> Наличие </td>
</tr>
<tr>
<td> Аквариум "Классика 60" </td>
<td> Размер 556*306*510 Стекло 6 мм 2*15Вт </td>
<td> 2500 </td>
<td> + </td>
</tr>
<tr>
<td> Аквариум "Классика 75" </td>
<td> Размер 556*256*510 Стекло 6 мм 1*15Вт </td>
<td> 3000 </td>
<td> - </td>
</tr>
<tr>
<td> Аквариум "Трапеция 105" </td>
<td> Размер 706*356*510 Стекло 6 мм 2*18Вт </td>
<td> 3700 </td>
<td> + </td>
</tr>
</table>
</body>
</html>
В этом примере сначала, при помощи селектора по элементу, мы установили выравнивание текста в строках таблицы по центру. Затем, используя контекстный селектор tr.head совместно с псевдоклассом hover, мы установили стилевое офрмление, которое применили к первой строке таблицы. И далее, последнее стилевое офрмление мы применяем к остальным строкам таблицы, которые также как и первая строка, меняют свое оформление при наведении на них курсора.
При клике на абзац (тег), он также изменит свой стиль.
Псевдокласс дочерних элементов first-child
Дочерние элементы - это элементы, расположенные внутри других - родительских элементов. Например, пункты списка - теги являются дочерними по отношению к тегам или , которые образуют список.
Или, например, абзацы - теги , расположенные внутри контейнера , также будут являться дочерними элементами по отношению к тегу .
Так вот, псевдокласс first-child задает стиль для первого дочернего элемента.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Псевдокласс first-child </title>
<style type="text/css">
li {font-size:24px; color:#006699;}
li:first-child {color:#FF3300;}
</style>
</head>
<body>
<ul>
<li> Учиться </li>
<li> Учиться </li>
<li> И еще раз учиться </li>
</ul>
<ul>
<li> Вера </li>
<li> Надежда </li>
<li> Любовь </li>
</ul>
</body>
</html>
Как видите первый пункт каждого списка оформлен определенным образом, в отличие от остальных, имеющих одинаковое оформление.
Псевдокласс focus
Псевдокласс focus применим к тем элемента страницы, которые могут получить фокус. Например, фокус получают элементы, которые принимают ввод символов с клавиатуры или как-то реагируют при клике по ним курсором мыши: это теги <input>, <option>, <select>и <textarea>, а также тег <a>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Псевдокласс focus </title>
<style type="text/css">
input {border:#3399FF solid 1px;}
input:focus {color:#FF0033; font-size:16px; padding:3px;}
textarea {color:green; font-style:italic;}
textarea:focus {color:#3399FF;}
</style>
</head>
<body>
<form>
<p> <input type="text" size="50" value="Введите Имя..."> </p>
<p> <textarea name="text" cols="40" rows="5"> Коротко о себе... </textarea> </p>
<p> <input type="reset" value="Сбросить"> </p>
</form>
</body>
</html>
Псевдокласс lang
Псевдокласс lang позволяет установить правила оформления текста в элементе в зависимости от используемого языка, а также определить вид кавычек.
Синтаксис применения псевдокласса lang таков:
Элемент:lang(язык) {свойство: значение; свойство: значение;...}
В качестве языка используют следующие значения: ru — русский; en — английский; de — немецкий; fr — французский; it — итальянский.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Псевдокласс lang </title>
<style type="text/css">
p:lang(ru) {color:#00CC99; font-size:20px;}
p:lang(en) {color:#3399FF; font-size:20px; text-decoration:underline;}
p:lang(fr) {color:#FF0099; font-size:20px; font-style:italic;}
q:lang(ru) {quotes: "\201E" "\201C";}
q:lang(en) {quotes: "\201C" "\201D";}
q:lang(fr) {quotes: "\00ab" "\00bb";}
</style>
</head>
<body>
<p lang="ru"> <q lang="ru"> Здравствуйте </q> - Приветствие на Русском! </p>
<p lang="en"> <q lang="en"> Hello </q> - Greeting in English! </p>
<p lang="fr"> <q lang="fr"> Bonjour </q> - La salutation sur le francais! </p>
</body>
</html>
Пояснение к примеру: в зависимости от используемого языка, текст в абзацах оформлен определенным образом и используется конкретный тип кавычек.
Псевдоэлементы before и after
Псевдоэлементы before и after используются совместно со свойством content и предназначены для вставки желаемого содержимого соответственно до и после элемента к которому они добавляются.
Немного другими словами: свойство content непосредственно вставляет содержимое, а псевдоэлементы before и after указывают где это содержимое расположить.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Псевдоэлементы before и after </title>
<style type="text/css">
p.last:before {content: ; color:#FF0033;
font-size:18px;}
</style>
</head>
<body>
<p class="last"> В 2012-м человечество, возможно, победит рак. Этот тезис озвучил журнал The Economist, публикуя свою версию прогноза развития науки в 2012 году. </p>
<p> В 2012 году соцсети окончательно завоюют интернет и для многих рядовых пользователей попросту заменят его собой. Уже сегодня многие люди попросту не выходят за пределы своей любимой соцсети в течение дня. </p>
</body>
</html>
Пояснение к примеру: псевдоэлемент before указывает на то, что перед абзацами (тег ), к которым применяется стиль .last, будет располагаться фраза , оформленная определенным образом.
