Псевдоклассы и псевдоэлементы

В CSS определена особая группа классов и элементов автоматически поддерживаемых CSS совместимыми броузерами.

Селектор:псевдокласс { свойство CSS: значение }

Селектор:псевдоэлемент { свойство CSS: значение }

Например вот так можно задать стили для псевдоклассов элемента А:

a:link { color:blue; text-decoration:none } - стиль непосещенных ссылок;

a:active { color:red; text-decoration:underline } - стиль активизированных ссылок;

a:visited { color:navy; text-decoration:none } - стиль посещенных ссылок;

a:hover { color:red; text-decoration:underline } - стиль ссылок над которыми находится курсор-указатель;

a:focus { background-color:silver } - стиль ссылок получивших фокус ввода;

Манипулируя свойствами псевдоклассов можно задать разные стиль для выделенных посещенных и выделенных непосещенных ссылок:

a:focus:visited { background-color:silver } - посещенные;

a:focus:link { background-color:grey } - непосещенные;

А вот так можно задать стиль псевдоэлементу first-letter элемента P:

p:first-letter { color:red; font-weight:bold } - стиль для первой буквы абзаца;

ID селекторы

Кроме классов в правилах CSS применяются так называемые "ID селекторы", задающие стиль конкретного элемента документа со значением атрибута ID равным значению "ID селектора".

#значение ID { свойство CSS: значение }

Например:

#sample { color:black; font-family:monospace } - id селектор sample

В HTML документе применение данного правила выглядит так:

<P ID=sample>Здесь должен быть программный код примера</p>

Использование листов стилей в документах

Со свойствами и правилами CSS разобрались, но как их применить к конкретному документу? Рассмотрим три способа:

Внутренние стили

Применение внутренних стилей в документе, основано на использовании тегов <DIV>, <SPAN> и атрибута STYLE.

Атрибут STYLE применяется для определения стиля конкретного элемента HTML документа. Например, вот так можно задать выравнивание по обоим краям для абзаца текста:

<P STYLE="text-align:justify"> Здесь ровный по краям абзац</P>

А вот так можно определить стиль заголовка:

<H1 STYLE="color:red">Красный заголовок</H1>

Тег <DIV> используется для применения заданного в нем стиля на группу элементов документа. Например вот так можно задать левый отступ для фрагмента документа и выровнять фрагмент по обоим краям:

<DIV STYLE="margin-left:20pt;text-align:justify">
<H1>Заголовок 1</H1>
<p>Абзац 11
<p>Абзац 12
<H1>Заголовок 2</H1>
<p>Абзац 21
<p>Абзац 22
</DIV>

С помощью данного тега можно творить чудеса - делать многослойные документы. Многослойные документы можно создавать манипулируя свойствами CSS: position, left, top, visibility. Например вот так можно наложить два заключенных в контейнер <DIV>...</DIV> фрагмента, один на другой в HTML документе.

<DIV STYLE="position:absolute; left:100; top:100">
<H1>Заголовок нижнего слоя</H1>
<p>Абзац 11
<p>Абзац 12
</DIV>

<DIV STYLE="position:absolute; left:100; top:100">
<H1>Заголовок верхнего слоя</H1>
<p>Абзац 21
<p>Абзац 22
</DIV>

Подумайте какие возможности открываются разработчику, ведь элементом слоя может быть и графический файл - элемент <IMG>, а манипулируя свойством visibility слоев документа можно отображать в определенной области документа различное содержимое.

Тег <SPAN> используется для применения заданного в нем стиля на фрагмент элемента документа. Например вот так можно выделить разными цветами элементы предложения, в HTML документах используемых для образования в начальной школе:

<P><SPAN STYLE="color:red">Мы </SPAN><SPAN STYLE="color:blue">пошли</SPAN> за грибами.</P>

В окне броузера отобразится следующая cтрока: Мы пошли за грибами.

Глобальные таблицы стилей

Глобальные стили задаются в контейнере <STYLE>...</STYLE>, помещенным между заголовком и телом документа. Если тип языка описания стилей не задан в заголовке документа мета-записью Content-Style-Type (См. раздел 2.3.) то его необходимо задать при помощи атрибута TYPE, следующим образом:

<STYLE TYPE="text/css">... </STYLE>

Вот пример HTML документа с глобальной таблицей стилей. Язык описания стиля задан мета-записью.

<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html">
<meta HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<title>Пример таблицы стилейCSS</title>
</head>
<style>
body {background-color:white; color:black;
font-family:Times New Roman, serif;
font-style:normal; font-size:10pt;
text-align:justify}
</style>
<body>
Пример CSS.
</body>
</html>

Связанные таблицы стилей

Связанные таблицы стилей используются, когда необходимо применять один и тот же стиль для множества документов (например для поддержания корпоративного стиля крупной организации, лист стилей головного офиса связывается с документами отделений). В данном случае, набор правил CSS сохраняется в текстовом файле с расширением CSS, (желательно снабдить файл комментариями) например вот так:

/* таблица стилей - my_style.css */
/* стили тела документа */
body { background-color:white; color:black;
font-family:Times New Roman, serif;
font-style:normal; font-size:10pt;
text-align:justify }
/* стили ссылок */
a:link { color:blue;text-decoration:none } /* ссылки */
a:active { color:red;text-decoration:underline } /* активные */
a:visited { color:navy;text-decoration:none } /* просмотренные */

Связывание файла стиля с документом осуществляется в заголовке документа при помощи тега <LINK> - (См. раздел 2.3.).

<LINK TYPE="text/css" REL="stylesheet" HREF="URL css-файла">

При использовании связанных стилей, можно создавать разные таблицы стилей, для разных форм представления документа. Например вы можете наряду со стандартной таблицей стилей - normal.css создать таблицу стилей c более компактными шрифтами и форматированием, предназначенную для печати - prn.css. Тогда линковка данных таблиц осуществляется следующим образом:

<LINK TYPE="text/css" REL="stylesheet" MEDIA="screen" HREF="style/normal.css">

<LINK TYPE="text/css" REL="stylesheet" MEDIA="print" HREF="style/prn.css">

Атрибут MEDIA указывает броузеру какую таблицу стилей использовать для печати, а какую для просмотра документа.

Использование CSS позволяет существенно упростить разработку и поддержку Web-сайтов за счет отделения стиля представления документов от их содержания, т.к. один раз созданный набор правил представления элементов стиля, можно использовать для множества документов.

Отделение формы представления документа от содержания продемонстрируем на конкретном примере. Постараемся создать документ содержащий лишь теги структурирования (заголовки, абзацы, разделители), а правила форматирования его элементов определим в глобальной таблице стилей.

Пример 7. Использование CSS. [просмотр примера в окне]

<HTML>
<HEAD>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html">
<meta HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<title>Демонстрация возможностей CSS</title>
</HEAD>
<!-- глобальная таблица стилей -->
<style type="text/css">
<!-- стиль ссылок -->
a:link { color:blue; text-decoration:none }
a:visited { color:navy; text-decoration:none }
a:hover { color:red; text-decoration:underline; background-color:#7DC0E8 }
a:active { color:red; text-decoration:underline }
<!-- стиль тела документа -->
body { background-color:white; color:black;
font-family:Times New Roman; font-style:normal; font-size:medium;
text-align:justify }
<!-- стили элементов -->
h1, h2, h3 { text-align:center; background-color:#7DC0E8; width:100% }
hr { color:#7DC0E8; text-align:center; height:4; width:100%}
OL li { list-style-type:decimal }
UL li { list-style-type:square }
#layout1 { position:absolute; left:38%;top:25%; width:173; height:224}
#layout2 { position:absolute; left:2%;top:4%}
<!-- классы элементов -->
p.pdef { text-align:center; font-weight:bold }
.mystyle { text-align:center; color:#7DC0E8; font-size:x-large; font-style:italic }
</style>
<BODY>
<img id=layout1 src="backl.gif" alt="задний план"> <!-- первый слой -->
<div id=layout2> <!-- второй слой -->
<h1>Вот немногое из того, что может CSS</h1>
<p>Кроме отделения содержания документа от формы представления, данный пример явлется наглядной демонстрацией многослойного HTML документа. Данный документ содержит два слоя, размещение которых описаны при помощи ID селекторов CSS в глобальной таблице стилей. <p>Первым слоем документа явлется графическое изображение, заданное в теге <b>IMG</b> c атрибутом <b>ID</b> равным ID селектору - <kbd>layout1</kbd>. Стиль данного элемента (<i>размер и положение на странице</i>) заданы свойствами CSS в ID селекторе - <kbd> layout1</kbd>.
<p>Элементами второго слоя, явлются все текстовое ссодержимое документа: вышепреведенный заголовок, содержимое абзацев, линия разделитель и строка содержащая ссылку на адрес вебмастера. Положение данного слоя на странице описано в ID селекторе - <kbd>layout2</kbd>, кроме этого т.к. данный слой является элементом тела документа, то его содержимое наследует свойства элементов тела документа, заданные в глобальной таблице стилей.
<p class=mystyle>Желаю успеха в изучении CSS!</p>
<hr>
<p class=pdef>© 2001 Вебмастер <A HREF="mailto:[e-mail]"><nobr>Свзатьс с вебмастером</nobr></A>
</div>
</BODY>
</HTML>

Сочетание знаний по использованию CSS с методами разработки интерактивных сценариев управления для Web-страниц (например на JavaScript) позволит вам разрабатывать интерактивные документы (См. раздел 5.2.) стандарта DHTML (Dinamic HTML).

В заключении отметим, что несмотря на то, что использование CSS рекомендовано W3C, а стандарты этого уважаемого органа должны выполнять современные броузеры, фирмы производители броузеров (Microsoft & Netscape) по разному трактуют важность и значимость многих свойств CSS. Одни свойства не работают в MSIE другие не поддерживаются Navigator`ом (это следствие нездоровой конкуренции - так спешат, что забывают о некоторых мелочах). Все это очень меня раздражает.

Формы и фреймы

В данной главе рассматриваются два сцецифических раздела HTML. В первом описано использование форм ввода данных в HTML-документах, для разработки интерфеса между пользователем Web-броузера и приложениями сервера, а во втором разделе рассматривается технология фреймов.