Абсолютные координаты

При использовании "абсолютных" координат точка отсчета помещается в верхний левый угол окна браузера, а оси X и Y направлены вправо по горизонтали и вниз по вертикали, соответственно:

Если в этой системе координат некоторый блочный элемент должен быть размещен на 10px ниже верхнего обреза рабочей области браузера и на 20px правее правого края рабочей области браузера, то его описание будет выглядеть следующим образом:

.example {position:absolute;top:10px;left:20px;}

В данной записи тип системы координат задан атрибутом position (значение - absolute), координата X задана атрибутом left (значение - 20px), координата Y задана атрибутом top (значение - 10px).

Атрибуты top и left определяют координаты верхнего левого угла блока в абсолютной системе координат.

Значения координат могут быть и отрицательными. Для того, чтобы убрать из отображаемой области блок с линейными размерами 100px (высота) на 200px(ширина) достаточно отпозиционировать его следующим образом:

.example {position:absolute;
top:-100px;left:-200px;
width:200px;height:100px;}

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

Блочные и строковые элементы

В описании элементов разметки языка HTML существует понятие строкового (in-line) элемента разметки и блочного (block) элемента разметки. Формально они определены в DTD (Document Type Definition) SGML-описания (Stadard Generalised Markup Language) языка HTML. Проще всего объяснить различие между блоком и строковым элементом можно на примере:

параграф - это блочный элемент разметки.

выделение курсивом - это строковый элемент разметки.

Блочные элементы можно вкладывать друг в друга, но нельзя пересекать друг с другом. Строковые элементы можно как вкладывать, так и пересекать(согласно DTD и практике старых версий браузеров), но последнее делать не рекомендуется.

Совершенно естественно, что по набору атрибутов управления отображением (атрибуты описания стиля) строковые и блочные элементы отличаются. Упрощенно можно сказать, что атрибуты описания стиля строкового элемента являются подмножеством атрибутов описания стиля блочного элемента.

Обобщениями блочного и строкового элементов с точки зрения стилей выступают элементы DIV и SPAN соответственно.

Цвет фона текста

В HTML цветом фона можно управлять только для конкретного блочного элемента разметки. Таким элементом может быть вся страница:

или, например, таблица:

<table bgcolor=...>...&lt/table>

Каскадные таблицы стилей позволяют менять цвет фона текста непосредственно по месту, точно так же, как строковые элементы разметки в HTML меняют обычный стиль начертания на italic, например.

В приведенном выше абзаце для выделения текста применено инвертирование цвета фона и цвета текста:

<span style="background-color:#003366;
color:white;">
как строковые элементы разметки
</span>

При использовании цвета фона следует помнить, что поддержка этого атрибута реализована для всех блочных элементов разметки только с IE 4.0. Поддержка CSS в различных версиях NN гораздо скромнее.

Для работы с фоном элементов существует несколько атрибутов, которые поддерживаются только в IE, начиная с версии 4.0: background-image; background-repeat; background-attachment; background-position. Можно все свойства фона описать в атрибуте background:

background:transparent|color url repeat scroll position Пример:

p {background: gray http://kuku.ru/kuku.gif no-repeat fixed center center;}

Не смотря на такое обилие возможностей, злоупотреблять ими не стоит.

Цвет текста

В HTML для управления цветом отображаемого текста используется элемент FONT. Его аналогом в CSS является атрибут color. Этот атрибут можно применять как для блочных, так и для строчных элементов разметки.

Расмотрим в качестве блочного элемента разметки ячейку таблицы:

td {color:darkred;}

Первая колонка

Первая ячейка таблицы

В данном примере цвет текста определен только для обычной ячейки, поэтому содержание заголовка колонки отображается основным цветом(#003366).

При определении цвета текста для блочного элемента весь текст этого блочного элемента отображается заданным цветом. Частичное изменение цвета возможно, если применить строчный элемент разметки внутри блочного:

p {color:darkred;}

i {color:#003366;font-style:normal;}

Первая колонка

Первая ячейка таблицы.
В нее вставляем строчный элемент темно-синего цвета.

В данном примере в качестве блочного элемента мы используем параграф, а в качестве строчного элемента(in-line) применяем i. Таблица в данном случае большого значения не имеет, но применяется для единообразия с предыдущим примером. В нее мы помещаем параграф со встроенным в него in-line элементом разметки.

Форма "пулек"

Форма "пульки" в виде "жирной" точки несколько непривычна. Обычно в машинописных документах принято употреблять черту. С другой стороны, в рекламных материалах часто в качестве "пульки" используют квадрат или другой символ типографского набора, а также графическую картинку.

CSS позволяет управлять формой "пульки" через атрибут list-style-type:

<li>В виде пульки используем квадрат

</ul>

В виде пульки используем квадрат

<li>В виде пульки используем диск

</ul>

В виде пульки используем диск

<li>В виде пульки используем круг

</ul>

В виде пульки используем круг

До сих пор мы обсуждали только неупорядоченные списки (UL), но управлять отображением "пулек" можно и в упорядоченных списках (OL):

<li>...

...

</ol>

"пульки" строчные римские буквы "пульки" строчные римские буквы "пульки" строчные римские буквы "пульки" строчные римские буквы

<li>...

...

</ol>

"пульки" заглавные буквы "пульки" заглавные буквы "пульки" заглавные буквы "пульки" заглавные буквы

<li>...

...

</ol>

"пульки" строчные буквы "пульки" строчные буквы "пульки" строчные буквы "пульки" строчные буквы

CSS позволяют вообще отказаться от "пулек". Для этого нужно указать значение атрибута list-style-type равным none.

Гарнитура(font-family)

Гарнитура шрифта - это набор начертаний одного шрифта. Шрифт может иметь "прямое" начертание(noramal), курсив(italic), "скошенное"(oblique), усиленное по насыщенности ("жирное", bold), "мелкое"(капитель, small-caps) и т.п..

Наиболее распространненые гарнитуры в российской части Web - это Times, Arial, Courier. Причем все они принадлежат к разным группам шрифтов. Times - это пропорциональный шрифт "с засечками"(serif), Arial - это пропорциональный шрифт "без засечек"(sans-serif), а Courier - это моноширинный шрифт (monospace). В Unix вместо Arial чаще применяется Helvetica.

В чем разница между этими группами шрифтов лучше всего видно на примере:

<p align=left style="font-size:24px;font-family:serif;color:darkred;"> Эта строка набрана пропорциональным шрифтом с засечками. </p>

Эта строка набрана пропорциональным шрифтом с засечками.

<p align=left style="font-size:24px;font-family:sans-serif;color:darkred;"> Эта строка набрана пропорциональным шрифтом без засечек. </p>

Эта строка набрана пропорциональным шрифтом без засечек.

<p align=left style="font-size:24px;font-family:monospace;color:darkred;"> Эта строка набрана моноширинным шрифтом. </p>

Эта строка набрана моноширинным шрифтом.

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

Если оптимизация браузера не устраивает автора страницы, то можно указать непосредственно имя гарнитуры шрифта:

if(window.navigator.appName=="Microsoft Internet Explorer") { document.write("N
Ax,y=е(ya+xa)
a=1"); } else { document.write("N
Ax,y=е(ya+xa)
a=1

"); }

Если в вашей операционной системе поддерживается шрифт symbol, то вы увидите достаточно прилично записанную формулу суммы, если нет, то - абракадабру. Однако в данном случае применение обычного шрифта вообще бессмысленно - в нем формула не будет правильно отображена.

Рассмотрим теперь менее экзотический пример. Речь пойдет о тексте в поле ввода формы:

В данном случае мы применяем просто шрифт умолчания. Теперь изменим его на другой моноширинный шрифт:

<input style="font-family:Courier;" value="русский язык">

<input style="font-family:Courier New" value="русский язык">

В операционной системе, где тестировались примеры для этой работы, нет киррилицы в гарнитуре Courier, но зато она есть в гарнитуре Courier New. Следовательно, тот пример, в котором применяется гарнитура Courier, будет у нас отображаться абракадаброй. Если Вы, уважаемый читатель, работаете с другим набором шрифтов, результат будет другим.

Данный пример призван был, кроме всего прочего, показать, что при выборе шрифта, а точнее гарнитуры шрифта, не следует мудрить. Лучше всего пользоваться категориями групп шрифтов, тогда текст будет везде отображаться с точки зрения языка правильно. Правда достигаться эта универсальность будет за счет усечения возможностей начертания шрифта.

Граница(border)

У каждого блочного элемента разметки есть граница. От границы отсчитываются отступы (margin и padding). Вдоль границы "плавающего" блока происходит его обтекание текстом.

Для описания границ блоков применяются следующие атрибуты:

border-top-width:

ширина верхней границы блока.

border-bottom-width:

ширина нижней границы блока.

border-left-width:

ширина левой границы блока.

border-right-width:

ширина правой границы блока.

border-width:

ширина границы блока. Задается в том случае, если ширина границы блока одинаковая по всему периметру блока

border-color:

цвет границы блока. Согласно спецификации CSS1 может быть задан для каждой из границ блока. Например, border-right-color:red. Может задаваться как мнемоникой (red, blue, navy и т.п.), так и в нотации RGB (border-color:#003366). Указание цвета для каждой из границ поддерживается не всеми браузерами.

border-style:

тип линии границы блока. Может принимать значения: none, dotted, dashed, solid, double, groove, ridge, inset, outset. Согласно спецификации CSS1 может быть задан для каждой из границ блока. Например, border-right-style:dotted. Указание типа линии границы поддерживается не всеми браузерами.

Для описания границы нет необходимости указывать в стиле все атрибуты. Существует сокращенная запись атрибутов. Например, для описания верхней линии границы можно применить запись типа:

p {border-top:1px dotted red;}

атрибут: ширина_линии тип_линии цвет_линии

Если необходимо ограничить блок текста границей, то это может выглядеть примерно так:

В этом примере мы использовали следующее описание стиля отображения границы:

p {text-align:left;border-width:2px;
border-color:darkred;border-style:solid;}

if(window.navigator.appName=="Microsoft Internet Explorer") { document.write("

"); } else { document.write("

"); }

Применение границы для обозначения блока не самый элегантный способ оформления документа. Во всяком случае применяют ее нечасто.

Указывая границу в IE, нужно обязательно указывать ее тип, в противном случае она не будет отображаться.

Импорт описания стилей

Импорт описателей стилей - это в некотором смысле конкурент описанному выше указанию на внешний описатель стиля.

Импортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, который представляет собой описатель стиля. Оператор импорта стиля должен предшествовать всем прочим описателям стилей:

<style>

@import:url(http://kuku.ru/style.css)

a {color:cyan;text-decoration:underline;}

</style>

Импортируемый стиль можно переопределить либо через описатель элемента в STYLE, либо через атрибут элемента style.

Элемент DIV

DIV выступает в качестве универсального блока. Блочный элемент всегда отделен от прочих элементов страницы (контекста) пустой строкой. DIV не несет никакой смысловой нагрузки. Часто говорят, что DIV - это раздел страницы. Но реально его применение осмысленно только в контексте CSS. Никаких правил умолчания для отображения DIV не существует. Это просто новая строка текста.

DIV позволяет применить атрибуты стиля, связанные с границей блока, отступами блока от границ старшего элемента и "набивку", т.е. отступ от границы блока до границы вложенного элемента:

"Блочный элемент, заданный элементом разметки DIV. Для него определена граница и отступы как от границ старшего элемента разметки, так и для вложенных в него элементов разметки."

Текст в кавычках вложен внутрь элемента DIV следующего вида:

...

</div>

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

Элемент SPAN

Элемент разметки SPAN - это обобщенный строковый элемент разметки, применение которого не приводит к образованию блока текста. Он может заменить собой элементы: FONT, I, B, U, SUB, SUP и т.п. Приведем примеры таких соответствий:

HTML-элемент

CSS-аналог

<font color=red> ... </font>	<span style="color:red;">...</span>
<i>...</i>	<span style="font-style:italic;">...</span>
<b>...</b>	<span style="font-weight:bold;">...</span>
<u>...</u&gt	<span style="text-decoration:underline;"> ... </span>
и т.п.

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

<b>предложение <i>с пересекающимися</b> стилями</i>

предложение с пересекающимися стилями

<span style="font-weight:bold;">предложение <span style="font-style:italic;">с пересекающимися</span> стилями</span>

предложение с пересекающимися стилями

Применение элемента SPAN ограничено браузерами, которые поддерживают CSS. При этом не все атрибуты спецификации CSS поддерживаются в разных браузерах. Например, атрибут vertical-align, который призван заменить элементы SUP и SUB, не поддерживается ни одним из браузеров.

Элемент STYLE

Применение элемента STYLE - это основной способ внедрения каскадных таблиц стилей в ткань HTML-документа. Кроме управления отображением элементов разметки элемент STYLE позволяет описывать стилевые свойства элементов, которые можно изменять при программировании на JavaScript.

Элемент STYLE позволяет определить стиль отображения для:

стандартных элементов HTML-разметки произвольных классов (селектор class) HTML-объектов (селектор id)

К сожалению, работа с селекторами в браузерах различных производителей может преподнести различного рода сюрпризы. Особенно это касается работы с селектором ID. Будем считать правильной интерпретацию Microsoft как держателя патента на спецификацию CSS.

Понятие селектора, применение селекторов и формальный синтаксис CSS мы обсудим в разделах "Синтаксис" и "Наследование и переопределение".

Стандартные элементы разметки описываются в элементе STYLE следующим способом:

<head>

<style>

p {color:darkred;text-align:justify;font-size:8pt;} </style>

</head>

<body>

...

<p>

Этот параграф мы используем в качестве примера применения описания стиля для стандартного элемента HTML-разметки.

</p>

...

</body>

Теперь все параграфы документа будут отображаться стилем из элемента STYLE, если только стиль не будет переопределен каким-либо способом. В STYLE можно определить стиль любого элемента разметки.

[ ]

Кегль(font-size)

Кегль - это, если говорить упрощенно, размер шрифта. Более подробное объяснение следует искать в специальной типографской литературе. Нам здесь будет достаточно того, что CSS через параметр font-size позволяет управлять размером букв.

Размер шрифта можно задавать в типографских пунктах(pt, 0,35мм) или пикселях(px). При установки кегля стоит помнить, что font-size задает не высоту буквы, а размер "очка" под букву, который больше самой буквы.

Вот несколько примеров использования font-size:

<p style="font-size:12pt;">Кегль параграфа установлен в 12 пунктов</p>

Кегль параграфа установлен в 12 пунктов

<p style="font-size:12px;">Кегль параграфа установлен в 12 пикселей</p>

Кегль параграфа установлен в 12 пикселей

<p style="font-size:120%;">Кегль параграфа установлен в 120% от размера букв охватывающего параграф элемента</p>

Кегль параграфа установлен в 120% от размера букв охватывающего параграф элемента

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

<p style="font-size:large;">Размер кегля large</p>

Размер кегля large

<p style="font-size:small;">Размер кегля small</p>

Размер кегля small

<p style="font-size:x-small;">Размер кегля x-small</p>

Размер x-small large

<p style="font-size:xx-small;">Размер кегля xx-small</p>

Размер кегля xx-small

Аналогично x-small и xx-small существуют размеры x-large и xx-large. Кроме этого есть larger, smaller, medium.

Координаты и размеры

Стандарт CSS-P позволяет с точностью до пикселя разместить блочный элемент разметки в рабочем поле окна браузера. При таком подходе возникает естественный вопрос о том, как устроена система координат, в которой автор страницы производит размещение компонентов страницы.

CSS-P определяет две системы координат: относительную и абсолютную. Это позволяет обеспечить гибкость размещения элементов как относительно границ рабочего поля окна браузера, так и относительно друг друга.

Блоки - это не абстрактные точки, которые не занимают на плоскости cтраницы места. Блоки - это прямоугольники, которые "заметают" площадь. Текст и другие компоненты страницы под блоком перестают быть доступными пользователю, поэтому линейные размеры блока имеют для создания HTML-страниц не меньшее значение, чем координаты блока.

Линейные размеры блока

Линейные размеры блока задаются двумя параметрами: шириной(width) и высотой(height) блока. В браузерах ширина и высота блока интерпретируется по разному.

В NN ширина и высота блока - это рекомендуемые параметры. Если текст выходит за эти ограничения, то блок увеличивается до необходимых размеров, если текста нет вообще, то блок сжимается до маленького квадрата:

...

</p>

Текст размещен для того, чтобы блок был виден в Netscape Navigator

Приведенного в примере описания должно хватить для получения результата, но в NN для такого блока нужно применить некоторые дополнительные атрибуты:

...

</span>

</p>

Без границы блок не будет залит темно-красным цветом, а без span текст будет отображаться цветом умолчания для данной страницы. Никакому разумному объяснению такое поведение браузера не поддается, поэтому не стоит на этих атрибутах строить дизайн страниц.

Межбуквенные расстояния

Расстояние между буквами автоматически регулируется размером шрифта - кеглем. Чем больше размер шрифта, тем больше расстояние между буквами:

Этот параграф набран увеличенным кеглем

А шрифт этого параграфа еще больше

Достаточно внимательно присмотреться, чтобы убедиться в том, что расстояния между буквами в слове "параграф" первого примера и буквами слова "параграфа" второго примера разные. Во втором случае они больше:

Моноширинный шрифт выбран не случайно. На пропорциональном шрифте межбуквенное расстояние зависит от начертания букв и показать его как расстояние между буквами достаточно сложно. У моношириннго шрифта "очко" символа фиксировано, поэтому и расстояние между буквами хорошо прослеживается.

Однако не всегда удобно управлять межбуквенным растоянием через кегль (font-size). Бывают случаи, когда строку нужно либо уплотнить, либо разрядить. Достигается это за счет атрибута letter-spacing:

<p style=
"font-family:monospace;
letter-spacing:10pt;
color:darkred">
Межбуквенное расстояние 10pt
</p>

Межбуквенное расстояние 10pt

<p style=
"font-family:monospace;
letter-spacing:20pt;
color:darkred">
Межбуквенное расстояние 20pt
</p>

Межбуквенное расстояние 20pt

В версиях NN 4.x этот параметр не поддерживается. Остается уповать только на font-size.

Межстрочное расстояние

В CSS межстрочное расстояние определяется параметром line-height. Он задает расстояние не между строками, а между базовыми линиями строк. Проще говоря, если, например, взять букву "X" и напечатать ее последовательно друг под другом, то line-height будет равно расстоянию между двумя одинаковыми точками букв. Например, между точками пересечения палочек "Х":

Посмотрим, как этот параметр влияет на взаимное расположение строк:

<p style="line-height:12pt;font-size:12pt;color:darkred;"> Этот параграф мы набрали кеглем 12 pt.
Line-height задано в 12 pt.</p>

Этот параграф мы набрали кеглем 12 pt.
Line-height задано в 12 pt.

<p style="line-height:24pt;font-size:12pt;color:darkred;"> Этот параграф мы набрали кеглем 12 pt.
Line-height задано в 24 pt.</p>

Этот параграф мы набрали кеглем 12 pt.
Line-height задано в 24 pt.

<p style="line-height:6pt;font-size:12pt;color:darkred;"> Этот параграф мы набрали кеглем 12 pt.
Line-height задано в 6 pt.</p>

Этот параграф мы набрали кеглем 12 pt.
Line-height задано в 6 pt.

Первый пример набран со значением line-height равным размеру кегля. Во втором примере значение line-height вдвое превышает размер кегля. В третьем примере значение line-height в два раза меньше размера кегля - строки стали "налезать" друг на друга.

В связи с использованием line-height следует обратить внимание на применение in-line картинок на HTML-страницах. Под in-line картинкой здесь мы понимаем картинку, которая встроена в тело документа при помощи элемента IMG, но не с новой строки и не как элемент таблицы:

<p style=
"color:white;background-color:darkred;font-size:20px;">
В эту строку мы встраиваем картинку - <img src=../images/css12/inline.gif border=0 width=24 height=24 align=top>, которая изображает концентрические круги. </p>

В эту строку мы встраиваем картинку - , которая изображает концентрические круги.

Картинка имеет размеры 24х24 пикселя и выравнена по верхнему краю строки. Ее размер больше размера кегля (20px), поэтому межстрочное расстояние увеличено браузером автоматически.

<p style=
"color:white;background-color:darkred;font-size:24px;">
В эту строку, которая имеет размер кегля 24рх, мы встраиваем картинку - <img src=../images/css12/inline.gif border=0 width=24 height=24 align=top>, изображающую концентрические круги. </p>

В эту строку, которая имеет размер кегля 24рх, мы встраиваем картинку - , изображающую концентрические круги.

Таким образом, можно точно позиционировать текст и графику в строке. В качестве примера можно использовать оглавление этого учебника.

Набивка(padding)

Текст внутри блока начинается не от самой границы блока. Между границей и содержанием блока есть свободное пространство. Оно носит название внутреннего отступа текстового блока или padding. Совместно с внешним отступом(margin) текстового блока padding образует общее поле отступа от границы охватывающего блок элемента разметки.

Графически padding можно проиллюстрировать на примере левого внутреннего отступа текста в параграфе:

Для этого примера при описании параграфа использовался стиль:

p {padding-left:100px;
text-align:left;border-width:1px;}

Для того, чтобы браузер правильно отображал стили, не следует размещать описание стиля на нескольких строчках, как это сделано в примере. Для IE это не имеет значения, а NN может "споткнуться".

У блока текста существует четыре стороны. Соответственно padding может быть:

padding-left:

левый внутренний отступ, который определяет расстояние от левого края блока до его содержания.

padding-right:

правый внутренний отступ, который определяет расстояние от правого края блока до его содержания.

padding-top:

верхний внутренний отступ, который определяет расстояние от верхнего края блока до его содержания.

padding-bottom:

нижний внутренний отступ, который определяет расстояние от нижнего края блока до его содержания.

padding:

определяет единый размер внутреннего отступа блока. Этот параметр задается в случае одинакового размера поля отступа от всех сторон блока.

Проиллюстрируем применение padding примером:

p {padding-left:100px;padding-right:50px;
padding-top:20px;padding-bottom:10px;text-align:left;
border-width:1px;}

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

Начертание

У каждой гарнитуры (font-family) есть несколько начертаний. Каждое из них определяется в CSS тремя параметрами стиля: font-style, font-variant, font-weight.

Атрибут стиля font-style определяет прямое начертание (normal) и курсив:

<p style="color:darkred;font-style:normal;">Прямое начертание</p>

Прямое начертание

<p style="color:darkred;font-style:italic;">Курсив</p>

Курсив

Если хочется усилить насыщенность ("жирность") текста, то в этом случае в описании стиля указывают атрибут font-weight, который принимает значения normal или bold:

<p style=
"color:darkred;font-style:italic;font-weight:bold;">
Курсив</p>

Курсив

Вообще говоря, хотя шрифт и масштабируется при помощи задания кегля, но качество его начертания обычно при этом страдает. Для качественного отображения мелких букв в некоторых гарнитурах присутствует начертание капитель. В CSS для использования капители зарезервирован атрибут font-variant, который принимает значения normal и small-caps. Реальное применение font-variant проблематично из-за отсутствия капители в стандартном наборе кириллических шрифтов.

Наследование и переопределение

При обсуждении технических спецификаций часто бывает полезно вникнуть в смысл названия. В технике принято точно определять в названии суть и назначение стандарта или спецификации. Описание стилей отображения элементов HTML-разметки носит название "Каскадные таблицы стилей". Со словом "стилей" все более или менее понятно. Слово "таблицы" подразумевает набор свойств элемента разметки, который можно представить в виде строки в таблице свойств, т.е. элементы разметки - строки, а свойства - столбцы. А вот слово "каскадные" требует пояснения.

Во-первых, существует иерархия элементов разметки (дерево объектов на странице), во-вторых, свойства этих объектов могут наследоваться. Таким образом, в дереве объектов образуется ветвь, которая ведет к листу дерева - элементу разметки, например, элементу списка или параграфу. Его свойства определяются элементами разметки, в которые вложен элемент и описателями стиля для самого этого элемента:

Это начало первого раздела, который сдвинут на 10 пикселей вправо относительно левого края параграфа и на 10 пикселей вниз относительно стандартной границы параграфа.

Это начало второго раздела, который сдвинут относительно предыдущего раздела на 10 пикселей, а относительно параграфа на 20 пикселей. Данный раздел имеет красную строку с отступом в 10 пикселей и смещен относительно предыдущего раздела на 20 пикселей.

первый элемент списка второй элемент списка

Список сдвинут относительного второго раздела на 10 пикселей, а относительно текущего параграфа на 30 пикселей. Первая строка не является строкой начала параграфа, поэтому на нее отступ не распространяется (только в Netscape).

Прeдыдущий текст закодирован в терминах разделов и списка следующим образом:

<div style="margin-left:10px;margin-top:20px;
text-indent:10px;font-style:italic;">

Это начало второго раздела, который сдвинут относительно предыдущего раздела на 10 пикселей, а относительно параграфа на 20 пикселей. Данный раздел имеет красную строку с отступом в 10 пикселей и смещен относительно предыдущего раздела на 20 пикселей.

<ul style="margin-left:10px;">

<li>первый элемент списка

<li>второй элемент списка

</ul>

Список сдвинут относительного второго раздела на 10 пикселей, а относительно текущего параграфа на 30 пикселей. Первая строка не является строкой начала параграфа, поэтому на нее отступ не распространяется (только в Netscape).

</div>

</div>

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

Когда объяснение некоторого феномена HTML-разметки растягивается на несколько параграфов, то полезно воспользоваться графической схемой построения страницы, которая приведена ниже:

При использовании стилей действуют следующие правила старшинства стилей:

Сначала применяются стили умолчания браузера Стили умолчания браузера переопределяются прилинкованными стилями (элемент LINK заголовка документа). Прилинкованные стили переопределяются описаниями стилей в элементе STYLE Стили элемента STYLE переопределяются атрибутом style в любом из элементов разметки

Не все атрибуты стиля могут наследоваться. Например, "набивка" (отступ содержания элемента от его границ) элемента BODY не наследуется вложенными в него элементами и определяется по умолчанию или прописывается отдельно для каждого элемента. Алгоритмы наследования в IE и в NN разные, поэтому для единства отображения элементов следует прописывать стиль по максимуму атрибутов, чтобы добиться единообразия при отображении.

Назначение CSS

Дизайн Web-узлов - это точное размещение компонентов HTML-страниц относительно друг друга в рабочей области окна браузера.

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

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

Автор страницы не может заранее определить настроек браузера пользователя, что существенно ограничивает число вариантов представления информации на странице.

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

Другой способ управления настройками браузера - программирование на JavaScript. Бурное развитие этого языка заставляет говорить о возможности полного контроля над процессом отображения HTML-страниц. Недостаток JavaScript - отказ от декларативного характера разметки и относительно большой объем кода для переопределения свойств элементов разметки.

Спецификация CSS(Cascading Style Sheets) позволяет остаться в рамках декларативного характера разметки страницы и дает полный контроль над формой представления элеметов HTML-разметки.

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

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

Наличие всех этих возможностей позволяет говорить о CSS как о средстве разделения логической структуры документа и формы его представления. Логическая структура документа определяется элементами HTML-разметки, в то время как форма представления каждого из этих элементов задается CSS-описателем элемента.

CSS позволяет полностью переопределить форму представления элемента разметки по умолчанию. Например, <i>...</i&gt определяет отображение текста курсивом:

<i>Отобразим текст курсивом</i>

Отобразим текст курсивом

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

<i style="text-decoration:underline;font-style:normal;">

Отобразим текст курсивом

</i>

Отобразим текст курсивом

Этот пример показывает, что привычный стиль отображения элементов может быть полностью изменен при помощи CSS. В данной технологии HTML-разметка носит чисто декларативный характер.

Практическая значимость CSS для Web-инжиниринга (совокупности технологий разработки и сопровождения Web-узлов) заключена в том, что процесс создания узла можно формализовать и представить в виде следующей последовательности действий:

Сначала нужно определиться с номенклатурой страниц, т.е. все страницы проектируемого Web-узла разбить на типы, например,: домашняя страница, навигационные страницы, информационные страницы, коммуникационные страницы и т.п.. У каждого узла этот перечень может быть своим.

Для каждого из типов страниц разрабатывается определенная логическая структура (стандартный набор компонентов страницы).

После этого разрабатывается навигационная карта узла и форма ее реализации на страницах.

Для каждого стандартного компонета страницы разрабатывается стиль его отображения (CSS-описатель).

Теперь остается только рисовать картинки, создавать анимацию, писать программы, вручную вводить текст и графику или генерировать содержание страниц автоматически во время обращения к ним.

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

Область видимости блока. clip.

Соверешенно необязательно показывать весь блок целиком. Можно показать только часть блока. Управляется такое отображение параметром clip описания CSS. В приведенном ниже примере мы просто обрезали карточку голубого цвета.

...

&lt/div>

[] []

[]

Достигнутый эффект очень похож на изменение "нарезанной" графики, но только достигнут он другими средствами.

При вырезании области видимости в IE следует учитывать, что работает clip только при абсолютном позиционировании. В NN поддерживается как абсолютное позиционирование, так и относительное.

Обтекание блока текста

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

"Обтеканием" блока текста другим текстом управляют два атрибута CSS: float и clear.

Атрибут float определяет плавающий блок текста. Он может принимать значения:

left - блок прижат к левой границе охватывающего блок элемента,

rigth - блок прижат к правой границе охватывающего блок элемента,

both - текст может обтекать блок с обеих сторон.

Проиллюстрировать обтекание можно на следующем примере:

Этот блок текста мы прижали
к левой границе раздела.
Он имеет границу шириной в
один пиксель и ширину в 30%
от ширины раздела. Размер шрифта обтекаемого блока текста намеренно уменьшен до 8-ми пикселей, чтобы блок текста лучше выделялся на общем фоне содержания страницы.

При использовании значения "right" блок текста будет прижат вправо.

Этот блок текста мы прижали
к правой границе раздела.
Он имеет границу шириной в
один пиксель и ширину в 30%
от ширины раздела. Размер шрифта обтекаемого блока текста намеренно уменьшен до 8-ми пикселей, чтобы блок текста лучше выделялся на общем фоне содержания страницы.

Второй атрибут описания стилей clear позволяет управлять собственно обтеканием. Он запрещает наличие плавающих блоков около блока текста. Атрибут может принимать значения: right, left, none, both:

<p style='clear:right;text-align:justify;'>У этого блока текста не может быть \"плавающего\" правого блока, т.к. мы его запретили. По этой причине он начинается ниже прижатого вправо ограниченного блока.</p>

if(window.navigator.appName=="Microsoft Internet Explorer") { document.write("

Этот блок текста мы прижали
к правой границе раздела.
Он имеет границу шириной в
один пиксель и ширину в 30%
от ширины раздела.

"); document.write("

У этого блока текста не может быть \"плавающего\" правого блока, т.к. мы его запретили. По этой причине он начинается ниже прижатого вправо ограниченного блока.

"); }

Относительные координаты

Данная координатная система позволяет разместить блоки на странице в координатах охватывающего их блока. Преимущества и необходимость наличия такой координатной системы очевидны. Она позволяет сохранять взаимное расположение элементов разметки при любом размере окна браузера и его настройках умолчания.

В качестве точки отсчета в этой системе координат выбрана точка размещения текущего блока по умолчанию. Ось X при этом направлена горизонтально вправо, а ось Y - вертикально вниз.

Для задания координат блока в этой системе применяют запись типа:

Этот блок находится в точке отсчета относительных координат

</div>

А этот блок смещен вправо на 50px

</div>

Этот блок находится в точке отсчета относительных координат

А этот блок смещен вправо на 50px

Для работы с относительной системой координат лучше пользоваться универсальными блоками DIV. Это связано с тем, что в NN, например, параграф не может содержать параграфов. Любой блок немедленно закрывает параграф, следовательно, вложить в него что-либо нельзя.

Следует отметить, что NN вообще непредсказуем в работе с относительными координатами, поэтому в нем их следует избегать.

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

<a class=doc
href="javascript:
if(flag==0)
{window.document.layers[2].left=-50;flag=1;}
else
{window.document.layers[2].left=50;flag=0;};
void(0);">
Сдвинуть слой
</a>

</div>

В данном примере слой, первоначально сдвинутый на 50 пикселей вправо, после нажатия на гипертекстовую ссылку смещается на 100 пикселей влево, получая отрицательную величину смещения по оси X (left:-50px). После повторного нажатия на ссылку положение блока восстанавливается.

Отступы(margin)

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

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

Внешний отступ(margin) может отсчитываться по любому направлению относительно сторон блока:

margin-left:

левый внешний отступ. Определяет расстояние от левой границы блока текста до левой границы внутреннего отступа("набивки", padding) охватывающего элемента

margin-right:

правый внешний отступ. Определяет расстояние от правой границы блока текста до левой границы внутреннего отступа("набивки", padding) охватывающего элемента

margin-top:

верхний внешний отступ. Определяет расстояние от верхней границы блока текста до верхней границы внутреннего отступа("набивки", padding) охватывающего элемента

margin-bottom:

нижний внешний отступ. Определяет расстояние от нижний границы блока текста до нижней границы внутреннего отступа("набивки", padding) охватывающего элемента

margin:

задает общий внешний отступ от всех сторон блока текста. Применяется в случае равноудаленности блока текста от всех границ внутреннего отступа охватывающего элемента.

Графически эти отступы можно представить следующим образом:

В данном случае для параграфа использовалось следующее описание стиля:

p {margin-left:50px;margin-right:5px;
margin-top:15px;margin-bottom:50px;
padding:0px;text-align:left;}

Следует отметить, что браузеры могут по разному отображать эти параметры. NN 4.x довольно неуклюже обрабатывает margin, оптимизируя представление стиля там, где этого делать не нужно.

Если размер всех внешних отступов одинаковый, то можно просто воспользоваться атрибутом margin:

p {margin:5px;}

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

Переопределение стиля

Под переопределением стиля в элементе разметки мы понимаем применение атрибута STYLE у данного элемента разметки:

Заголовок первого уровня

</h1>

Первая строка параграфа

При оформлении параграфов в технологии CSS автор может воспользоваться "красной" строкой, которую предоставляет ему атрибут text-indent.

Речь идет о горизонтальном отступе в первой строке параграфа относительно его левого края:

<p style="text-indent:20pt;">Этот параграф мы начнем со строки с горизонтальным отступом в двадцать типографских пунктов от левого края параграфа. </p>

Этот параграф мы начнем со строки с горизонтальным отступом в двадцать типографских пунктов от левого края параграфа.

<p style="text-indent:-10pt;">А в этом параграфе мы применим отрицательный горизонтальный отступ в первой строке параграфа. </p>

А в этом параграфе мы применим отрицательный горизонтальный отступ в первой строке параграфа.

Отрицательные значения атрибутов - это нормальная практика CSS. Там где логически применение отрицательного значения оправдано, например, смещение вложенного блока текста относительно охватывающего элемента разметки, там можно указывать отрицательные атрибуты смещения.

Кроме text-indent в CSS для управления первой строкой параграфа зарезервирован модификатор стиля first-line. Он позволяет не только задать горизонтальное смещение, но и определить другие параметры параграфа:

P:first-line {color:red}

Другой параметр, который влияет на отображение первой строки параграфа - первая буква первой строки. Ее отображением управляет модификатор first-letter:

P:first-letter {font-size:20pt;}

К большому сожалению оба этих модификатора реализованы не во всех версиях браузеров, поэтому для верности применяют элементы разметки FONT и TABLE.

Порядок наложения блоков. z-index.

Если быть более точным, то блоки - это прямоугольные карточки, которые лежат на поверхности, перекрывая друг друга. Расстояние между ними задать нельзя, т.е. полноценного третьего измерения нет:

Порядок перекрытия блоков (слоев в терминах Netscape) определяется атрибутом z-index. Чем больше значение z-index, тем ближе к наблюдателю находится слой:

Как видно из картинки, z-index может принимать и отрицательные значения.

При работе с этим атрибутом следует иметь в виду, что NN и IE применяют разные модели описания "слойки". В IE - это просто числовой параметр, который закреплен за блоком и не влияет на значения этого параметра у других блоков. В NN изменение параметра z-index одного блока влиет на значения этого параметра у других блоков. Они, словно карточки на столе, перекладываются и принимают новую нумерацию.

[]

Карточки перекрываются. Если нажать на гипертекстовую ссылку "Переложить", то голубая карточка поползет вниз и при обратном ходе поменяет свое местоположение относительно красной карточки.

Порядок наложенияи область видимости

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

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

Позиционирование

Этот раздел посвящен размещению блочных элементов HTML-разметки в рабочей области браузера с точностью до пикселя. До появления спецификации CSS-P, которая вошла в спецификацию CSS2, ничего подобного делать на HTML-страницах было нельзя. Некоторые наиболее дотошные читатели могут спросить - "А как на счет элемента разметки LAYER?". Во-первых, LAYER был введен Netscape практически одновременно с появлением CSS-P, а во-вторых, он поддерживается только браузерами Netscape.

Позиционирование и его программирование на JavaScript - это сплошное "минное поле" между двумя основными браузерами. При просмотре этих страниц следует отдавать себе отчет в том, что для каждого браузера загружается своя страница описания свойств позиционирования.

До появления CSS-P единственным средством относительно точного позиционирования были таблицы. Они позволяли точно расположить компоненты HTML-страницы относительно друг друга на плоскости. CSS-P описание позволяет точно разместить элемент разметки не только относительно других компонентов страницы, но и относительно границ страницы.

Кроме этого CSS-P добавляет странице еще одно измерение - элементы разметки могут "наезжать" друг на друга.

Первый слой, на который наедем другим слоем.

Второй слой, который наезжает на первый.

При этом можно менять порядок "наезда" - "перекладывать" слои. Для того, чтобы в этом убедиться, достаточно воспользоваться ссылкой из выше приведенного примера.

Но и это еще не все. Слои можно проявлять:

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

Термин "слой" вместо "блочный элемент разметки" используется здесь по той причине, что он лучше отражает эффект, который достигается за счет позиционировани, а не в пику поклонникам Microsoft.

Теперь осталось перейти к обсуждению атрибутов позиционирования.

Преобразование шрифта

Преобразование шрифта подразумевает капитализацию слов, первод всех "больших" и "маленьких" букв в большие, или, наоборот, получение одних строчных.

Рассмотрим несколько примеров:

<p style="text-transform:uppercase;">Transfer All Letters into Uppercase</p>

Transfer All Letters into Uppercase

<p style="text-transform:lowercase;">Transfer All Letters into Lowercase</p>

Transfer All Letters into Lowercase

<p style="text-transform:capitalize;">Capitalization of the string</p>

Capitalization of the string

Английский язык для фраз этих примеров выбран не случайно. Выполнение преобразований зависит от алгоритма преобразования символов. В нелокализованных программах переход от строчных букв к прописным осуществляется путем простого смещения по таблице ASCII, что для русского алфавита не является приемлемым

Еще один вид преобразования шрифта - это подчеркивание, перечеркивание или надчеркивание слов. Выполняется такое преобразование путем применения атрибута text-decoration:

<p style="text-decoration:line-through;">Перечеркнем это предложение.</p>

Перечеркнем это предложение.

<p style="text-decoration:underline;">Подчеркнем это предложение.</p>

Подчеркнем это предложение.

Для того, чтобы преобразование работало, нужно соответствующее начертание (подчеркнутые или перечеркнутые начертания букв). Очень сложно найти гарнитуру, в которой было бы начертание с надчеркнутыми буквами. Отмена декора происходит, если использовать в text-decoration значение none.

"Пульки"-картинки

Если стандартные формы "пулек" не устраивают автора страницы, то он может использовать нестандартные. Для этого ему придется "пульку" нарисовать самому и в виде графического файла разместить на Web-узле. У такой "пульки" есть URL, который используется в CSS для обращения к ней.

<li>Элемент списка расположен за чертой

</ul>

if(window.navigator.appName=="Microsoft Internet Explorer") { document.write("Элемент списка расположен за чертой"); } else { document.write("

Элемент списка расположен за чертой

"); }

Картинка может быть и более замысловатой. Это уже зависит от фантазии автора документа. Например, можно создать картинку-стрелочку:

<li>Элемент списка расположен за стрелкой

</ul>

if(window.navigator.appName=="Microsoft Internet Explorer") { document.write("Элемент списка расположен за стрелкой"); } else { document.write("

Элемент списка расположен за стрелкой

"); }

Здесь следует признаться в маленьком обмане. Если вы пользователь IE, то все, что здесь написано - это правда. Фрагмент кода, представленный перед примером, является его точной копией. Перед пользователями же NN придется извиниться. NN не поддерживает этого атрибута. В тексте страницы присутствует JavaScript-код, который имитирует применение атрибута list-style-image в случае просмотра сраницы браузером от Netscape.

Селектор - идентификатор объекта.

Объектная модель документа (Document Object Model) описывает документ как дерево объектов. Объектами являются: сам документ, разделы(элемент DIV), картинки, параграфы, приложения и т.п.. Каждый из объектов можно поименовать и обращаться к нему по имени. Данная возможность используется при программировании страниц на стороне клиента, например, на .

Применение идентификатора объекта оправдано еще и в случае модификации атрибута описания стиля для данного объекта в его CSS-описании. Вместо создания двух описаний классов, которые различаются только одним из параметров, можно создать одно описание и описание идентификатора объекта. Описание стиля для объекта задается строкой, в которой селектор представляет собой имя этого объекта с лидирующим символом "#":

a.mainlink {color:darkred;text-decoration:underline;font-style:italic;}

#blue {color:#003366}

...

<a class=mainlink>основная гипертекстовая ссылка</a>

<a class=mainlink id=blue>модифицированная гипертекстовая ссылка</a>

...

основная гипертекстовая ссылка

модифицированная гипертекстовая ссылка

Следует оговориться, что интерпретации идентификаторов объектов в IE и NN разные. Дело в том, что существует еще атрибут name у элемента разметки. NN предпочитает иметь дело именно с этим атрибутом при идентификации объекта, а IE с атрибутом id.

Различия в интерпретации ID в браузерах при декларативном использовании CSS не очень страшны. Все становится гораздо хуже, когда автор решится программировать стили, т.е. изменять значения атрибутов описателей стилей. В этом случае разница объектных моделей документов в NN и IE проявится в полной мере. Фактически, придется разрабатывать совершенно разные страницы для каждого из браузеров.

Селектор - имя элемента разметки

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

Такой способ конструирования сайта позволяет автору изменять внешний вид всех страниц путем внесения изменений в файл описания стилей, а не в файлы HTML-страниц.

Внешний файл при этом может выглядеть следующим образом:

i, em {color:#003366,font-style:normal}

a i {font-style:normal;font-weight:bold;text-decoration:line-through}

Первая строка этого описания перечисляет селекторы-элементы, которые будут отображаться одинаково:

<i>>Это курсив</i> и это тоже <em>курсив</em>

Это курсив и это тоже курсив

Последняя строка определяет стиль отображения вложенного в гипертекстовую ссылку курсива:

kuku

В данном случае переопределение состоит в том, что текст отображается внутри гипертестовой ссылки перечеркнутым и "жирно".

[ ]

Селектор - имя класса

Имя класса не является каким-либо стандартным именем элемента HTML-разметки. Имя класса определяет описание класса элементов разметки, которые будут отображаться одинаково. Для того, чтобы отнести элемент разметки к определенному классу, нужно воспользоваться атрибутом class этого элемента разметки:

<style>

.kuku {color:white;background-color:darkred;}

</style>

...

Этот параграф мы отобразим белым цветом по темно-красному фону

</p>

...

<p>

Эту <a class=kuku>гипертекстовую ссылку</a> мы отобразим белым цветом по темно-красному фону.

</p>

Этот параграф мы отобразим белым цветом по темно-красному фону

Эту гипертекстовую ссылку мы отобразим белым цветом по темно-красному фону.

Как видно из этого примера, в любом элементе разметки можно сослаться на описание класса отображения. При этом совершенно не обязательно, чтобы элементы разметки были однотипными. В примере к одному классу отнесены и параграф и гипертекстовая ссылка в другом параграфе.

Лидирующую точку в имени класса можно опускать. Она задается из соображений сохранения общности описания. Так, например, можно определить классы отображения однотипных элементов разметки:

a.menu {color:red;background-color:white;text-decoration:normal;}

a.paragraph {color:navy;text-decoration:underline;}

В данном примере класс гипертекстовых ссылок menu имеет одно описание стиля, а класс гипертекстовых ссылок paragraph совершенно другое. При этом каждый из этих классов нельзя применить к другим элементам разметки, например, параграфу или списку. Если не задано имени элемента разметки, то это обозначает, что класс можно отнести к любому элементу разметки - корневой класс описания стилей. Это очень похоже на обозначение имени корневого домена в системе доменных имен. Собственно ничего удивительного здесь нет, т.к. система классов объектов на HTML-странице представляет из себя дерево. Элементы разметки - это узлы дерева.

[]

Шрифт

Шрифтам в компьютерной графике всегда уделялось много внимания. World Wide Web в этом аспекте не является исключением. Но все богатство и разнообразие шрифтов, существующих в природе, для русского языка ограничено фактически тремя шрифтами: serif(обычно Times или другой шрифт с засечками), sans-serif(Arial, или Helvetica, или другой шрифт без засечек) и monospace(Courier). Если быть точным, то здесь перечислены семейства шрифтов. Обычно, каждое из этих семейств представлено только одним кириллическим шрифтом.

Автор документа для управления отображением букв текста может применить несколько атрибутов, влияющих на шрифт:

font-family - семейство начертаний шрифта (гарнитура);

font-style - прямое начертание или курсив;

font-weight - "усиление"(насыщенность) шрифта, "жирность" букв;

font-size - размер шрифта(кегль). Задается в пикселях(px) и типографских пунктах(pt).

font-variat - вариант начертания (обычный или мелкими буквами - капитель).

Существует также возможность совместить все эти параметры в одном атрибуте font:

font:bold 12pt sans;

Нет, правда, никакой уверенности в том, что последнее определение шрифта будет работать во всех браузерах.

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

Самое неприятное, что может возникнуть при использовании шрифтов - это несоответствие моноширинных шрифтов, которые используются в HTML-формах. Обратная связь с пользователем в этом случае оказывается парализованной.

Спецификация CSS разрешает перечислять шрифты в описаниях стилей, что позволяет частично решить проблему подбора шрифта. К сожалению в Unix и Windows шрифты не согласованы. Фактически, при разработке страниц в CSS используются только классы шрифтов (serif, sans-serif и monospace).

Формально стиль отображения элементов разметки

Формально стиль отображения элементов разметки задается ссылкой в элементе разметки на селектор стиля. Синтаксис описания стилей в общем виде представляется следующим образом:

selector[, selector[, ...]]{attribute:value;[atribute:value;...]}

или

selector selector [selector ...] {attribute:value;[atribute:value;...]}
Первый вариант перечисляет селекторы, для которых действует данное описание стиля. Второй вариант задает иерархию вложенности селекторов, для совокупности которых определен стиль. Напомним, что речь в данном случае идет об описаниях стилей в нотации "text/css". Описания стилей размещаются либо внутри элемента STYLE, либо во внешнем файле.
В качестве селектора можно использовать: имя элемента разметки, имя класса и идентификатор объекта на HTML-странице.
Атрибут (attribute) определяет свойство отображаемого элемента, например, левый отступ параграфа (margin-left), а значение (value) - значение этого атрибута, например, 10 типографских пунктов (10pt).

Списки

При отображении списков CSS позволяет управлять формой и изображением "пулек"(bullets) списка. "Пулька"(bullet) - это символ перед элементом списка. Например, в неупорядоченном списке (unordered list) перед элементом списка ставится "жирная" точка:

Первый элемент списка Второй элемент списка Третий элемент списка

CSS позволяют управлять формой "пулек" и заменять "пульки" картинками.

Любопытно, что управление отображением элементов списка отнесено к набору свойств, в который входит атрибут display. У этого атрибута может быть только одно значение - none. Если элемент в своем описании имеет атрибут display, и этот атрибут равен none, то он браузером не отображается вообще:

<li>Первый элемент списка

<li>Второй элемент списка

<li>Третий элемент списка

</ul>

Первый элемент списка Второй элемент списка Третий элемент списка

Если Вы, Уважаемый Читатель, посмотрите HTML-код данного документа, то вслед за примером найдете описание списка, которое браузер не отобразил.

Атрибут display управляет отображением документа на дисплее компьютера, но не распространяется на другие среды отображения документа. Например, при печати скрытый список должен быть отображен.

Однако, в реальности он не отображается и при печати.

Способы применения CSS

Под способами применением CSS мы в данном разделе понимаем форму декларирования стиля на HTML-странице и форму связывания описания стиля отображения элемента разметки с самим этим элементом. Речь идет о том, где и в какой форме автор страницы (или дизайнер) описывает стиль, и как и в какой форме на него ссылается.

Итак, различают четыре способа применения стилей:

переопределение стиля в элементе разметки

размещение описания стиля в заголовке документа в элементе STYLE

размещение ссылки на внешнее описание через элемент LINK

импорт описания стиля в документ

Здесь мы следуем за George Young из Microsoft (Cascading Style Sheets in Internet Explorer 4.0. Microsoft, 1997). Следует отметить, что импорт стиля не поддерживается в браузерах других производителей. Однако, т.к. патент на CSS1 принадлежит Microsoft, опустить импорт в нашем описании мы считаем неправильным.

Ссылка на внешнее описание

Ссылка на описание стиля, расположенное за пределами документа, осуществляется при помощи элемента LINK, который размещают в элементе HEAD. Внешнее описание может представлять из себя файл, содержание которого - описание стилей. Описание стилей в этом файле будет по синтаксису в точности совпадать с содержанием элемента STYLE.

Ниже приведен пример ссылки на внешнее описание стилей:

Важными здесь являются значения атрибутов rel и type. Rel обязан иметь значение "stylesheet". Type может принимать значения: "text/css" или "text/javascript". Второй тип описания стилей введен Netscape. Его мы в данном учебном курсе не обсуждаем.

Атрибут href задает универсальный локатор ресурса (URL) для внешнего файла описания стилей. Это может быть ссылка на файл с любым именем, а не только на файл с расширением *.css.

[]

Свойства блоков

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

Блок текста обладает свойствами: высоты(height), ширины(width), границы(border), отступа(margin), набивки(padding), произвольного размещения(float), управления обтеканием(clear).

Графически свойства можно представить следующим образом:

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

С шириной и высотой блока текста более или менее все понятно. Задаваться они могут в типографских пунктах(pt), пикселях(px) и условных единицах(em):

<div style="width:200px;">пиксели</div>

<div style="width:200pt;">типографские пункты</div>

<div style="width:5em;">условные единицы</div>

пиксели

типографские пункты

условные единицы

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

Расстояние от границы блочного элемента до границы вложенного в него блочного элемента назыается padding. В терминологии данного учебного пособия для обозначения данного свойства употребляется слово "набивка" или словосочетание "внутренний отступ".

Отступ от "набивки" внешнего блочного элемента до границы вложенного элемента называется margin. Для его обозначения мы будем употреблять термин "отступ" или словосочетание "внешний отступ".

Таким образом, padding и margin характеризуют отступы блочного элемента относительного начала его содержания и относительно границы охватывающего его элемента разметки соответственно:

Отступы и "набивка" могут быть левыми, правыми, верхними и нижними. CSS позволяет варьировать любые из них. Более подробно отступы обсуждаются в разделе "Отступы(margin)", а "набивка" в разделе "Набивка(padding)".
При отображении блока текста можно показать его видимую границу. CSS позволяет определить ее стиль, ширину и цвет.При применении видимой границы следует учитывать специфику браузеров. Одним из осмысленных способов применения границы явлется видимое ограничение "плавающих" блоков текста.
"Плавающий" текстовый блок позволяет реализовать возможность обтекания этого блока текстом:
Прижмем блок текста вправо. Слева будем обтекать его другим текстом.
Обтекание одного текста другим происходит в том же самом ключе, что и обтекание текстом картинки или таблицы. Текст охватывающего блока стремится втиснуться в свободное место, оставленное "плавающим" блоком. Когда граница "плавающего" блока кончается, охватывающий блок распространяется на всю ширину отведенного для текста пространства.
CSS позволяет реализовать выравнивание блока текста не только по краю страницы, но и по центру(только в NN).
Отцентрируем блок текста
Блок разместился по центру страницы, если страница просматривается в NN. CSS не поддерживает значение атрибута float равным center.
Таким образом, блок текста с точки зрения размещения на странице равноценен картинкам или прямоугольным областям приложений.

Текст

В этом разделе мы рассмотрим те свойства текстового фрагмента, которые остались без внимания при рассмотрении блоков текста и шрифтов.

При обсуждении свойств блочных элементов разметки был сделан упор на описание параметров, относящихся к блоку как целому. Мы не рассматривали внутренние характеристики текста.

Обсуждая шрифты, мы сосредоточили свое внимание на начертаниях символов как таковых, а не на их соотношениях между собой.

При всем при этом в стороне остались такие важные характеристики текстового фрагмента, как:

межбуквенные расстояния, высота строк, выравнивание, отступ в первой строке параграфа, преобразования начертания,

Все эти атрибуты сгруппированы в свойства текстовых фрагментов (Text Properties).

Управление цветом в CSS

Каскадные таблицы стилей (CSS) в первую очередь описывают свойсва текста. Это касается как текстовых блоков, так и строковых элементов разметки содержания страницы. В данном разделе речь пойдет об управлении отображением цвета текста (color) и цвета фона (background-color), на котором отображается текст.

Кроме цвета текста и цвета фона CSS позволяет определять цвет границы текстового блока (border-color).

Вообще говоря, атрибуты стилей, которые мы собираемся рассмотреть в этом разделе, относятся к группе атрибутов "Color and Background Properties", как это определено в спецификации Micrоsoft. Всего в эту группу входит семь атрибутов, шесть из которых определяют свойства фона. Кроме цвета фона и его прозрачности можно управлять фоновой картинкой (координатами ее размещения и способами ее повторения). К сожалению NN не поддерживает большинство из этих атрибутов, поэтому мы не сочли возможным их детальное рассмотрение.

Интерпретация атрибутов цвета в NN и IE различаются. В NN фоновый цвет отображается только там, где есть текст, а в IE фоновый цвет заливает весь блок или строковый элемент вне зависимости от присутствия или отсутствия в нем текста.

Управление видимостью

Одним из наиболее интересных атрибутов CSS-P является атрибут visibility. Он позволяет "проявлять" или прятать информацию на HTML-странице.

Например, эта страница - набор кадров, которые можно перелистывать. Для этого просто нужно нажимать на слово "далее" в конце этой страницы.

Перелистывание реализовано как изменение атрибута visibility в JavaScript-функции:

function change()

{

next=current+1; if(next>1) next=0;

window.document.layers[current].visibility="hidden";

window.document.layers[next].visibility="show";

current=next; }

Вызов функции при этом помещен в гипертекстовую ссылку со схемой URL "javascript":

далее...

</a>

На предыдущих фрагментах этой страницы мы обсудили программирование visibility, но ни словом не упомянули о том, как этот атрибут записывается в CSS. Здесь мы восполняем этот пробел и приводим описание невидимого раздела:

При программировании атрибута visibility следует принимать в расчет тип браузера. Данная страница написана для Netscape Navigator. Только этот браузер поддерживает объект layer, который мы используем при программировании. В Microsoft Internet Explorer этот код работать не будет. Для IE нами разработана другая страница.

Перелистывание реализовано как изменение атрибута visibility в JavaScript-функции:

function change()

{

next=current+1; if(next>1) next=0;

window.document.all.item("kuku",current).visibility="hidden";

window.document.all.item("kuku",next).visibility="visible";

current=next; }

Последовательность "kuku" - это значение атрибута id раздела.

Вызов функции при этом помещен в гипертекстовую ссылку со схемой URL "javascript":

далее...

</a>

При программировании атрибута visibility следует принимать в расчет тип браузера. Данная страница написана для Microsoft Internet Explorer. Это следует и из программного кода, который поддерживает DHTML объектную модель документа и из использования атрибута id у раздела. Для Netscape Navigator нами разработана другая страница.

Выравнивание

По умолчанию все слова в параграфе прижаты влево. Левый край параграфа, таким образом, оказывается выравненным. Аналагичным образом может быть выравнен правый край параграфа или блока текста, и даже оба края вместе.

В обычной HTML-разметке этот эфект достигается за счет применения атрибута align, как это сделано на страницах данного пособия :)

Аналогичный результат в CSS достигается засчет атрибута text-align:

<p style="text-align:right;color:darkred;">Этот параграф выравнен по правому краю. Все строки справа кончаются на границе раздела. А вот слева они начинаются с различным отступом от левого края. </p>

Этот параграф выравнен по правому краю. Все строки справа кончаются на границе раздела. А вот слева они начинаются с различным отступом от левого края.

<p style="text-align:right;color:darkred;">Этот параграф выравнен по правому краю. Все строки справа кончаются на вертикальной границе раздела. Все строки слева теперь начинаются также с вертикальной границы раздела. </p>

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

Выравнивать текст можно в любом блочном элементе. Кроме выравнивая по краям блочного элемента текст можно центрировать (<p style="text-align:center;">...</p>).

Заголовок первого уровня

Атрибут style можно применить внутри любого элемента разметки. Например, мы можем через style определить ширину и выравнивание элемента hr(горизонтальное отчеркивание):

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

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

[]