| |
узеру место
расположения элемента на Web-странйце. Значение absolute позволяет распола-
гать объекты по отношению к левому верхнему углу страницы, в то время как
значение relative дает возможность указывать положение относительно места, в
котором данный объект находился бы без задания свойства position. Например,
если в HTML-коде Web-странице содержится два дескриптора , один после
другого, Web-браузер выведет на экран второе изображение справа от первого. С
помощью позиционирования relative между двумя изображениями можно вста-
вить поле:
Правило каскадного списка стилей во втором дескрипторе указывает
браузеру сдвинуть элемент (image2.jpg) на 20 пикселей вправо от его нормаль-
ного положения.
Для наложения элементов на Web-странице используется абсолютное (absolute)
позиционирование. Один элемент можно поместить поверх другого и за счет
указания отрицательного относительного (relative) положения. Тем не менее,
применение абсолютного позиционирования элементов на странице позволяет
достичь того же результата более простыми средствами. Например, следующие
правила списка стилей при применении их к элементам Web-страницы указыва-
ют Web-браузеру поместить объект на расстоянии 50 пикселей от верхнего края
страницы и на расстоянии 10 пикселей от левого края страницы:
.linkl {position:absolute; top:50px; left:10px}
В приведенном правиле можно использовать любые единицы измерения рас-
стояний, допустимые для списков стилей: пункты (pt), дюймы (in), сантиметры
(cm) и т.д. Например, для задания положения текстового элемента с использова-
нием единицы измерения расстояния, соответствующем размере шрифта, приме-
няется единица em:
194 Глава 4. Каскадные списки стилей
.Iink2 {color:#400040;
font-size:50px; font-style:italix;
font-family:Georgia, serif;
position:absolute; top:2.5€»m; left:2em}
В приведенном примере указание абсолютного положения top:'2.5em и
ieft: 2em заставляет Web-браузер поместить элемент на расстоянии 125 пикселей
от верхнего края страницы и 100 пикселей от левой границы страницы (посколь-
ку в этом случае значение единицы em составляет 50 пикселей, как указано в
СВОЙСТВе font-size).
После написания правил позиционирования объектов необходимо указать
Web-браузеру применять эти правила для определенных элементов на Web-стра-
нице. Для позиционирования двух гиперссылок с помощью классов каскадных
списков стилей, определенных в предыдущих примерах (linki и iink2), вставьте
на Web-страницу следующий код:
<рХа class="linkl"
href=MFigure04-01b.htm">4To нового в области<Ьг>
каскадных списков стилей?аХ/р>
<рХа class="link2"
href="FigureO4-01c.htm">H3учение CSS...
Атрибут class указывает Web-браузеру, какие правила каскадного списка сти-
лей применять к элементу (в приведенном примере к гиперссылке).
Начальный и конечный дескрипторы абзаца (<рх/р>), содержащиеся в коде
примера, определяют положение текста только в том случае, когда браузер посе-
тителя не поддерживает каскадные списки стилей. Если Web-браузер не может
осуществлять форматирование и позиционирование в соответствии с указанными
правилами, дескрипторы абзаца вставляют между гиперссылками пустую строку.
Помещение элементов, позиционируемых с помощью каскадных списков стилей,
в абзац или разделение их дескрипторами разрыва строки ( ) не требуется.
Тем не менее, следует помнить, что если Web-браузер не поддерживает каскад-
ные списки стилей, позиционируемые элементы без дескрипторов абзаца и раз-
рыва строки будут находиться рядом друг с другом.
Выравнивание текста на Web-странице
Такие текстовые процессоры, как MS Word или WordPerfect, предоставляют
четыре варианта выравнивания текста абзаца. Как показано на рис. 4.9, текст
можно выровнять по левому полу, по правому полю, по центру или по ширине
(т.е. одновременно по левому и по правому полю).
Три первых варианта выравнивания (по левому краю, по правому краю и по
центру) не представляют для HTML ничего нового. Атрибут align позволяет
центрировать текст или выравнивать его по левому или правому краю Web-стра-
ницы или HTML-таблицы. Тем не менее, атрибут align не имеет значения
"justify", которое позволило бы форматировать строки текста так, как показа-
но в четвертом абзаце на рис. 4.9. К счастью, свойство text-align каскадных
Глава 4. Каскадные списки стилей 195
списков стилей предоставляет опцию "justify" и дает возможность форматиро-
вать текст, выравнивая его по ширине.
йл Правки .ид ' фЬрэннав
•JBLEFT-
JUSTIFIED A word processor such as MS-Word or
WordPerfect gives you four ways to align paragraph text.
You can align text such that each line starts at the left-hand
margin (left-justify), ends at the right-hand margin (rightjustify),
is centered (center), or ends flush with both the left
and right-hand margins (full-justified). Left-justified text
has a jagged right-hand edge.
RIGHT-JUSTIFIED A word processor such as MS-Wo
|
|