Скорей всего многие из вас при создании собственных страничек используют всевозможные редакторы. Перечислять не буду. Безусловно это удобно во многих случаях, это ускоряет работу, освобождает от кучи писанины, да и нагляднее в конце концов. - Согласен, преимущества налицо, как говорится, но тем не менее интересно после завершения работы в редакторе заглянуть в исходный код страницы. И что-же мы там видим? Все хорошо в меру! Бесконечные теги, как например FONT, COLOR, SIZE и пр. причем их столько, что в глазах рябит! Обратите внимание, что подобные программы лепят довольно несуразный код.
Совсем не обязательно сейчас-же удалять ваш любимый редактор, немного чистописания и все будет в порядке, а речь пойдет об особенностях спецификации CSS, а именно о псевдо-элементах и псевдо-классах.
Тут необходимо заметить, что Microsoft Internet Explorer 4.0 поддерживает лишь часть (хотя и немалую) возможностей css, а о реализации стилей в Netscape Navigator я вообще молчу. Это безусловно обидно, ведь в рабочую группу W3C по стилевым листам входят специалисты множества известных компаний Microsoft`а и Netscape`а в том числе. В общем если вы
рассчитываете на то, что ваши посетители в
большинстве случаев используют IE, все примеры будут для вас актуальны, ну а пользователям NN нужно просто
дождаться лучших времен.
Что такое псевдо-классы и элементы в общем?
Псевдо-элементы и псевдо-классы созданы для автоматического генерирования содержимого, изменения отдельных параметров, форматирования текста и содержимого страницы в целом без исправления общего "дерева" элементов и добавления лишних тегов. Возможно это довольно непонятно, но я уверен, что при дальнейшем чтении все станет на свои места.
Начнем с псевдо-классов и первым у нас будет - :first-child. Представьте себе такую ситуацию: у вас на сайте находиться некоторое количество рассказов, и каждый начинается
естественно с заголовка. А вы хотите, чтобы ваш заголовок, обязательно был определен другим шрифтом и скажем был бы большего размера. Здесь мы и остановимся. У вас есть два пути. Либо вы пишите новые класс в ваш *.css файл, задавая в него все необходимые установки и переправляя все ваши HTML элементы статей на этот класс, либо вы задаете параметры к :first-child и всё. Все ваши рассказы заключены в блочный тег DIV, а заголовки разбиты на <P></P>. В этом случае заголовок оказывается в первом (first-child) параграфе по отношению к тегу DIV. Вы открываете файл с описанием стиля вашего веб-сайта и пишите там следующую строчку:
P:first-child {FONT-FAMILY: здесь ваш шрифт; font-size: здесь ваш размер}
теперь для общего представления посмотрите на отдельный HTML код:
<DIV>
<P>
Ваш заголовок
</P>
<P>
Здесь расположен остальной рассказа P в общем css файле.
</P>
</DIV>
А теперь рассмотрим два псевдо-класса относящиеся исключительно к ссылкам. А то как :link и :visited. У ссылки на HTML странице может быть всего два состояния (в принципе их пять) - состояние в котором ссылку еще не посещали и состояние в котором ссылка была ранее просмотрена (:link и :visited, соответственно). Для каждого из этих состояний в CSS2 существуют отдельные параметры. Если пользователь по ссылке не ходил, то она выделяется серым цветом, ну а если ссылка им ранее посещалась, то она имеет черный цвет. Добиться этого эффекта можно, разместив в вашем css файле следующие строки:
A:link {color: silver}
A:visited {color: black}
Кстати, помимо цвета естественно можно задавать и любые другие атрибуты по вашему усмотрению.
А теперь о трех псевдо-классах отвечающих за последние состояния ссылки. Это :hover, :focus и :active.
:hover. Этот класс отвечает за отображение ссылки в тот момент, когда курсор мыши находиться непосредственно над ней.
:active. Этот класс отвечает за отображение ссылки, когда пользователь ее активирует, и происходит непосредственный переход.
:focus. Ну, а этот класс позволяет отобразить ссылку тогда, когда пользователь непосредственно на нее нажал, но кнопку мыши еще не отпустил. То есть ссылка получила фокус.
Теперь мы можем заполнить css файл со всеми состояниями ссылки:
В принципе CSS допускает комбинирование псевдо-классов, и конструкция подобная этой -
A:focus:hover {color: navy}
вовсе не считается ошибочной.
Псевдо-элемент - :first-line.
Этот псевдо-элемент позволяет работать с внешним видом первой строки любого блочного элемента. Возьмем за пример сайт со множеством различных цитат, и предположим, что нам надо выделить все первые строки зеленым цветом и увеличить размер шрифта. Не буду описывать сложный путь (практически невозможный), а перейду сразу к реализации этой идеи при помощи псевдо-класса :first-line. Для этого в css файл нужно дописать следующую строку:
P:first-line {color: green; font-size: 13pt}
Теперь при HTML коде типа:
<P>
Здесь располагается текст параграфа.
</P>
В браузере мы увидим, что первая строка (строка до первого переноса) выделиться в соответствии с нашими указаниями. Будьте внимательны - выделяться все первые строки, всех параграфов. Этого можно избежать создавая отдельный классы для первых параграфов, либо заключать их в другие блочные элементы (например в SPAN или DIV).
Следующий псевдо-элемент из представленных в CSS2 очень похож на предыдущий и без сомнения понравиться многим веб-дизайнерам. Атрибут :first-letter отвечает за написание первой буквы параграфа (любого элемента). Вспомните, как часто вам приходилось "насильно" увеличивать первую букву в начале текста. Теперь эта проблема решается довольно легко. Например для увеличения размера первой буквы параграфа в 200% и придание ей тени, можно обойтись одной строкой:
Теперь все первые буквы во всех параграфах будут просто идеальны.
Ну, а теперь о последних двух псевдо-элементах, самых богатых по своим потенциальным возможностям - :before и :after.
Элементы :before и :after генерируют текстовое содержимое до и после окончания блочного элемента соответственно. По сути это просто гениальная идея. При помощи этих элементов можно творить небывалые вещи, все больше и больше приближая идеал html странице (полная автоматизация создания) к идеалу.
Вернемся опять к нашему примеру с "цитатным" веб-сайтом. Допустим, что по ходу статьи в тексте встречаются комментарии - блоки курсивного текста с надписью - "Внимание:" в самом начале отступления. То есть:
Здесь идет текст статьи, под которым располагается комментарий.
Внимание: это идет сам комментарий
Здесь текст статьи продолжается.
Надеюсь, что этот пример дал вам понять, что я имею в виду. Теперь представьте, что у вас около 200 статей с такими комментариями в каждом и вам вдруг понадобилось поменять слово "Внимание:" на "Комментарий:", или сменить курсив на подчеркнутость. Представили объем работ по обновлению сайта. Но этого очень легко избежать при использовании псевдо-элемента :before. В тексте, блок с комментариями вы оборачиваете в P элементы класса note (<P CLASS=note>...</P>) и допишите в css файл:
<P>
Здесь текст статьи
</P>
<P CLASS=note>
Здесь текст комментария
</P>
<P>
Здесь текст статьи
</P>
Теперь если вам понадобится изменить атрибуты комментария вы просто меняете строчку в css файле.
Псевдо-элемент :after работает по принципу элемента :before с единственным исключением - "заполнение" идет не в самом начале блочного элемента, а в самом конце.
Вот и вся премудрость. Конечно не вся, но если кому-то нужно больше, тот найдет;-)
