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

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

Методика оформления текстов, предлагаемая спецификациями 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-код с таким методом задания выглядит, как

<html>

<head>

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

</head>

<div style="line-height:34pt">

Высота строки<br>

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

</div>

</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-страницы, как по горизонтали, так и по вертикали. Рассмотрим горизонтальное выравнивание. Предлагается четыре вида выравнивания - по левому краю страницы или ячейки таблицы, по правому краю, по центру и распределение текста по всей ширине страницы или ячейке таблицы. Тот или иной вид выравнивания достигается подстановкой, согласно синтаксису

{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.

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

Продолжение следует

Д.Адров

СomputerWeekly, N3, 1998, c.40,41,46