Кроме того, при использовании свободно позиционированных элементов в сочетании со сценариями часто используется свойство CSS, позволяющее скрывать и показывать элементы, – visibility, принимающее значения:

• visible – делает элемент страницы видимым;

• hidden – скрывает элемент страницы;

• inherit – наследует значение свойства от родительского элемента (значение по умолчанию).

Использование HTML‑элементов SPAN и DIV позволяет в некоторых случаях значительно облегчить применение стилей к нужным фрагментам документа. С помощью HTML‑элемента SPAN можно, например, изменить цвет шрифта в отрывке текста только с помощью таблиц стилей (без использования HTML‑элемента FONT с атрибутом color):

...

Слово зеленый отображается соответствующим цветом

...

Элемент SPAN применяется для создания встроенных элементов, как в предыдущем примере. Чаще всего этот элемент применяется потому, что надо где‑то указать значение style, class или id для участка текста.

В отличие от SPAN, HTML‑элемент DIV позволяет создавать блочные элементы. При этом можно объединять несколько элементов (в том числе и блочных) в один блочный элемент. Это удобно во многих случаях, например, когда нужно обвести рамкой или свободно позиционировать группу элементов, задать общий фон для группы элементов.

Использование HTML‑элементов DIV и SPAN отражено в примере 11.5.

.person {border-style: solid; border-width: 1;

background-color: fuchsia; width: 80%; padding: 3}

.person2 {border-style: solid; border-width: 1;

background-color: fuchsia; width: 80%; padding: 3;

left: 20%; position: relative}

.ptitle {font-weight: bold}

Список сотрудников

...

Приведенный HTML‑документ выглядит так, как показано на рис. 11.9.

Рис. 11.9. Использование элементов DIV и SPAN

Обратите внимание, что каждый элемент DIV имеет ширину 80 % от ширины окна браузера, а каждый четный элемент смещен на 20 % от ширины окна вправо. Главным в этом примере является то, что содержимое элемента DIV позиционируется как единое целое, а с помощью элемента SPAN удалось отделить текст с названием поля, описывающего данные сотрудника, от данных, соответствующих этому полю. Вообще, такого же эффекта можно добиться применением обычных таблиц, однако пришлось бы приложить гораздо больше усилий.

Помните, как в самом начале книги мы задавали параметры отображения гиперссылок документа при помощи атрибутов HTML‑элемента BODY? С использованием CSS можно сделать то же самое. Но при этом нужно использовать предопределенные названия стилевых классов элемента A: A:link (непосещенная гиперссылка), A:visited (посещенная ссылка), A:active (активная гиперссылка, проявляется, например, при перемещении по гиперссылкам при помощи табуляции) и A:hover (состояние при наведении указателя мыши на гиперссылку).

Псевдоклассы так называются потому, что они явно не задаются в теле HTML‑документа (не могут быть заданы вообще). Но в частности в примере с гиперссылками сам браузер при показе документа обладает информацией, по каким гиперссылкам переходит пользователь, а по каким нет, где находится указатель мыши и какая часть документа получила фокус ввода. По этим признакам элементы документа можно объединить в виртуальные группы – псевдоклассы, на которые можно ссылаться из таблицы стилей.

Задание параметров каждого вида гиперссылок в остальном полностью аналогично заданию этих параметров для обычного текста. Например:

A:link {text-decoration: none}

A:hover {font-style: italic}

A:active {color: red}

A:visited {color: green; font-weight: bold}

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

Помимо гиперссылок, еще как минимум два псевдокласса предусмотрены для обычного текста. При помощи этих псевдоклассов можно ссылаться на первую букву или первую строку текста, содержащегося в HTML‑элементе.

Для ссылки на первую букву текста используется псевдокласс first-letter. Его можно использовать, например, для создания буквицы (см. рис. 11.10). Правда, добиться такого же результата можно и при помощи рассмотренного далее HTML‑элемента SPAN в сочетании со стилем CSS, примененным к этому элементу. Но теперь речь идет не об элементе SPAN, а о псевдоклассе first-letter.

Итак, для создания буквицы, показанной на рис. 11.10, используется приведенный в примере 11.6 HTML‑код.

Рис. 11.10. Заглавная буква страницы

P.first_par:first-letter {font-size:300%; font-weight:bold; color:blue}

Первая буква этого текста будет большой и красивой буквой синего цвета.

Все последующие абзацы будут начинаться по-обычному

Как было сказано ранее, в CSS можно также ссылаться на первую строку текста HTML‑элемента. Для этого используется псевдокласс first-line. Этот псевдокласс бывает очень полезен, так как нельзя точно предугадать, где браузер разорвет строку (если, конечно, не используется запрет разрывов строки, рассмотренный в гл. 3). Место разрыва первой строки зависит от ширины окна браузера или ширины HTML‑элемента, в который помещен текст, а также от размера шрифта и стиля текста. Пример выделения первых строк абзацев приведен на рис. 11.11.

Рис. 11.11. Особое оформление первых строк абзацев

Текст HTML‑документа, показанного на рис. 11.11, приведен ниже (пример 11.7).

P:first-line {font-weight:bold; color:blue}

P.big {font-size:150%}

P.small {font-size:75%}

Абзац, оформленный шрифтом по умолчанию. ...

Абзац, оформленный шрифтом большого размера. ...

Абзац, оформленный шрифтом малого размера. ...

Как видите, использование псевдокласса first-line является простым и универсальным способом изменения оформления первых строк текста, заключенного внутри HTML‑элементов. При этом нас не интересует, как отделить от текста именно первую строку при разных разрешениях экрана, разных размерах окна браузера, да и в разных браузерах.