В этом последнем учебнике по селекторам я представляю вам очень специальную форму селекторов. Мы говорим о псевдоклассах и псевдоэлементах. Это селекторы, которые не относятся к конкретным HTML-элементам, а генерируются устройством вывода.
С помощью псевдоклассов и псевдоэлементов можно определить декларации для частей HTML-элементов, которые нельзя однозначно описать HTML-элементом. Типичные примеры - это недавно нажатая или еще не посещенная гиперссылка.
Оформление гиперссылок
Очень часто требуется оформить гиперссылки на странице. Для этого CSS предлагает множество возможностей, с помощью которых можно обращаться к различным состояниям гиперссылок и, в конечном итоге, визуально их настраивать.
Если вы хотите, например, задать гиперссылке красный цвет, это будет выглядеть так:
a:link {
color: red;
}
С помощью a:visited выделены уже посещенные гиперссылки. Следующим синтаксисом можно отобразить такие гиперссылки, которые были нажаты ранее, синим цветом.
a:visited {
color:blue;
text-decoration:none;
}В браузере это выглядит следующим образом:
Если вы хотите оформить отдельно гиперссылки, которые в данный момент нажаты, это также возможно.
a:active {
font-weight: bold;
color: blue;
text-decoration: none;
}
Здесь используется синтаксис a:active.
Синтаксис a:hover, напротив, относится к моменту, когда указатель мыши проходит над гиперссылкой. Кроме того, существует еще один псевдоэлемент a:focus. Он описывает момент, когда гиперссылка получает фокус.
Дополнительные псевдоэлементы
Существуют псевдоэлементы, с помощью которых можно обращаться к частям других элементов. Типичным примером является ::first-letter. Этот псевдоэлемент выбирает первый символ текущего элемента. Он может использоваться для всех элементов, содержащих текст. Но будьте осторожны: псевдоэлементы должны быть указаны только в конце всех селекторов. Они должны стоять перед открывающей фигурной скобкой.
h1::first-letter {
color: blue;
}
С помощью ::first-line можно обратиться к первой строке элемента. Этот псевдоэлемент применим исключительно к блочным элементам. Пример:
p::first-line {
background-blue;
}
И вот результат в браузере:
ein
С помощью псевдоэлементов :after и :before можно добавлять дополнительное содержимое перед и после элемента. С помощью параметра content определяется то, что должно быть выведено.
• normal – обычный псевдоэлемент не создается.
• none – псевдоэлемент не создан.
• <string> – будет выведена указанная здесь строка. Строки должны быть в одинарных или двойных кавычках.
• <uri> – вставляется ресурс, указанный по URI.
• <counter> – определяет счетчик или обращается к определенному счетчику.
• attr(<identifier>) – вставляется значение указанного в скобках атрибута.
• close-quote – добавляет закрывающую кавычку.
• no-close-quote – не добавляет закрывающую кавычку, но увеличивает уровень вложенности на один.
• no-open-quote – не добавляет открывающую кавычку, но увеличивает уровень вложенности на один.
• open-quote – добавляет открывающую кавычку.
Пример:
ul li:before {
content: uri("bullet.gif");
}
С CSS3 был также представлен псевдоселектор :not. С его помощью можно очень легко выбрать нужное содержимое. Первый пример показывает, насколько эффективен этот псевдоселектор на самом деле. Предположим, вы хотите выбрать все гиперссылки, у которых нет атрибута href. Соответствующий синтаксис выглядит так:
a:not([href])
"Обычные" гиперссылки не затронуты этим синтаксисом. Однако это позволяет получить доступ к определениям якорей.
<a name="top">Seitenanfang</a>
Немного более подробный пример проиллюстрирует мощь :not. В документе определены различные абзацы текста.
<body> <h1>PSD-Tutorials.de</h1> <p>Das ist ein Absatz.</p> <p>Das ist ein weiterer Absatz.</p> <div>Das ist ein Textbereich.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Помимо параграфов с тегом p, существует также область div и гиперссылка. Теперь должно произойти следующее:
• Все параграфы с тегом p должны иметь черный цвет текста.
• Везде, где нет параграфов с тегом p, используется красный цвет текста.
Соответствующий синтаксис CSS выглядит следующим образом:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Принцип наследования
Одна из важнейших вещей при понимании определений CSS - это наследование. Фактически, в CSS стили элементов наследуются от одного к другому.
Пример:
html {
color: red
}С помощью этого определения к элементу html назначается цвет текста красный.
Из-за принципа наследования это определение цвета теперь сначала применяется ко всем элементам, которые являются подчиненными элементу html. Теперь все эти элементы будут отображаться изначально красным цветом, если они находятся ниже элемента html. Преимущество такого подхода: для этих элементов вам не нужно явно указывать красный цвет. Но что, если содержимое параграфов с тегом p не должно отображаться красным цветом? Тогда нужно перезаписать наследуемое определение цвета из html.
html {
color: red;
}
p {
color: #000;
}
Что происходит, если теперь существуют два элемента p и div?
<body> <p>PSD-Tutorials.de</p> <div>Welt</div> </body>
Результат выглядит следующим образом:
Определение цвета в html влияет только на содержимое div. Параграф с тегом p, напротив, будет отображаться черным цветом.
В CSS существуют различные способы определения стилей. Именно поэтому для элемента могут быть противоречивые инструкции. Для таких случаев в CSS предусмотрен принцип весов. По этому принципу четко определено, какие инструкции имеют приоритет для элемента. Я не хочу углубляться в детали этого принципа сейчас. Вы можете найти подробную информацию об этом, например, на странице http://wiki.selfhtml.org/wiki/CSS/Kaskade или также на http://www.thestyleworks.de/basics/cascade.shtml.
Мое желание - показать вам, на что следует обращать внимание при определении свойств CSS. Для этого служит следующий пример:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC;
}
h2 strong {
color: red;
}
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>В браузере это выглядит следующим образом:
Как видите, слова, выделенные тегом strong, форматируются по-разному. Какая именно форматировка будет применена, в конечном итоге зависит от порядка определений.
Также существует ключевое слово !important, с помощью которого можно отметить инструкцию CSS как особенно важную.
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC !important;
}
h2 strong {
color: red;
}
</style>Здесь снова взглянем на результат:
В этой связи обязательно ознакомьтесь с упомянутыми в этом руководстве источниками. (Хотя, вероятно, на первых порах вам не нужно так глубоко вникать в эту тематику).
