4337

Cascading Style Sheet (CSS) в примерах

Книга

Информатика, кибернетика и программирование

CascadingStyleSheet в примерах Назначение CSS Дизайн Web-узлов — это точное размещение компонентов HTML-страниц относительно друг друга в рабочей области окна браузера. Недостатки такого определения Web-дизайна очевидны. В нем не уч...

Русский

2012-11-16

730.5 KB

45 чел.

Cascading Style Sheet в примерах

Назначение CSS

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

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

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

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

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

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

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

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

Общие положения

На то, что при описании элементов Web-страницы используются CSS, указывают теги

<STYLE> и </STYLE>.

Конкретно на использование каскадных таблиц стилей указывает атрибут TYPE. В нашем случае значение этого атрибута будет

TYPE="text/css"

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

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

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

<STYLE TYPE="text/css">

   H1 { color: red }

</STYLE>

"Н1" - селектор, а "{ color: red }" - декларация. Несложно заметить, что сама декларация также состоит из двух частей. Это в данном случае "color" - свойство и "red" - значение. То есть в общем случае

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

Типы селекторов

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

H1 { font-family: Helvetica }

Таким образом, синтаксис задания стиля можно описать, как

тег { значение: свойство }

Если одна и та же декларация применяется по отношению к нескольким селекторам, как в

H1 { font-family: Helvetica }

H2 { font-family: Helvetica }

H3 { font-family: Helvetica }

то селекторы можно сгруппировать, применив к ним одну декларацию:

H1, H2, H3 { font-family: Helvetica }

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

H1 { font-weight: bold }

H1 { font-size: 12pt }

H1 { line-height: 14pt }

H1 { font-family: Helvetica }

H1 { font-variant: normal }

H1 { font-style: normal }

будет эквивалентна 

H1 { font-weight: bold;  font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal; }

В этом случае декларации разделяются точкой с запятой.

Контекстные селекторы

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

тег1 тег2 { значение: свойство }

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

<HEAD>

<STYLE TYPE="text/css">

H1 I {font-family: Arial; font-size: 24pt; Color:red}

</STYLE>

</HEAD>

<BODY>

<H1> Здесь применяются  <I> стили </I> </H1>

<I> ;А здесь стилей нет. </I>

</BODY>

стиль, описанный как 

H1 I {font-family: Arial; font-size: 24pt; Color: red}

будет применен только к слову, описанному обоими тегами, т. е. к слову "стили" (рисунок 1). 

Классы селекторов. Назначение класса для одинаковых тегов

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

тег.имя_класса { свойство: значение }

запишем

H3.red {font-family: Arial; font-size: 10pt; Color: red}

H3.blue {font-family: Times New Roman; font-size: 14pt; Color: blue}

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

тег class="имя_класса"

В общем же виде код будет выглядеть так:

<HEAD>

<STYLE TYPE="text/css">

   H3.red {font-family: Arial; font-size: 20pt; Color:red}

   H3.blue {font-family: Times New Roman; font-size: 24pt; Color:blue}

</STYLE>

</HEAD>

<BODY>

<H3 CLASS="red"> Красный заголовок </H3>

<H3 CLASS="blue"> Синий заголовок </H3>

</BODY>


(рисунок 2). 

Классы селекторов. Назначение класса для разных тегов

Назначение класса для разных тегов происходит аналогично вышеизложенному, с той лишь разницей, что тег, к которому отнесен класс, явно не указан:

.имя_класса { свойство: значение }

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

<HEAD>

<STYLE TYPE="text/css">

.red {font-family: Arial; font-size: 20pt; Color: red}

.green {font-family: Times New Roman; font-size: 24pt; Color: green}

</STYLE>

</HEAD>

<BODY>

<H3 CLASS="green"> Красный заголовок </H3>

<H3 CLASS="red"> Зеленый заголовок </H3>

<DIV CLASS="green"> Зеленая надпись </DIV>

</BODY>


(рисунок 3). 

Идентификаторы селекторов

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

#idимя_идентификатора {свойство: значение }

соответствующие же идентификатору свойства придаются выбранному тегу как

тег id="idимя_идентификатора"

Пример:

<HEAD>

<STYLE TYPE="text/css">

#id100 {font-family: Arial; font-size: 20pt; Color: red}

#idblue {font-family: Times New Roman; font-size: 24pt; Color:blue}

</STYLE>

</HEAD>

<BODY>

<H3 ID="id100"> Красный заголовок. </H3>

<DIV ID="idblue"> Синяя надпись. </DIV>

</BODY>


(рисунок 4).
 

Селекторы - ссылки

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

link Неиспользованная ссылка 

hover Ссылка с помещенным поверх нее указателем мыши меняет свой стиль на указанный в декларации этого псевдокласса

active Активная используемая в данный момент ссылка 

visited Использованная ссылка 

Синтаксис использования этих псевдоклассов в общем-то одинаков:
 

A:link {свойство: значение}

A:hover { свойство: значение }

A:active { свойство: значение }

A:visited { свойство: значение }

Пример:

<HEAD>

<STYLE TYPE="text/css">

A:link {font-size: 14pt; text-decoration:underline; Color:red}

A:hover {font-size: 10pt; text-decoration:none; Color:blue}

A:active {font-size: 20pt; text-decoration:none; Color:yellow}

A:visited {font-size: 10pt; text-decoration:none; Color:green}

</STYLE>

</HEAD>

<BODY>

<A href="file.htm"> Новая ссылка </A> <BR>

<A href="link.htm"> Использованная ссылка </A>

</BODY>


На 
рисунке 5 изображен именно тот момент, когда указатель мыши оказался над одной из надписей-ссылок.

Назначение стиля тегам или страницам

Назначить определенный стиль для Web-страницы или определенной ее части либо тега можно тремя методами.

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

<LINK REL="stylesheet" TYPE="text/css" HREF="имя_файла.css">

В примере 

<HEAD>

   <LINK REL="stylesheet" TYPE="text/css" HREF="samp.css">

</HEAD>

<BODY>

   <H1> Назначение стиля </H1>

   <P> Пример ссылки на стиль. </P>

</BODY>

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

<HTML>

<HEAD>

   <TITLE> Cool Style </TITLE>

   <LINK REL=STYLESHEET TYPE="text/css" HREF="http://www.coolstyle.com/superstyles.css">

</HEAD>

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

<HEAD>

   <STYLE TYPE="text/css">

      селектор1 {свойство: значение }

      селектор2 { свойство: значение }

   </STYLE>

</HEAD>

Пример.

<HEAD>

   <STYLE TYPE="text/css">

   H1 {font-family: Arial; font-size: 40pt; Color:red}

   P {font-size:12pt; line-height:20pt}

   </STYLE>

</HEAD>

<BODY>

<H1> Назначения стиля </H1>

<P> Пример вложенного стиля </P>

</BODY>

Инлайновый стиль. Наравне с возможностью "импортировать" стиль с другого компьютера или указать его для всей страницы разом существует возможность указать стиль непосредственно для определенного тега или строки, что видно из названия.

<тег STYLE="свойство: значение"> ТЕКСТ </тег>

Пример:

<BODY>

<H1 STYLE="font-family: Arial; font-size: 40pt; Color:red"> Назначение стиля </H1>

<P STYLE="font-size:28pt; line-height:20pt"> Пример инлайнового стиля </P>

</BODY>

Иерархия стилей

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

инлайновый;

вложенный;

присоединенный.

Поэтому в примере, где файл style1.css предписывает стиль

I {font-size: 30pt; Color: red}

а остальные стилевые решения заданы как

<HEAD>

<LINK REL="stylesheet" TYPE="text/css" HREF="style1.css">

<STYLE TYPE="text/css">

I {Color: blue; text-decoration: underline}

</STYLE>

</HEAD>

<BODY>

<I STYLE="font-size: 28pt; color: green"> Иерархия стилей </I>

</BODY>

исполняться будет только декларация инлайнового стиля (рисунок 6). 


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

{свойство: значение!important}

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

<HEAD>

<STYLE TYPE="text/css">

.color {background: black; font-size: 28pt; color: aqua!important}

</STYLE>

</HEAD>

<BODY>

<P CLASS="code" STYLE="background: blue; font-size: 28pt; color:yellow">

Задание важности стиля </P>

</BODY>

безусловно, исполнится только значение color: aqua класса .color, как это и показано на (рисунке 7). 

Свойства шрифтов

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

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

Шрифтовые семейства и семейства шрифтов

Собственно шрифтовое семейство (font family) - это группа шрифтов, объединяющая шрифты различных способов начертания (курсив, полужирное начертание). Указывая на определенный шрифт, создатель Web-страницы предполагает наличие такового у пользователя. В известной степени это оправданно, так как некоторые распространенные шрифты (Arial, Helvetica) входят в поставку наиболее известных операционных систем и имеются на большинстве компьютеров. Но если, паче чаяния, таких шрифтов не окажется, можно указать общее семейство шрифтов (generic family), объединяющее шрифты с одинаковым типом начертания. В таблице приведены описания семейств русских шрифтов, рекомендованных авторами CSS (кодировка koi8-r).

Синтаксис описания семейства шрифтов уже знаком по примерам из первой части статьи:

{font-family: имя_шрифта1, имя_шрифта2, семейство_шрифтов}

После того как основные различия шрифтов и синтаксис их назначения прояснены, рассмотрим пример:

<head>

<style type="text/css">

<!-

font {font-family: Helvetica, Arial, sans-serif}

->

</style>

</head>

<font size="10"> Пример бессерифного шрифта. </font>

Здесь, назначая бессерифный шрифт для текста страницы, мы явным образом указали два шрифта Helvetica и Arial. Браузер пользователя при отображении данной страницы будет пытаться воспользоваться именно этими шрифтами, а не обнаружив их на компьютере пользователя, подставит любой другой шрифт, относящийся к семейству sans-serif. Результат - на рисунке 1. 


Следует обратить внимание и на то, что название шрифта, состоящее из двух слов, такое как Arial Cyr, следует брать в кавычки или апострофы, в зависимости от того, где вписывается название шрифта:

P {font-family: "Arial Cyr"}

или 

<FONT STYLE="font-family: 'Comic Sans'">.

Размеры шрифтов

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

{font-size: размер_шрифта}

Абсолютный размер. Задавая абсолютную величину шрифта, необходимо указать один из семи базовых размеров. Размеры эти таковы (от большего к меньшему):

* xx-large

* x-large

* large

* medium

* small

* x-small

* xx-small

Используя эти величины согласно синтаксису, получим конструкцию

{font-size:xx-large}

применение которой видно на следующем примере:

<html>

<head>

<title>Рисунок 5.2</title>

</head>

<body>

<P STYLE="font-size:xx-large"> Размер xx-large</P>

<P STYLE="font-size:x-large"> Размер x-large</P>

<P STYLE="font-size:large"> Размер large</P>

<P STYLE="font-size:medium"> Размер medium</P>

<P STYLE="font-size:small"> Размер small</P>

<P STYLE="font-size:x-small"> Размер x-small</P>

<P STYLE="font-size:xx-small"> Размер xx-small</P>

</body>

</html>

Результат отображения данного HTML-кода - на рисунке 2.

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

{font-size: large},

его размер станет large, точно так же, как это сделано в примере:

<html>

<head>

<title>Рисунок 5.3</title>

<style type="text/css">

font.size {font-size:medium}

font.size1 {font-size:larger}

</style>

</head>

<body>

<br><font class="size"> Размер medium</font>

<br><font class="size1"> А это larger</font>

</body>

</html>

Результат исполнения этого кода - на рисунке 3.

Явное указание размера. Наверное, самым простым методом указания размера шрифта является указание его величины в привычных единицах измерения. В качестве таковых применяются пикселы (px), дюймы (in), сантиметры (cm), миллиметры (mm), а также типографские единицы измерения - пики (pc) и пункты (pt), т. е. 1/12 пики. На практике это выглядит так (рисунок 4):

<html>

<head>

<title>Рисунок 5.4</title>

</head>

<body>

<P STYLE="font-size:0.5 in"> Размер в дюймах</P>

<P STYLE="font-size:0.7 cm"> Размер в сантиметрах</P>

<P STYLE="font-size:5 mm"> Размер в миллиметрах</P>

<P STYLE="font-size:12 pt"> Размер в пунктах</P>

<P STYLE="font-size:2 pc"> Размер в пиках</P>

</body>

</html>

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

Пример:

{font-size:50%}

Ширина символов

Под шириной символов понимаются два стандартных значения - normal и bold. Поэтому используя синтаксис

{font-weight: ширина_символа},

получим либо

{font-weight: normal},

либо

{font-weight: bold}.

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

bolder - для выделения текста жирным шрифтом, как это сделано в примере:

Напечатано <font style="font-weight:bolder">жирным</font>  шрифтом.

lighter - если надо сделать выделяемый текст тоньше:

<B>Напечатано <font style="font-weight:lighter"> нормальным</font> шрифтом.</B>

Для лучшего понимания приведем пример с использованием всех четырех способов задания ширины шрифта (рисунок 5):


 

<html>

<head>

<title>Рисунок 5.5</title>

</head>

<body>

<font style="font-weight:bold">Напечатано жирным шрифтом.</font><br>

<font style="font-weight:normal">Напечатано нормальным шрифтом.</font><br>

Напечатано <font style="font-weight:bolder">жирным</font> шрифтом.<br>

<B>Напечатано <font style="font-weight:lighter"> нормальным</font> шрифтом.</B><br>

</body>

</html>

Задание ширины символов с помощью численного ряда. Указанный метод задания ширины символа не является универсальным, поскольку нет единого стандартного значения для таких параметров, как normal или bold. Эти параметры призваны определять ширину символа прежде всего для шрифтов - членов одного шрифтового семейства: какой-то из них тоньше относительно другого, какой-то толще. Например, жирный шрифт Arial Bold шире нормального Arial, но это не значит, что он шире какого-то другого нежирного шрифта, даже если тот относится к семейству бессерифных шрифтов. Прямое указание шрифта невозможно, поэтому предусмотрена возможность задания ширины символов путем присваивания им значения из числового ряда от 100 до 900 - 100, 200, 300, 400, 500, 600, 700, 800, 900. Причем значение 400 соответствует нормальной ширине символов шрифта, а 700 - жирной. Назначается числовое значение точно в соответствии с приведенным выше синтаксисом, например:

{font-weight: 700}.

Начертание шрифта

На практике используют два стиля начертания того или иного шрифта - нормальный и наклонный. Синтаксис задания стиля начертания:

{font-style: начертание_шрифта}

Для задания нормального стиля начертания свойство font-style приобретает значение normal:

{font-style:normal}.

Для задания наклонного стиля - italic:

{font-style:italic}.

Для некоторых шрифтов наклонное начертание задается значением oblique. В CSS как первой, так и второй версии этот случай учтен и значение oblique применяется наравне с указанными выше значениями.

Вариант шрифта

Создателям Web-страниц предлагаются два варианта шрифтов записываемые в соответствии с синтаксисом

{font-variant: вариант_шрифта}.

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


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

<html>

<head>

<title>Рисунок 5.6</title>

</head>

<body>

Текст в варианте Normal и <font style="font-variant:small-caps">

Текст в варианте Small-caps</font>

</body>

</html>

Сокращенная запись

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

H1 {font-weight: bold;

font-size: 12pt;

line-height: 14pt;

font-family: Helvetica;

font-variant: normal;

font-style: normal;}

преобразуется в запись 

H1 {font: bold 12pt/14pt Helvetica}.

Оформление текстов

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

Красная строка

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

{text: величина _отступа}

Величина отступа может указываться в пикселах (px), дюймах (in), сантиметрах (cm), а так же в типографских пунктах (pt), как это и сделано в примере, результат исполнения которого можно видеть на рисунке 1. 

<html>

<head> <title>Рисунок 6.1</title> </head>

<div style="text-indent:40pt"> Абзац начался с красной строки.<br>

Для ее создания я отступил от края<br>

текста на расстояние в 40 пунктов.

</div>

</html>

Величину отступа можно задать и в процентах, например так:

P {text-indent:50%}

В этом случае начало абзаца отступит от края окна на расстояние, равное 50% открытого окна браузера.

Оформление текста

Предлагаемые в CSS средства оформления текста, во многом повторяют имеющиеся даже не в самой последней спецификации HTML. Синтаксис назначения стиля оформления таков:

{text-decoration: значение}

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

Пример применения этих свойств можно увидеть из HTML-кода примера:

<html> <head> <title>Рисунок 6.2</title> </head>

<div style="{text-decoration:none}"> Текст </div>

<div style="{text-decoration:underline}"> Текст подчеркнутый </div>

<div style="{text-decoration:line-through}"> Текст зачеркнутый </div>

<div style="{text-decoration:overline}"> Текст под чертой </div>

</html>

Результат исполнения кода - на рис. 2.
 

Трансформация текста

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

{text-transform: значение}

возможные варианты из таблицы 2,

исполняем HTML-код:
 

<html>

<head>

<title>Рисунок 6.3</title>

<style type="text/css">

text.none {font-size:20; text-transform:none}

text.capitalize {font-size:20; text-transform:capitalize}

text.uppercase {font-size:20; text-transform:uppercase}

text.lowercase {font-size:20; text-transform:lowercase}

</style>

</head>

<body>

<p class="none">Нормальное чередование букв.</p>

<p class="capitalize">Каждое слово начинается с прописной буквы.</p>

<p class="uppercase">Все буквы - прописные.</p>

<p class="lowercase">Все буквы - строчные.</p>

</body>

</html>

Результат исполнения - на рисунке 3.

Расстояние между буквами

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

{letter-spacing: значение}

Алгоритм выбора расстояния между буквами может задаваться тремя значениями - normal, length и auto. Если выбрано значение normal, принятое как значение по умолчанию, то изменить расстояние между буквами можно, придав свойству text alignment значение justify. В этом случае браузер распределит текст по ширине отведенного под данный текст пространства. При выбранном значении auto, браузер будет стремиться вытянуть текст в одну строчку. Это значение рекомендуется придавать свойствам заголовков. Непосредственно устанавливать расстояние между буквами можно, меняя численное выражение значения length. Это значение может измеряться, а следовательно, и отображаться, как в абсолютных единицах измерения, таких как сантиметры (cm), дюймы (in) и типографские пункты (pt), так и в относительных, к которым относятся пикселы (px) и эквиваленты размера шрифта, назначенного данному элементу текста (em). Указание численного значения выглядит, как
 

<html>

<head>

<title>Рисунок 6.4</title>

</head>

<div style="letter-spacing:0.5em">Расстояние между буквами</div>

</html>

Результат исполнения кода - на рисунке 4.

Расстояние между словами

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

{word-spacing: значение}

Высота строки

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

{line-height: значение}

Значение может принимать вид normal, length, number и percentage. Значение normal указывает на то, что выбрано значение, отображаемое браузером по умолчанию. Во втором случае указываются численные значения в пикселах, сантиметрах, дюймах или пунктах. HTML-код с таким методом задания выглядит, как (рисунок 5)

<html>

<head> <title>Рисунок 6.5</title>

</head> <body>

<div style="line-height:34pt"> Высота строки<br>

задана в пунктах.<br>

</div>

</body></html>

При задании значения в виде number за высоту строки принимается размер назначенного данному элементу шрифта, повторенный определенное число раз. Например: в коде HTML-документа, отображенного на (рисунке 6), размер шрифта умножается на 2.

<html>

<head>

<title>Рисунок 6.6</title>

</head>

<div style="line-height: 2; font-size:20pt">

Высота строки равна<br> размеру шрифта, умноженному на 2.<br>

<font style="font-size:10pt">

Вне зависимости<br> от размера шрифта

</font>

</div>


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

<div style="line-height:200%; font-size:20pt">

Выравнивание текста

В CSS предусмотрена возможность выравнивания текста относительно других элементов Web-страницы, как по горизонтали, так и по вертикали. Рассмотрим горизонтальное выравнивание. Предлагается четыре вида выравнивания - по левому краю страницы или ячейки таблицы, по правому краю, по центру и распределение текста по всей ширине страницы или ячейке таблицы. Тот или иной вид выравнивания достигается подстановкой, согласно синтаксису (рисунок 7).

{text-align: значение}

вариантов значения из таблицы 3.

В качестве примера приведем код таблицы из четырех ячеек (два столбца и две строки), в каждой ячейке которой текст выравнивается в соответствии с принципом, изложенным выше:
 

<html>

<head> <title>Рисунок 6.7</title> </head>

<body bgcolor="White">

<table width="400" cellspacing=2 cellpadding=5 border=1>

<tr>

<td VALIGN="top" WIDTH="50%"><p style="text-align:left">

Left.<br> Текст выровнен по левому краю, хотя, безусловно, мог бы быть распределен как-нибудь иначе</p></td>

<td VALIGN="top" WIDTH="50%"><p style="text-align:right">

Right.<br> Текст выровнен по правому краю, хотя, безусловно, мог бы быть распределен как-нибудь иначе</p></td>

</tr>

<tr>

<td VALIGN="top" WIDTH="50%"><p style="text-align:center"

Center.<br> Текст выровнен по центру, хотя, безусловно, мог бы быть распределен как-нибудь иначе</p></td>

<td VALIGN="top" WIDTH="50%"><p style="text-align:justify">

Justify.<br> Текст распределен по всей ширине, хотя, безусловно, мог бы быть распределен как-нибудь иначе</p></td>

</tr></table>

</body>

</html>

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

{vertical-align:значение}.

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

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

<html>

<head> <title>Рисунок 6.8</title> </head>

<table WIDTH="100%">

<tr>

<td VALIGN="top" WIDTH="30%"><img SRC="adrov1.jpg" STYLE="vertical-align:text-top" WIDTH="40" HEIGHT="50"> Выравнивание по верхнему краю.<img SRC="adrov1.jpg" WIDTH="25" HEIGHT="30"></td></tr>

<tr>

<td VALIGN="top" WIDTH="30%"><img SRC="adrov1.jpg" STYLE="vertical-align:text-bottom" WIDTH="40" HEIGHT="50"> Выравнивание по нижнему краю.<img SRC="adrov1.jpg" WIDTH="25" HEIGHT="30"></td></tr>

<tr>

<td VALIGN="top" WIDTH="30%"><img SRC="adrov1.jpg" STYLE="vertical-align:baseline" WIDTH="40" HEIGHT="50"> Выравнивание по базовой строке.<img SRC="adrov1.jpg" WIDTH="25" HEIGHT="30">

</td></tr>

<tr>

<td VALIGN="top" WIDTH="30%"><img SRC="adrov1.jpg" STYLE="vertical-align:middle" WIDTH="40" HEIGHT="50"> Выравнивание по середине.<img SRC="adrov1.jpg" WIDTH="25" HEIGHT="30"></td></tr>

</table>

</html>

При выравнивании относительно наиболее высокого и наиболее низкого элементов строки согласно указанному выше синтаксису подставляются значения из таблицы 5:

Отдельным образом записываются подстрочные и надстрочные индексы. Их значения - в таблице 6. Пример:

<html>

<head><title>Рисунок 6.9</title></head>

<table WIDTH="100%" border="1">

<tr>

<td VALIGN="top" WIDTH="30%">E=MC

<FONT STYLE="vertical-align:super">2.</FONT><br>

Надстрочный индекс. </td></tr>

<tr>

<td VALIGN="top" WIDTH="30%">

H<FONT STYLE="vertical-align:sub">2</FONT>O<br>

Подстрочный индекс.

</td></tr>

</table>

</html>

Результат исполнения кода - на рисунке 9.

Обтекание

Разработчики CSS, конечно, не могли обойти такой важной возможности форматирования Web-страниц, как обтекание изображений строками текстов. Для регулирования взаимного расположения изображений и текста в документе предлагаются два метода. Первый - floating, т.е. собственно обтекание. В синтаксис:

{float: значение}

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

<html>

<head><title>Рисунок 6.10</title></head>

<table WIDTH="100%">

<tr>

<td VALIGN="top" WIDTH="30%"><img SRC="adrov1.jpg" STYLE="float:left" WIDTH="40" HEIGHT="50"> Это я, автор.<br> Фото слева от текста.<br> Не кидайте в меня помидорами!</td></tr>

<tr>

<td VALIGN="top" WIDTH="30%"><img SRC="adrov1.jpg" STYLE="float:right" WIDTH="40" HEIGHT="50">Это я, автор.<br> Фото справа от текста.<br> Не кидайте в меня помидорами!</td></tr>

</table>

</html>

Результат - на рисунке 10.

Другим, регулирующим взаимное расположение текста и изображений методом является
очистка. Ее синтаксис:

{clear: значение}

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

<html>

<head>

<title>Рисунок 6.11</title>

</head>

<table WIDTH="100%">

<tr>

<td VALIGN="top" WIDTH="30%"><img SRC="adrov1.jpg" style="float:left" WIDTH="40" HEIGHT="50"> Это я, автор.<br style="clear:left">Не кидайте в меня помидорами!</td></tr>

<tr>

<td VALIGN="top" WIDTH="30%"><img SRC="adrov1.jpg" STYLE="float:right" WIDTH="40" HEIGHT="50">Это я, автор.<br style="clear:right">Не кидайте в меня помидорами!</td></tr>

</table>

</html>

Результат исполнения - на рисунке 11.

В этой статье мы продолжим разбор основных способов форматирования текстов на Web-страницах. Говоря о форматировании текстов, нельзя не упомянуть о таком распространенном методе, как составление списков. Методика составления списков приведена и в спецификациях языка HTML, в частности и в последней, четвертой. Тем не менее создатели страниц сегодня не слишком часто обращаются к представлению списков способами, предлагаемыми HTML, предпочитая конструировать списки с помощью таблиц. В CSS (в том числе и в спецификации CSS2) сделана попытка включить в простую и доступную методику, предлагаемую HTML, функции оформления и позиционирования страниц, реализация которых ранее без применения таблиц была невозможна. Рассмотрим эти методы подробнее.

Внешнее оформление списков

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

Назначение стандартных типов маркеров происходит в соответствии с синтаксисом

{list-style-type: значение}

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

Пример:

<html>

<head>

<title>Рисунок 7.1</title>

</head>

<body>

<ul>

<li style="list-style-type: disk"> Маркер - диск</li>

<li> Маркер - диск</li>

<li style="list-style-type: circle"> Маркер - кольцо</li>

<li> Маркер - кольцо</li>

<li style="list-style-type: square"> Маркер - квадрат</li>

<li> Маркер - квадрат</li>

<li style="list-style-type: none"> Нет маркера</li>

<li> Нет маркера</li>

</ul>

</body>

</html>


Как видно из примера неупорядоченного списка, в котором используются эти маркеры, назначение маркера наследуется. Другими словами, достаточно указать маркер для одного (например, для первого) пункта списка, и все последующие пункты будут так же отмечены этим маркером, пока не последует новое назначение. Результат, соответствующий примеру, показан на 
(рисунке 1).

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

Применяя эти значения на практике, получим следующий HTML-код:

<html>

<head>

<title>Рисунок 2</title>

<style type=text/css>

ol .lower-roman {list-style-type: lower-roman}

ol .upper-roman {list-style-type: upper-roman}

ol .lower-alpha {list-style-type: lower-alpha}

ol .upper-alpha {list-style-type: upper-alpha}

</style>

</head>

<body>

<ol class=decimal>

<li>Арабские цифры</li>

<li>Арабские цифры</li>

</ol>

<ol class=lower-roman>

<li>Малые римские цифры</li>

<li>Малые римские цифры</li>

</ol>

<ol class=upper-roman>

<li>Большие римские цифры</li>

<li>Большие римские цифры</li>

</ol>

<ol class=lower-alpha>

<li>Строчные латинские буквы</li>

<li>Строчные латинские буквы</li>

</ol>

<ol class=upper-alpha>

<li>Прописные латинские буквы</li>

<li>Прописные латинские буквы</li>

</ol>

</body>

</html>

 (рисунок 2). 


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

{list-style-image: url(имя_файла)}

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

<html>

<head>

<title>Рисунок 3</title>

<ul style="list-style-image: url(bullit.gif)">

</style>

</head>

<body>

<ul>

<li>Первый</li>

<li>Второй</li>

</ul>

</body>

</html>

Результат исполнения кода показан на (рисунке 3).

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

<ulstyle="list-style-image: url(http://worker.inion.ru/bullit.gif)">

Позиционирование пунктов списка

С помощью свойства list-style-position определяется положение содержимого пунктов списка в пространстве, отведенном для всего списка. Для определения позиции в синтаксическую форму

{list-style-position: значение}

подставляется на выбор одно из значений - inside или outside. При использовании первого значения, как это сделано в примере
 

<html>

<head>

<title>Рисунок 4</title>

<ul style="list-style-position:inside">

</style>

</head>

<body>

<ul>

<li>Основы CSS<br>ComputerWeekly #1, 1998.</li>

<li>Работа со шрифтами<br>ComputerWeekly #2, 1998.</li>

<li>Оформление текстов<br>ComputerWeekly #3, 1998.</li>

</ul>

</body>

</html>

маркеры располагаются в пространстве, отведенном для списка (рисунок 4).

Применение значения outside в этом же примере приведет к результату, представленному на 
(рисунке 5).

Как видно из этого рисунка, маркеры, помечающие список, находятся вне пространства, отведенного под сам список. Заметим так же, что данные конструкции позволяют в некоторой степени компенсировать отсутствие в CSS конструкции списка с определением, или, как еще говорят, словарного списка, описываемого тегами DL, DT и DD языка HTML.

Группировка стилей списков

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

{list-style:значение1 значение2 значениеN},

сразу нескольких значений, определяющих тот или иной стиль, как это сделано в следующем примере:
 

<html>

<title>Рисунок 6</title>

<ul style="list-style: inside url(bullit.gif)">

<li>Основы CSS<br>ComputerWeekly #1, 1998.</li>

<li>Работа со шрифтами<br>ComputerWeekly #2, 1998.</li>

<li>Оформление текстов<br>ComputerWeekly #3, 1998.</li>

</ul>

</html>

Результат исполнения кода показан (рисунке 6).

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

ul {list-style: url(http://worker.inion.ru/bullit.gif) disk}

Вложенные списки

Назначение стилей вложенным спискам - задача не сложная, однако, решая ее, легко ошибиться и не получить желаемое. Укажем на некоторые трудности, которые могут подстерегать авторов Web-страниц. Прежде всего следует обращать внимание на принципы наследования свойств между списками разного уровня, а также на порядок каскадирования, особенно при использовании контекстных селекторов. Так, используя код
 

<style type="text/css">

   ol.alpha li {list-style: upper-alpha}

   ul li {list-style: disc}

</style>

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

<html>

<head>

<title>Рисунок 7</title>

</head>

<style type="text/css">

ol.alpha li {list-style: upper-alpha}

ul li {list-style: disc}

</style>

<body>

<ol class=alpha>

<li>Основной список

<ul>

<li>Встроенный список

</ul>

</ol>

</body>

</html>


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

тег1~тег2 {свойство: значение}

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

<style type="text/css">

ol.alpha ~ li {list-style: upper-alpha}

ul li {list-style: disc}

</style>

Третий путь заключается в отказе от контекстных селекторов и применении свойства list-style только к конкретным спискам. Этот способ является оптимальным, и его рекомендуют авторы спецификации CSS2. Результат исполнения кода именно с таким указанием стилей представлен на (рисунке 7).

Цвета и краски

Разбирая примеры придания стилевых решений шрифтам и текстам (см. CW. 1998. № 1 - 4), мы так или иначе касались вопросов назначения цветового решения для некоторых элементов Web-страниц. В данной статье мы повторим и дополним некоторые ранее изложенные моменты, а также рассмотрим вопросы, связанные с применением изображений для оформления Web-страниц. Пользователю, прочитавшему предыдущие статьи, при достаточно понятном синтаксисе назначение цвета определенным элементам Web-страницы или включение в страницу изображения покажется знакомым, и тем не менее все рассматриваемые вопросы по-прежнему будут проиллюстрированы примерами.

Цвет текста

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

{color: значение}

В качестве значений могут использоваться общепринятые английские названия цветов или указания цвета в формате RGB. Для создателей Web-страниц (а главное, для разработчиков браузеров) WWW-консорциум принял в качестве дополнения к спецификации CSS1 список стандартных наименований цветов. По форме он представляет собой таблицу согласования между принятым названием цвета и его обозначением в формате RGB в трех вариантах: линейном, для компьютеров типа РС и для компьютеров типа Macintosh. В списке учтено более сотни цветов, так что, даже оставаясь в жестких рамках спецификации, можно подобрать необходимый, даже самый экзотический цвет, что и сделано в приведенном ниже примере. Обратите внимание на то, что назначение цвета указанием его названия выглядит, например, как

{color: coral}

Назначение же цвета в формате RGB может быть представлено в нескольких видах, как-то:

в шестнадцатеричном виде:

{color: #ff0000};

в шестнадцатеричном виде с трехзначной записью (без "лишних" нулей):

{color: #ff0};

в функциональном виде с указанием значения насыщенности в диапазоне 0 - 255:

{color: rgb(64,224,208)};

в функциональном виде с процентным указанием насыщенности цвета:

{color: rgb(100%, 0%, 0%)}.

Пример:

<html>

<head>

<title>Рисунок 1

</title>

</head>

<div style="color: coral"> Цвет CORAL (255,127,80) </div>

<div style="color: rgb(64,224,208)"> Цвет TURQUOISE (64,224,208) </div>

</html>

Результат исполнения кода представлен на (рисунке 1).

Цвет фона

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

{background: значение},

а задаваться оно может теми же методами, что и цвет текста, как это сделано в примере ниже.

<html>

<head><title>Рисунок 2</title>

<style type="text/css">

body {background:rgb(64,224,208)}

div {font-size: 30; color:white; background: blue}

</style>

</head>

<body>

<div>Белым по синему.</div>

</body></html>

Результат исполнения кода приведен на (рисунке 2).

Фоновые изображения

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

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

{background: url(имя_файла)}

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

<html>

<head>

<title>Рисунок 3</title>

<head>

<style type="text/css">

body {background:url(coco.gif)}

div {color:blue;}

</style>

</head>

<div>

Плюшевый крокодил

</div>

</html>

Результат исполнения кода - (рисунке 3).

Повторение фонового изображения

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

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

body {background:url(coco.gif) repeat-x}

Результат исполнения кода - (рисунке 4).

Фиксация фонового изображения

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

body {background:url(coco.gif) fixed}

По умолчанию применяется команда scroll, в соответствии с которой фоновое изображение прокручивается вместе с текстом.Позиционирование

фонового изображения

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

{background: url(имя_файла) no-repeat X Y}

X и Y здесь соответствуют указанию метода позиционирования или численному значению позиции соответственно по горизонтали и по вертикали. Методы позиционирования по горизонтали приведены в табл. 2,

а по вертикали - в табл. 3.

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

{background: url(coco.gif) no-repeat 2cm 3cm},

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

{background: url(coco.gif) no-repeat 0% 0%},

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

{background: url(coco.gif) no-repeat 100% 100%},

то это означает, что правый нижний угол изображения расположен в правом нижнем углу оформляемой страницы. Точно так же определяются и промежуточные положения: если позиция изображения на странице задана парой 20 и 80%, как в примере

<html>

<head>

<title>Рисунок 5</title>

<head>

<table width=200 height=200 border=1

style="background:url(coco.gif) no-repeat 20% 80%">

<tr>

<td>Плюшевый крокодил.

</table>

</html>

то позиционируется точка, соответствующая 20% ширины изображения и 80% его высоты, считая от его левого верхнего края. Результат - (рисунке 5).

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

{background: url(coco.gif) no-repeat 40% 3cm}

Группировка значений, задающих фон

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

<html>

<head>

<title>Рисунок 6

</title>

<head>

<table width=300

height=150

border=1

style="background:url(coco.gif) blue repeat-x -10px center ">

<tr>

<td>Плюшевый крокодил.

</table>

</html>

Результат - (рисунке 6).

Методика форматирования Web-страниц и размещения на них содержимого в отведенном для этого пространстве описывается в CSS в виде пространственной модели (Box Formatted Model). Согласно этой модели, пространство, в терминологии создателей CSS - бокс (box), в котором размещено содержимое или часть содержимого Web-страницы (тексты, изображения), можно представить в виде объекта, обладающего набором специфических характеристик. Необходимо подчеркнуть, что боксом считается не страница или ячейка таблицы, а лишь пространство, отведенное для содержимого или определенной его части. Формально каждый бокс имеет ядро, представляющее собой содержательную часть страницы или ячейки таблицы, и набор окружающих ядро элементов, характеристики которых определяют внешний вид бокса. Под последними понимаются поля отступа, бордюры и т. д.

Чтобы более полно представлять себе параметры боксов, связь между ними, а также смысл употребляемых терминов, обратимся к (рисунку 1).

Несложно заметить, что, например, ширина бокса состоит из суммы ширин собственно содержимого, отступов (Padding), бордюра (Border) и величины полей (Margin). Параметры, определяющие размеры каждого из этих элементов, задаются отдельно в зависимости от желания авторов Web-страниц. Из тех же слагаемых складывается и высота бокса. Высота же собственно содержимого - это просто расстояние между его верхней и нижней границами. Так, если содержимое - текст, то это будет расстояние между самой высокой точкой в верхней строке и самой низкой в нижней. Поскольку содержимое размещается внутри бокса, то верхнюю границу содержимого мы назовем верхней внутренней границей бокса (Inner Top), а нижнюю - нижней внутренней границей (Bottom Top). Таким же образом вычисляется и длина содержимого. Принимая во внимание сказанное выше, увидим, что внешний край бокса охватывает все элементы, составляющие бокс, а внутренним краем бокса охвачено только содержимое.

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

Стиль бордюра

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

{border-style: значение}

Результаты применения того или иного из возможных вариантов значений приведены в табл. 1 и проиллюстрированы на рисункe 2.

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

<html>

<head>

<title>рисунок 2</title>

</head>

<body>

<table width="50%" border="1">

<tr>

<td valign="top" width="30%">

<p style="border-style:solid double;border-width:10pt; border-color:blue">Стиль solid для горизонтальных частей.<br>

Стиль double для вертикальных частей</p>

</td></tr>

</table>

</body>

</html>

В данном случае для горизонтальных частей бордюра задан стиль solid, для вертикальных - double. В строке 

<p style="border-style: solid double;border-width:10pt; border-color:blue">...</p>

они идут по порядку: сначала solid для горизонтальных полос, затем double - для вертикальных.

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

 {border-top-style: значение} - для верхней части бордюра;

 {border-bottom-style: значение} - для нижней части бордюра;

 {border-right-style: значение} - для правой части бордюра;

 {border-left-style: значение} - для левой части бордюра.

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

<p style="border-top-style: ridge; border-width:12pt; border-color:yellow" >Стиль ridge для <br> верхней части бокса.</p>

Результат исполнения кода - на рисунке 4.

Ширина бордюра

Задание ширины бордюра нам уже встречалось в примерах выше. Делается это в соответствии с синтаксисом

{border-widht: значение}

Указать ширину бордюра можно как в общеупотребительных единицах измерения - пикселах (px), дюймах (in) или сантиметрах (cm), так и в типографских - пунктах (pt) и приведенных эквивалентах (размер буквы "m" употребляемого шрифта, em). Кроме того, для задания ширины бордюра используются три фиксированных значения:

 thin

 medium

 thick

Ниже приведен код, где употребляются все три значения:

<table width="50%" border="1">

<tr><td valign="top" width="30%">

<p style="border-style: solid; border-width:thin; border-color:red" >Стиль бокса solid<br> ширина - thin.</p>

</td></tr>

<tr><td valign="top" width="30%">

<p style="border-style: solid; border-width:medium; border-color:red" >Стиль бокса solid<br>

ширина - medium.</p>

</td></tr>

<tr><td valign="top" width="30%">

<p style="border-style: solid; border-width:thick; border-color:red" >Стиль бокса solid<br>

ширина - thick.</p>

</td></tr>

</table>

Результат исполнения этого кода - на рисунке 5.

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

 {border-top-width: значение} - для верхней части бордюра;

 {border-bottom-width: значение} - для нижней части бордюра;

 {border-right-width: значение} - для правой части бордюра;

 {border-left-width: значение} - для левой части бордюра.

Используя синтаксис

{border-widht: значение}

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

<p style="border-width: thin thick">Ширина - thin<br></p>

указаны два значения. Браузер, поддерживающий спецификации CSS, интерпретирует эти указания следующим образом:

Цвет бордюра

Основываясь на тех же принципах, что и выше, назначаем цвет бордюра. Указывается он в соответствии с синтаксисом

{border-color: значение},

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

<p style="border-style: solid;

border-width:thick;

border-color:green">

Бордюр зеленого цвета<br>

для всего бокса.</p>

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

 {border-top-color: значение} - для верхней части бордюра;

 {border-bottom-color: значение} - для нижней части бордюра;

 {border-right-color: значение} - для правой части бордюра;

 {border-left-color: значение} - для левой части бордюра.

Задание цвета, как мы видим, не сложнее указания прочих свойств бордюра, хотя и не лишено определенных тонкостей. Последние связаны с особенностями воспроизведения цвета на компьютерах пользователей. Дело в том, что составные цвета, не входящие в число шестнадцати базовых, часто не могут быть корректно воспроизведены, если применяются для создания трехмерных бордюров. Ниже приведен пример того, как выглядит один и тот же цвет - coral (255,127,80), будучи использован для создания трехмерного и обычного бордюров. Вот код примера:

<html>

<head>

<title>рисунок 6</title>

</head>

<body>

<table width="50%" border="1">

<tr>

<td valign="top" width="30%">

<p style="border-style: ridge;

border-width:12pt;

border-color:coral">Бордюр ridge<br>

для всего бокса.</p>

</td></tr>

<tr>

<td valign="top" width="30%">

<p style="border-style: solid;

border-width:12pt;

border-color:coral">Бордюр solid<br>

для всего бокса.</p>

</td></tr>

</table>

</body>

</html>

Результат исполнения кода - на рисунке 6.

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

Сокращенная запись

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

<p style="border: solid thick green">Зеленый бордюр<br>

для всего бокса.</p>

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

Отступ

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

Методы указания отступа практически не отличаются от методов задания любого другого параметра бокса. Синтаксис назначения отступа:

{padding: значение}

Значение может быть указано как в традиционных единицах измерения, так и в процентах.

Пример:

<html>

<head>

<title>рисунок 7</title>

</head>

<body>

<table width="50%" border="1">

<tr>

<td valign="top" width="30%">

<p style="border: solid thick green;

padding-left:25%">Зеленый бордюр<br>

для всего бокса.<br>Отступ задан<br>в процентах</p>

</td></tr>

</table>

</body>

</html>

Результат исполнения кода - на рисунке 7.

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

 {padding-top: значение} - отступ сверху;

 {padding -bottom: значение} - отступ снизу;

 {padding -right: значение} - отступ справа;

 {padding -left: значение} - отступ слева.

Аналогично рассматривавшимся выше способам указания ширины бордюра предусмотрена сокращенная запись величины отступа, когда свойству padding придаются одно, два, три или четыре значения. Смысл этой методики раскрыт в табл. 3.

В примере мы укажем два значения:

<html>

<head>

<title>рисунок 8</title>

</head>

<body>

<table width="50%" border="1">

<tr>

<td valign="top" width="30%">

<p style="border: solid thick green;

padding:10pt 40pt">Зеленый бордюр<br>

для всего бокса.<br>Отступ сверху<br>и снизу</p>

</td></tr>

</table>

</body>

</html>

Результат исполнения кода - на рисунке 8.

Поля

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

{margin: значение}

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

 {margin-top: значение} - поле сверху;

 {margin -bottom: значение} - поле снизу;

 {margin -right: значение} - поле справа;

 {margin -left: значение} - поле слева.

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

<html>

<head>

<title>рисунок 9</title>

</head>

<body>

<table width="50%" border="1">

<tr>

<td valign="top" width="30%">

<div style="border: solid thick green;

margin-left: 50pt">Зеленый бордюр<br>

для всего бокса.<br>Поля слева</div>

</td></tr>

</table>

</body>

</html>

Результат исполнения кода - на рисунке 9.

Пространство, выделенное под содержимое

Кроме регулирования параметров окружения содержимого, имеется возможность в явном виде отводить площадь для того или иного содержимого. Для этого указываются размеры прямоугольника, в который должно "вписаться" содержимое:

{width: значение}

{heigth: значение}

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

<html>

<head>

<title>рисунок 10.</title>

</head>

<body>

<table width="50%" border="1">

<tr>

<td valign="top" width="30%">

<div style="border: solid thick green;

width: 50%; height: 70px">Зеленый бордюр<br>

для всего бокса.</div>

</td></tr>

</table>

</body>

</html>

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

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

Построения, определяющие расположение боксов на странице, описываются в CSS с помощью модели визуального представления (Visual Rendering Model). Как мы уже видели, низшим, конечным, элементом выступает не тег или группа тегов, а, допустим, текст, формат которого задан с помощью этих тегов. Однако согласно иерархии тегов в HTML-документе выстраивается и иерархия, или, как еще говорят, поток боксов. В одном документе могут быть боксы как принадлежащие к потоку, так и находящиеся вне его. Боксы, сгруппированные в поток, имеют предыдущий (если это не первый бокс) и последующие боксы (если рассматривается не последний бокс). Геометрические размеры каждого бокса, отношения бокса с предыдущими, родительскими, боксами и последующими определяют, как будет выглядеть страница в целом. Важно также заметить, что боксы в потоке расположены один над другим, напоминая слоеный пирог. Старшие, родительские, слои находятся ниже младших, порожденных, слоев.

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

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

Каждый из этих вариантов указывается в виде значения свойства position в синтаксисе позиционирования:

{position: значение}

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

{position: absolute},

а в случае применения относительного позиционирования:

{position: relative}.

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

{top:значение}

для отступа сверху и

{left: значение}

для отступа слева.

Используя обе составляющие указания позиции - вариант позиционирования и задание координат, получаем следующий код:

<html>

<head>

<title>Рисунок 1</title>

</head>

<body>

<img src="adrov1.jpg" style="position:absolute; left:0; top:0" width="40" hight="50">

</body>

</html>

На 
рисунке 1, где изображен HTML-документ, полученный при исполнении этого кода, видно, что картинка прижата к верхнему левому углу, что соответствует нулевым отступам слева и сверху. Теперь в этом же примере употребим относительное позиционирование, применив код

<body>

<img SRC="adrov1.jpg" STYLE="position:relative; left:0; top:0" WIDTH="40" HEIGHT="50">

</body>

В этом случае, как видно на 
рисунке 2, картинка отстоит на некотором расстоянии от левого и верхнего краев страницы. Это вызвано тем, что картинка позиционирована относительно положения предыдущего бокса в потоке - бокса, содержимым которого является часть страницы, описанная тегом body.

Применяя оба варианта позиционирования, можно получить самые неожиданные результаты. На странице (рисунок 3) приведено несколько примеров.

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

<div style="position:relative; left:0; top:0; height:120; width:100;border:solid green">Пример.<br>

<img src="adrov1.jpg" style="position:absolute; left:0; top:0" width="40" height="50">

Абсолютное позиционирование <br>

</div>

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

<img src="adrov1.jpg" style="position:relative; left:0; top:0" width="40" height="50">.

В остальных случаях изображение сдвинуто на 20 пикселов вправо и вниз. Остается только добавить, что величину отступов можно указывать как в общеупотребительных единицах измерения - пикселах (px), дюймах (in) или сантиметрах (cm), так и в типографских - пунктах (pt) и приведенных эквивалентах (размер буквы "m" употребляемого шрифта, em), а также в процентах.

Клиппинг

Клиппингом (clipping) называется отображение не всего содержимого бокса, а только какой-либо его части. Такое может случиться и автоматически, если размеры бокса превысят размеры блока. Вручную клиппинг задается в соответствии с синтаксисом

{clip: rect (координаты)}

Под координатами подразумеваются величины отступов сверху (top), справа (right), снизу (bottom) и слева (left), заданные относительно левого верхнего угла бокса. Подставляя необходимые значения, получаем конструкцию

{clip:rect (20 120 135 20)}

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

<html>

<head>

<title>Рисунок 4</title>

</head>

<body>

<div style="position:relative; left:0; top:0; height:165; width:150; border:groove yellow">

<img src="adrov1.jpg" style="position:absolute; clip:rect (20 120 135 20)">
</div>

</body>

</html>

Результат исполнения кода - на рисунке 4.

Переполнение

Обычно поверхности бокса бывает достаточно для того, чтобы поместить в него все его содержимое, однако в некоторых случаях содержимое бокса не может быть отображено полностью. Такая ситуация называется переполнением (overflow). Разработчики спецификации CSS2 называют следующие факторы, способствующие появлению переполнения:

- ширина бокса превышает ширину блока;

- длина бокса превышает длину блока;

- к боксу применено абсолютное позиционирование;

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

Иногда при разработке Web-страницы переполнение может быть задано умышленно. Делается это согласно синтаксису

{overflow: значение}

Необходимое значение подбирается по таблице 1.

Два последних варианта весьма эффектны. В качестве примера приведем код, где употребляется вариант scroll. Результат исполнения этого кода приведен на рисунке 5.

<html>

<head>

<title>Рисунок 5</title>

</head>

<body>

<div style="position:relative; left:0; top:0; height:140; width:140; border: solid blue; overflow:scroll">

Обычно поверхности бокса бывает достаточно для того... (overflow). "/div"

</body>

</html>

Видимость

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

{visibility: значение}

Значений для данного свойства предполагается два: visible делает бокс видимым и hidden - невидимым. Проиллюстрируем действие этого свойства на следующем примере (рисунок 6).

Содержимое правой ячейки таблицы описано следующим кодом:

<h5>visibility:visible</h5">

<DIV STYLE="position:relative; left:0; top:0; height:100; width:100; border: solid green; visibility:visible">

Один, два, три, четыре, пять, шесть, семь...

</DIV>

Видно

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

Отображение

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

{display: значение}

Варианты значений подбираются из табл. 2, где приведено несколько основных вариантов значений.

В качестве примера приведем код, согласно которому генерируется бокс блочного уровня:

<h5>display:block</h5>

<div style="position:relative; left:0; top:0; height:100; width:100; border: solid green; display:block">

Один, два, три, четыре, пять, шесть, семь...

</div>

Бокс есть

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

Назначив свойству display значение none, не получим никакого бокса, что и видно на том же рисунке, но уже в правой его части.

Z-индекс

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

Указанный в соответствии с синтаксисом

{z-index: значение}

Z-индекс может принимать два значения. При значении auto боксы выстраиваются согласно положению генерирующих их элементов, при значении integer положение бокса определяется согласно назначенному ему целочисленному индексу. Боксы с назначенным им Z-индексом "складываются" снизу вверх в порядке следования индексов: чем меньше индекс, тем ниже расположен бокс. Самый нижний имеет по умолчанию номер 0, но допустимо задание и отрицательного номера. Такой бокс займет место ниже нулевого.

В примере разобран именно такой случай. На рисунке 8 приведена таблица, содержимое ячеек которой спозиционировано явным указанием Z-индекса.

В левой ячейке послойное позиционирование осуществляется автоматически (Z-индекс - auto), поэтому картинка, имеющая больший Z-индекс, закрыла нам часть текста. В коде же, описывающем содержимое левой ячейки таблицы, мы "подсунули" картинку ниже текста, назначив ей Z-индекс, равный -1. Эту часть кода и приведем в качестве примера:

<div style="position:relative; left:0; top:0;
height:100; width:100; border: solid green">Пример позиционирования.<br>

Бокс позиционируется явным указанием Z-индекса.<br><img src="coco.gif" style="position:absolute; left:0; top:0; z-index:-1"> </div>


 

А также другие работы, которые могут Вас заинтересовать

23625. Бытовая философия языка и языковые контрасты 247 KB
  Кашкин Воронеж Бытовая философия языка и языковые контрасты 1. В Древнем Египте считалось что у соседних народов язык во рту вырос в другом направлении поэтому они и говорят на других неправильных и непонятных языках. Многие наши современники также считают что есть правильные и неправильные красивые и некрасивые трудные и легкие языки что из собственный язык – самый красивый правильный и ясный что в их языке каждое слово имеет одно определенное значение в то время как в иностранных языках значений много что в каждом языке...
23626. Типовые топологии сетей 219.5 KB
  При создании сети в первую очередь следует выбрать топологию физических связей. Под топологией сети понимается конфигурация графа, вершинам которого аппаратура сети, а ребрам — физические связи между ними. Оборудование - узлы сети.
23628. Как я изучаю языки 706.5 KB
  Работая с этими языками я перевожу с одного на другой в любом сочетании и в перевод включаюсь мгновенно. Прежде чем приступить к работе связанной с применением итальянского испанского японского китайского или польского языка я чтобы освежить знания обычно трачу полдня просматривая свои записи. С остальными шестью языками я работаю только как переводчик художественной и специальной литературы то есть имею здесь лишь пассивную практику.
23629. СКОЛЬКО НА ПЛАНЕТЕ ЯЗЫКОВ 808 KB
  Сканировал и проверил Илья Франк СКОЛЬКО НА ПЛАНЕТЕ ЯЗЫКОВ На скольких языках говорят люди населяющие планету Ответить на этот вопрос казалось бы не так уж трудно. Но почему тогда разные ученые называют различное число языков планеты: одни говорят о 20 тысячах другие о 10 тысячах третьи о 5 тысячах а некоторые лингвисты полагают что население нашей планеты изъясняется всегонавсего на 2 тысячах языках. Но можно ли провести границу при исчислении количества языков между языком и его диалектом Мы знаем что на Юге России говорят не...
23630. ЯЗЫКОВОЕ РОДСТВО СЛАВЯНСКИХ НАРОДОВ 346 KB
  литовский белорус. белорусский нем. старославянский древнепрус. древнепрусский укр.
23631. Философия языка А.Ф.Лосева: типологический лик, генетические истоки, основные идеи и подходы 58 KB
  если слово не действенно и имя не реально. И вот рассмотреть его как имя я и дерзаю. имя. Имя откровение личности.
23632. Теория языка вчера и сегодня 2.61 MB
  Теория языка вчера и сегодня Глава I. Модель языка как органона а формы существования конкретных языковых явлений 3. Знаковая природа языка в модель структуры языка 4. Система sf языкового типа d понятие языка и его признаки Глава II.
23633. Закон «Об обеспечении единства измерений». Государственная система обеспечения единства измерений в стране 19.86 KB
  Государственная система обеспечения единства измерений (ГСИ) - государственное управление субъектами, нормами, средствами и видами деятельности по обеспечению заданного уровня единства измерений в стране...