11.3. Некоторые хитрости управления стилями.
Указывайте относительные а не абсолютные размеры шрифтов.
Указывая абсолютные размеры шрифтов, вы лишаете людей, просматривающих ваши странички, возможности увеличивать или уменьшать размер шрифтов с помощью специальной кнопочки в броузере в соответствии с разрешением их дисплея и зрением. Шрифты будут отображаться только такого размера, который вы указали при написании странички. Поэтому, желательно использовать для этих целей указание размеров в процентах. В этом случае размер шрифта будет меньше (больше) на указанное вами количество процентов, чем при оформлении его с помощью стандартного HTML-тега.
Заключайте описания стилей в тэг комментариев
Это делается для того, чтобы устаревшие браузеры, не понимающие тэг <STYLE>, не выводили описания стилей на страничку как обычный текст.
Делается это очень просто.
<HEAD>
<STYLE type="text/css">
<!--
описания стилей
-- >
</STYLE>
</HEAD>
Можно указать значения отступов вокруг объектов, как отрицательные величины.
Этот трюк позволяет накладывать один слой текста на другой и получать очень интересные и необычные результаты.
Следующий код создает заголовок, который выглядит трехмерным без использования графики.
<HEAD>
<STYLE type="text/css">
.text1 {
font-size: 80pt; font-weight: bold;
color: gray; margin-top: 100px; margin-left: 70px;}
.text2 {
font-size: 80pt; font-weight: bold;
color: black; margin-top: -140px; margin-left: 70px;}
</STYLE>
</HEAD>
<BODY bgcolor=white>
<DIV class="text1">Text</DIV>
<DIV class="text2">Text</DIV>
</BODY>
Отступ в первой строке абзаца. Укажите в описании стилей
P {
text-indent: 1cm;
}
Теперь первые строки каждого нового абзаца будут выводиться с "красной" строки.
Приложение 1.Цвета.
В элементах FONTиBODYнекоторые конструкции HTML могут быть использованы, чтобы специфицировать цвета: например, цвет фона, цвет текста по умолчанию или цвет текстасвязи.
Так как все мониторы и программы могут отображать цвет, действительное отображение может быть черно-белым или с различными оттенками серого.
Для спецификации цвета, как значения атрибута, существуют два варианта:
Символьная нотация RED. Определено шестнадцать таких имен (см. ниже), которые можно записывать в любом регистре с кавычками или без.
Цифровое обозначение в шестнадцатиричной записи, например, "#FF0000", которая контролирует, каким образом цвет формируется из основных цветов - красного, зеленого и голубого - в так называемое sRGB цветовое пространство, при этом обозначение должно быть взято вкавычки.
Конечно, символические нотации много легче и более понятны. С другой стороны численные обозначения дают больше возможностей.
Чтобы пользоваться предварительно определенными цветовыми именами, необходимо знать их числовые эквиваленты, которые приводяться ниже:
|
Цветовые имена и sRGB значения | |||
|
|
Black (Черный) = "#000000" |
|
Green (Зеленый) = "#008000" |
|
|
Silver (Серебро)= "#C0C0C0" |
|
Lime (Известь) = "#00FF00" |
|
|
Gray (Серый) = "#808080" |
|
Olive (Оливковый) = "#808000" |
|
|
White (Белый) = "#FFFFFF" |
|
Yellow (Желтый)= "#FFFF00" |
|
|
Maroon (Темно-бордовый) = "#800000" |
|
Navy (Темно-синий) = "#000080" |
|
|
Red (Красный) = "#FF0000" |
|
Blue (Синий) = "#0000FF" |
|
|
Purple (Фиолетовый) = "#800080" |
|
Teal (Чирок) = "#008080" |
|
|
Fuchsia (Фуксия) = "#FF00FF" |
|
Aqua (Аква) = "#00FFFF" |
1См. Приложение 1.
2Основной идеей введения таблицы стилей является обеспечение инструментальных средств для спецификации особенностей визуального (или звукового)представленияHTML документов без введения новых HTML тегов и атрибутов. Стиль представления специфицирован способом, допускающим использование нескольких стилей при отображении документа. Это позволит контролировать цвета, шрифты и т.д. "поверх" структурирования текста.
3См. Приложение 1.
4
ALIGN=TOP
Позиционирует верх изображения с верхом текущей текстовой строки. Броузеры по разному интерпретируют это. Некоторые принимают во внимание то, что было на текстовой строке до изображения и игнорируют, что идет на строке после него.
ALIGN=MIDDLE
Выравнивает середину изображения по основной текстовой строке.
ALIGN=BOTTOM (по умолчанию)
Выравнивает низ изображения по основной строке.
ALIGN=LEFT
Перемещает изображение к текущему левому краю, временно изменяя этот край так, чтобы последующий текст переместился вдоль правой стороны изображения. Отображение зависит от того, были ли выровненные по левому краю какой-нибудь текст или ранее появившееся изображение до того, как в разметке появилось текущее изображение. Такой текст (но не изображения) обычно заставляет выровненные по левому краю изображения смещаться на новую строку, с последующим продолжением текста на прежней строке.
ALIGN=RIGHT
Перемещает изображение к текущему правому краю, временно изменяя этот край так, чтобы последующий текст переместился вдоль левой стороны изображения. Отображение зависит от того, были ли выровненные по правому краю какой-нибудь текст или ранее появившиеся изображения до того, как в разметке появилось текущее изображение. Такой текст (но не изображения) обычно заставляет выровненные по правому краю изображения смещаться на новую строку с последующим продолжением текста на прежней строке.
Страница