к не самым сложным, но все же издательским системам. В настоящей статье будут рассмотрены основные действия, необходимые для придания текстам определенных свойств. Зачастую трудно отделить свойства текстов от свойств, приданных шрифтам, поэтому свойства эти часто пересекаются и, дополняя друг друга, придают текстам определенный стиль. В целом же очевидно стремление авторов спецификаций CSS руководствоваться чисто полиграфическими, типографскими требованиями. Отсюда, кстати, и обращение к типографским единицам измерения, как абсолютным (пункты, пики), так и относительным (принимаемые за эталон, высоты шрифтов и отдельных букв в шрифтах).
Красная строка
Со школьных времен каждый знает, что любой новый текст начинается с красной строки. Красную строку можно установить и в тексте, расположенном на Web-странице. Делается это согласно синтаксису
{text: величина _отступа}
Величина отступа может указываться в пикселах (px), дюймах (in), сантиметрах (cm), а так же в типографских пунктах (pt), как это и сделано в примере.
<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: значение}
Пример применения этих свойств можно увидеть из 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>
Трансформация текста
Под трансформацией текста в данном случае понимается возможность отображения текста прописными и строчными буквами в разных вариациях. Подставляя согласно синтаксису
{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>
Расстояние между буквами
буквами таков:
{letter-spacing: значение}
буквами можно, придав свойству 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>
Указание расстояния между словами в тексте подчиняется тем же правилам, что и указание расстояния между буквами, однако синтаксис в этом случае будет выглядеть иначе:
{word-spacing: значение}
Высота строки
применяемого шрифта находиться не могут. Синтаксис:
{line-height: значение}
значения в пикселах, сантиметрах, дюймах или пунктах. HTML-код с таким методом задания выглядит, как
<html>
<head>
<title>Рисунок 6.5</title>
</head>
<div style="line-height:34pt">
Высота строки<br>
задана в пунктах.<br>
</div>
</html>
При задании значения в виде number за высоту строки принимается размер назначенного данному элементу шрифта, повторенный определенное число раз.
<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:значение}.
Ниже приведен пример HTML-кода, в котором задействованы все перечисленные выше элементы. Этот же код может служить и примером для изучения других видов выравнивания.
<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>
Обтекание
Разработчики 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>
Другим, регулирующим взаимное расположение текста и изображений методом является очистка. Ее синтаксис:
{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>
В данной статье учтены далеко не все возможности для форматирования текста, предоставляемые CSS. Продолжение рассказа - в следующей статье.
| |||||||||||||||||||