<< Пред. стр.

стр. 27
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

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

padding: 20рх;
padding: 10 12 18 8рх;



Управление междустрочными интервалами
Используйте атрибут l i n e - h e i g h t для управления величиной зазора между строка-
ми текста. Этот прием удобен для улучшения удобочитаемости длинных фрагментов
текста, как, например, на рисунке 49.3.
ГЛАВА 49. Управление интервалами 257

Для атрибута l i n e - h e i g h t указывается значение и единицы измерения, как в следу-
ющем примере:
Р{
font-size: 18px;
line-height: 27px;


gdt View
File Favorites Tools Help



This is a long paragraph. This is a long
Tliis is я long paragraph. This is a long
paragraph This is a long paragraph This
paragraph. Tlii« is a long paragraph. This is a long paragraph This is a long
paragraph This is a long paragraph. This is
is a long paragraph. This is a long
a long p«ragraph. This is a long
paragraph.This is a long paragraph. This
paragraph This is a long paragraph This is
a long paragraph. This is a long
is a long paragraph. This is a long
paragraph This is a long paragraph. This
paragraph. Tliis is a long paragraph.This
is a long paragraph. This is a long
is a long paragraph. Tliis is a long paragraph This is a long paragraph This
is a long paragraph This is a long
paragraph. This is a long paragraph. Tliis
paragraph.This is a long paragraph Ibis is
is a long paragraph. Tliis is a long a long paragraph. This is a long
paragraph This is a long paragraph This is
paragraph. Tliis is a long paragraph. This
a long paragraph. This is a long
is a long paragraph. Tins is a long paragraph This is a long paragraph This
is a long paragraph This is a long
paragraph. This is a long paragraph. Tliis
paragraph This is a long paragraph This
is a long paragraph. Tliis is a long
is a long paragraph This is a long
paragraph. This is a long paragraph.This paragraph This is a long paragraph. This is



Рис. 49.3. С увеличением междустрочного интервала улучшается
удобочитаемость текста. Какой из абзацев вам было бы удобнее читать ?



Управление зазорами меЖду сдобами
Еще одним способом улучшения удобочитаемости, является увеличение зазоров меж-
ду словами, как на рисунке 49.4.

Часто задаваемые вопросы
Является ли атрибут line-height в каскадных таблицах сти-
лей тем же самым, что и интерлиньяж?
Да. В издательском деле под интерлиньяжем (leading) понимается
величина интервала между строками текста. В старые времена, ког-
да работнику типографии требовалось добавить зазор между стро-
ками текста, он вставлял тонкие свинцовые полоски (lead plug).
В современной электронной верстке о свинцовых полосках уже дав-
но забыли, но термин остался.

Для определения зазоров между словами используется атрибут w o r d - s p a c i n g . От
других атрибутов, рассматривавшихся до сих пор, этот атрибут отличается тем, что
браузер добавляет указанное вами значение к зазору между словами, используемому
по умолчанию. Таким образом, следующее определение стиля:
word-spacing: Зрх;
не устанавливает зазор между словами равным 3 пикселам, а добавляет в зазор между
словами три дополнительных пиксела. Подобным образом, определение стиля:
258 Строим Web-сайты

word-spacing: -Зрх;
удаляет три пиксела из зазора, что приводит к сжатию строк текста. Чтобы устано-
вить зазор между словами равным значению, используемому в браузере по умолча-
нию, введите следующий код в определение стиля:
word-spacing: normal;


Сбвет
Когда встречаются большие фрагменты экранного текста, следует ру-
ководствоваться практическим правилом, согласно которому необхо-
димо задавать междустрочный интервал в полтора раза большим,
чем размер шрифта. Например, если размер шрифта равен
10 пикселам, задайте междустрочный интервал равным 15 пикселам
Если требуется еще больший междустрочный интервал, попробуйте
два интервала, точно такой же интерлиньяж, какой вы использовали
в своих институтских рефератах. Для установки двух интервалов ум-
ножьте размер шрифта на 2, и полученное значение задайте в каче-
стве междустрочного интервала.



ЕЬ Е* »sw Fjycrtc lock



Thli piugriph h i i «xtrj word spjcing, TSu p*r»gr*ph Thif piugnph dO'«n't hiv* *xtrj wold ipioing. This
hл ixtr* word fpicing. This pjfigijph his extrj word pjrjgrjph doesn't uv* »vfrj word sptoirtfl, Thif pirjgrap
ipiolng. Thtt piugupn h » *xtu «void fpioing. e»«ti^ h*v« «xlrj i*ordfpi«ing. Thii pjrjjrjph doatn't
hju» ixti* word «piolne.




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




Управление зазором меЖду буквами
Наконец, каскадные таблицы стилей позволяют регулировать величину зазора между
буквами в HTML-элементе с помощью атрибута l e t t e r - spac i n g . Пример изменения
зазоров между буквами показан на рисунке 49.5. Как и в случае атрибута w o r d - s p a c -
ing, значение атрибута l e t t e r - s p a c i n g добавляется к зазору между буквами, ис-
пользуемому браузером по умолчанию. Атрибут может принимать и отрицательные
значения, при которых используемый по умолчанию зазор между буквами уменьшает-
ся на задаваемую величину.
ГЛАВА 49. Управление интервалами 259


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


В определении стиля атрибут l e t t e r - s p a c i n g выглядит подобно следующему примеру:
letter-spacing: lpx;
или, чтобы уменьшить зазор между буквами, можно воспользоваться следующим
кодом:
letter-spacing: -lpx; -;л
или для установки зазоров между буквами, используемых браузером по умолчанию,
вставьте следующую строку:
letter-spacing: normal;




THIS HEADING THIS HEADING
LOSES SOME USES STANDARD
LETTER SPACE LETTER SPACING




Puc. 49.5. Применяйте атрибут letter-spacing, чтобы увеличить (илиуменьшить)
в элементе зазор между буквами, используемый браузером по умолчанию



Совет
Увеличенные зазоры между буквами, как правило, улучшают удобо-
читаемость мелкого текста, тогда как для крупного шрифта лучше
подходят уменьшенные зазоры между буквами. Кроме того, гарниту-
ры с широкими буквами лучше смотрятся с увеличенными зазорами,
тогда как для гарнитур с узкими буквами четкость текста выиграет от
уменьшения зазоров между буквами.
ГЛАВА 50.
Управление Выравниванием текста
Выключенные строки текста имеют одинаковую длину. Для создания такого эффекта
в более короткие строки браузером добавляются дополнительные пробелы, как пока-
зано в примере абзаца на рисунке 50.1.



Определение
Выключенные строки текста имеют одинаковую длину.




ТЫ is a paragraph This IS a This is a paragraph ТЫ:; is a
paragraph This is a paragraph This paragraph This is a paragraph This
is a paragraph This is a paragraph is a paragraph This is a paragraph
This is a paragraph This is a This is a paragraph ТЫ:; is a
paragraph This is a paragraph paragraph This is a paragraph




Puc. 50.1. Для абзаца слева установлено выравнивание с выключкой.
При выравнивании с выключкой браузер дополняет короткие строки
с пробелами так, чтобы все строки были одинаковой длины

Чтобы задать в HTML выключенный текст, в теге выравниваемого абзаца для атрибу-
та a l i g n следует указать значение j u s t i f y :
<р align="justify">Этот абзац содержит текст с выключкой.</р>
Однако каскадные таблицы стилей делают этот метод устаревшим. Вместо этого вклю-
чите в свое определение стиля CSS-атрибут t e x t - a l i g n :
<р s t y l e = " t e x t - a l i g n : j u s t i f y ; " > Этот абзац содержит текст с вык-
лючкой. </р>
Совет в копилку опыта. Встроенный в браузер механизм расчетов, используемый для
выравнивания текста, не является очень сложным, в результате блоки текста с вык-
лючкой часто выглядят на Web-страницах напыщенными в худшем смысле этого
ГЛАВА 50. Управление выравниванием текста 261

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


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



Определение
Текст без выключки вправо (ragged right) выравнивается по левому
краю, а правый край остается невыровненным. Текст без выключки
влево (ragged left) выравнивается по правому краю, при этом невы-
ровненным остается левый край. В тексте с выравниванием по
центру (ragged center) строки центрируются, а края строк остаются
невыровненными.


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

•ЙШЕЯ
#1
File Ed* Vie» Favorites Lools Help



This is a paragraph. This is a paragraph
This is a paragraph.
It is. It really is. I
I t a . It really is. 1 It is It really is I
can't stress that can't stress that can't stress that
enough enough
enough




Рис. 50.2. Слева показан абзац без выключки вправо, по центру располагается абзац
текста с выравниванием строк по центру, и справа находится абзац без выключки влево
262 Строим Web-сайты

При задании выравнивания текста без выключки фактически необходимо действо-
вать прямо противоположно логике, а именно, правильное значение для атрибута
a l i g n в HTML или значение атрибута t e x t - a l i g n в каскадных таблицах стилей
должно быть противоположным тому, что следует получить на самом деле. Для текста
без выключки вправо правильным значением будет l e f t (влево), а для текста без вык-
лючки влево правильное значение — r i g h t (вправо):
<р align="left">3TOT абзац выровнен справа.</р>


<р s t y l e = " t e x t - a l i g n : right;">Этот абзац выровнен слева.</р>
Если у вас возникает путаница в связи с таким противоречием между задаваемым ти-
пом выравнивания и присваиваемым значением, попробуйте представить это с точки
зрения стороны, по которой выравнивается текст, возможно именно так размышляли
разработчики HTML и каскадных таблиц стилей. В абзацах без выключки вправо
текст выравнивается по левой стороне, поэтому с этой точки зрения запись t e x t -
a l i g n : l e f t ; выглядит вполне логичной.
Эти рассуждения не касаются выравнивания по центру, для которого атрибуты прини-
мают значение center:
<р align="center">3TOT абзац выровнен по центру.</р>


<р s t y l e = " t e x t - a l i g n : center;">Этот абзац выровнен по центру.</р>
ГЛАВА 51.
Управление отступами
Стандартным решением при создании отступа с помощью средств HTML является ис-
пользование тега <blockguote>, применение которого противоречит требованию
соблюдения стандартов. Строго говоря, назначение тега <blockquote> — это смеще-
ние фрагмента экранного текста подобно цитате в начале школьного сочинения.
Пример такой цитаты показан на рисунке 51.1. Однако желательно найти более прак-
тичный, ориентированный на результат метод, чем тот, который используют Web-ди-
зайнеры, решая свои задачи в условиях дефицита времени. Озабоченные быстротой
разработки, они прежде применяли тег <blockquote> для быстрого создания отсту-
пов, пример которых показан на рисунке 51.2.



The Bliss of Ignorance
Ив vine dwells in a constant state of stupor shares much in common with the
enlightened man. — Karl Save

Paragraph paragraph paragraph Paragraph paragraph paragraph Paragraph paragraph paragraph
Paragraph paragraph paragraph Paragraph paragraph paragraph. Paragraph paragraph paragraph.
Paragraph paragraph paragraph. Paragraph paragraph paragraph. Paragraph paragraph paragraph
Paragraph paragraph paragraph. Paragraph paragraph paragraph. Paragraph paragraph paragraph
Paragraph paragraph paragraph Paragraph paragraph paragraph Paragraph paragraph paragraph
Paragraph paragraph paragraph Paragraph paragraph paragraph. Paragraph paragraph paragraph
Paragraph paragraph paragraph Paragraph paragraph paragraph Paragraph paragraph paragraph
Paragraph paragraph paragraph Paragraph paragraph paragraph Paragraph paragraph paragraph
Paragraph paragraph paragraph Paragraph paragraph paragraph




Puc. 51.L Первоначально предполагалось, что тег <blockquote> будет применяться
для смещения отдельного блока жранного текста, как на этом рисунке


y<t Vew Favorite
tie



Blah blah headline
Blah blah blah blah blah Blah blah blah blah blah. Blah blah blah blah blah. Blah blah blah
blah blah Blah blah blah bUh blah.

Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah. Blah blah blah
blab blah Blah blah blah blab blah Blah blah blah blah blah Blah blah blab blah blah Blah
blah blah blah blah Blah blah blah blah blah. Blah blah blah blah blah Blah blah blah blah
blah. Blah blah blah blah blah Blah blah blah blah blah




Puc. 51.2. В руках хитроумных дизайнеров тег <blockquote>
фактически превратился в инструмент создания отступов на странице,
во многом к неудовольствию тех, кто озабочен соблюдением стандартов Интернета
Строим Web-сайты
264

В обоих случаях HTML-код выглядит одинаково. Просто разместите теги <Ыос :-
quote> вокруг содержимого, которое необходимо сдвинуть так, как показано в следу-
ющем примере кода:
<blockquote>
<p>This paragraph i s indented.</p>
<p>This paragraph i s indented.</p>
<p>This paragraph i s indented.</p>
</blockquote>
Можно также применять вложение тегов <blockquote>, чтобы увеличить величину
отступа:
<blockquote>
<blockquote>
<blockquote>
<p>This paragraph i s indented.</p>
<p>This paragraph i s indented.</p>
<p>This paragraph i s indented.</p>
</blockquote>
</blockquote>
</blockquote>
Тем не менее, обратите внимание, что отсутствует возможность задания точной вели-
чины отступа. Для каждого тега <blockquote> браузер просто отодвигает текст впра-
во на некоторое расстояние в соответствии с настройками по умолчанию.
В целом, лучшим решением задачи создания отступа является использование каскад-
ных таблиц стилей. С помощью атрибута margin-left обеспечивается изящное ре-
шение проблемы, и такой способ предоставляет дополнительную гибкость в наст] к й-
кё точного значения отступа, пример которого показан на рисунке 51.3.
Листинг 51.1. Исходный код страницы, вид которой в браузере
показан на рисунке 51.3
<head>
<style type="text/css">




margin-left: 50px;



</style>
</head>
ГЛАВА 5 1 . Управление отступами 265

<body>
<hl>Blah blah headline</hl>


<p>Blah blah blah....</p>


<p>Blah blah blah....</p>
</body>



ЕА Favorites loots
$&»

<< Пред. стр.

стр. 27
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>