Псевдо-элементы и псевдо-классы в реализации
CSS2
Все меньше и меньше остается сторонников
"чистого" HTML. На сегодняшний день страница с
такими тегами, как например FONT, является
раритетом или по крайней мере музейной
ценностью. Обратите внимание, что я имею в виду
страницы созданный с помощью текстового
редактора, так как FrontPage и подобные программы
сами лепят довольно несуразный код, даже не
спрашивая на то разрешения.
Но это все лирическое отступление, которым я
хотел отпугнуть от дальнейшего чтения невежд и
оставить перед мониторами поклонников
"ручной" верстки. Речь в этой статье пойдет
об особенностях спецификации CSS2, а именно о
псевдо-элементах и псевдо-классах.
Оговорюсь сразу, не пытайтесь сразу кидаться к
своим броузерам и опробывать на них ваши новые
знания. Microsoft Internet Explorer 4.0 поддерживает лишь часть
(хотя и немалую) возможностей css, а о реализации
стилевых листов в Netscape Navigator без слез говорить
просто невозможно. И это обидно, ведь в рабочую
группу W3C по стилевым листам входят специалисты
множества известных компаний Microsoft`а и Netscape`а в
том числе. В общем эту статью можно отнести к
разделу - "хозяйке на заметку" и ждать
времен, когда компании конкуренты будут строго
реализовывать рекомендации.
Итак, начинаем основное повествование. Сначала
мы определимся, что такое псевдо-классы и
элементы в общем, а потом перейдем к конкретному
разбору возможностей каждого из них.
Псевдо-элементы и псевдо-классы созданы для
автоматического генерирования содержимого,
изменения отдельных параметров, форматирования
текста и содержимого страницы в целом без
исправления общего "дерева" элементов и
добавления лишних тегов. Возможно это довольно
непонятно, но я уверен, что при дальнейшем чтении
все станет на свои места.
Начнем наш обзор с псевдо-классов и первым у нас
будет - :first-child. Представьте себе такую
ситуацию: у вас на сайте находиться большое число
статей, каждая из которых начинается с небольшой
цитаты или введения. Теперь вы хотите, чтобы этот
участок текста, обязательно был синего цвета и
выделялся курсивом. На этом самом моменты, мы и
остановимся. У вас есть два пути. Либо вы пишите
новые класс в ваш *.css файл, задавая в него все
необходимые установки и переправляя все ваши HTML
элементы статей на этот класс, либо вы задаете
параметры к :first-child и больше не о чем не
беспокойтесь. Объясню на живом примере. Все ваши
статьи заключены в блочный тег DIV, а цитаты и все
остальные параграфы текста разбиты на
<P></P>. В этом случае цитата оказываеться в
первом (first-child) параграфе по отношению к тегу DIV.
Вы открываете файл с описанием стиля вашего
веб-сайта и пишите там следующую строчку:
P:first-child {color: navy; font-style: italic}
теперь для общего представления посмотрите на
отдельный HTML код:
<DIV>
<P>
Здесь располагается цитата синего цвета и
курсивного начертания
</P>
<P>
Здесь располагается остальной текст статьи,
который представлен по описанию элемента P в
общем css файле.
</P>
</DIV>
Из приведенного выше примера четко видно, что
именно параграф с цитатой идет первым в блочном
теге DIV, поэтому именно он выделяется от
остального текста.
Это все, что можно сказать о :first-chtld, идем дальше.
Сейчас мы рассмотрим сразу два псевдо-класса
относящиеся исключительно к A элементам
страницы. Это :link и :visited.
Бывалые дизайнеры могут сразу пропустить этот
параграф, потому что я уверен, что ничего нового
они из него не узнают. Для тех, кто не знает
предназначения этих классов объясняю. У ссылки
на HTML странице может быть всего два состояния (в
принципе их пять, но об этом чуть ниже) - состояние
в котором ссылку еще не посещали и состояние в
котором ссылка была ранее просмотрена (:link и :visited,
соответственно). Для каждого из этих состояний в
спецификации CSS2 разрешено задание отдельных
параметров. Например, если пользователь по
ссылке не ходил, то она выделяется серым цветом,
ну а если ссылка им ранее посещалась, то она имеет
черный цвет. Добиться этого эффекта можно,
разместив в вашем css файле следующие строки:
A:link {color: silver}
A:visited {color: black}
Кстати, помимо цвета естественно можно
задавать и любые другие атрибуты по вашему
усмотрению.
Теперь я расскажу еще о трех псевдо-классах
отвечающих за последние три состояния ссылки.
Это :hover, :focus и :active.
:hover. Этот класс отвечает за отображение
ссылки в тот момент, когда курсор мыши находиться
непосредственно над ней.
:active. Этот класс отвечает за
отображение ссылки, когда пользователь ее
активирует, и происходит непосредственный
переход.
:focus. Ну, а этот класс позволяет
отобразить ссылку тогда, когда пользователь
непосредственно на нее нажал, но кнопку мыши еще
не отпустил. То есть ссылка получила фокус.
Теперь мы можем заполнить css файл со всеми
состояниями ссылки:
A:link {color: silver}
A:visited {color: black}
A:hover {color: blue}
A:active {color: red}
A:focus {color: green}
В принципе CSS2 допускает комбинирование
псевдо-классов, и конструкция подобная этой -
A:focus:hover {color: navy}
вовсе не считается ошибочной.
На этом оканчиваю описание ссылок и перехожу
далее.
Последний псевдо-класс - :lang. Он
отвечает за языковое содержимое веб-странице. Не
будем далеко уходить от примера с сайтом со
статьями, а лишь представим, что все статьи на нем
присутствуют в двух языках - русском и например
немецком. В зависимости от языка мы можем
формировать кавычки. Кстати он обозначается в META
разделе странице атрибутом lang= или в HTTP заголовке
страницы. Например для русского языка мы
установим кавычки типа - "<<" ">>", а
для немецкого наоборот - ">>" "<<".
Для этого мы напишем в css файл следующее:
HTML:lang(ru) {quotes: '\2039' '\203A'}
HTML:lang(de) {quotes: '\203A' '\2039'}
Цифры в данном примере обозначают кавычки,
только записаны они в unicode значениях.
На этом с классами покончено, остались
псевдо-элементы.
Псевдо-элемент - :first-line.
Этот псевдо-элемент позволяет работать с внешним
видом первой строки любого блочного элемента.
Вернемся к примеру с цитатами, только
предположим, что вместо цитат нам надо выделить
все первые строки зеленым цветом и увеличить
размер шрифта. Не буду описывать сложный путь
(практически невозможный), а перейду сразу к
реализации этой идеи при помощи псевдо класса
:first-line. Для этого в css файл нужно дописать
следующую строку:
P:first-line {color: green; font-size: 13pt}
Теперь при HTML коде типа:
<P>
Здесь располагается текст параграфа.
</P>
В броузере мы увидим, что первая строка (строка
до первого переноса) выделиться в соответствии с
нашими указаниями. Будьте внимательны -
выделяться все первые строки, всех параграфов.
Этого можно избежать создавая отдельный классы
для первых параграфов, либо заключать их в другие
блочные элементы (например в SPAN или DIV).
Следующий псевдо-элемент из представленных в
CSS2 очень похож на предыдущий и без сомнения
понравиться многим веб-дизайнерам. Атрибут :first-letter
отвечает за написание первой буквы параграфа
(любого элемента). Вспомните, как часто вам
приходилось "насильно" увеличивать первую
букву в начале текста. Теперь эта проблема
решается довольно легко. Например для увеличения
размера первой буквы параграфа в 200% и придание ей
тени, можно обойтись одной строкой:
P:first-letter {font-size: 200%; text-shadow: 3px 3px 1px silver}
Теперь все первые буквы во всех параграфах
будут просто идеальны.
Ну, а теперь о последних двух псевдо-элементах,
самых богатых по своим потенциальным
возможностям - :before и :after.
Элементы :before и :after генерируют текстовое
содержимое до и после окончания блочного
элемента соответственно. По сути это просто
гениальная идея. При помощи этих элементов можно
творить небывалые вещи, все больше и больше
приближая идеал html странице (полная
автоматизация создания) к идеалу.
Вернемся опять к нашему примеру с "цитатным"
веб-сайтом. Допустим, что по ходу статьи в тексте
встречаются комментарии - блоки курсивного
текста с надписью - "Внимание:" в самом
начале отступления. То есть:
Здесь идет текст статьи, под которым
располагается комментарий.
Внимание: это идет сам комментарий
Здесь текст статьи продолжается.
Надеюсь, что этот пример дал вам понять, что я
имею в виду. Теперь представьте, что у вас около 200
статей с такими комментариями в каждом и вам
вдруг понадобилось поменять слово
"Внимание:" на "Комментарий:", или
сменить курсив на подчеркнутость. Представили
объем работ по обновлению сайта. Но этого очень
легко избежать при использовании
псевдо-элемента :before. В тексте, блок с
комментариями вы оборачиваете в P элементы
класса note (<P CLASS=note>...</P>) и допишите в css файл:
P.note {font-style: italic}
P.note:before {content: "Внимание:"}
а сам HTML код должен выглядеть примерно так:
<P>
Здесь текст статьи
</P>
<P CLASS=note>
Здесь текст комментария
</P>
<P>
Здесь текст статьи
</P>
Теперь если вам понадобиться изменить атрибуты
комментария вы просто меняете строчку в css файле.
Псевдо-элемент :after работает по принципу элемента
:before с единственным исключением -
"заполнение" идет не в самом начале блочного
элемента, а в самом конце.
Вот в принципе и все. Оговорюсь лишь о том, что
все вышенаписанное не мои личные изыскания, а
перевод официального документа - W3C-REC-CSS2-19980512 (Cascading
Style Sheets, level 2. CSS2 Specification. В дальнейших своих
статьях я собираюсь продолжить свое
повествование, знакомя вас с новыми
возможностями CSS. Если вам близка и интересна эта
тема, то я с удовольствием обсужу с вами все
неясные вопросы и отвечу на все замечания. Мой
e-mail в конце этой страницы.
Читайте также: Основы CSS
