2. Форматирование с помощью таблиц стилей
2.1. Стили символов
С помощью таблиц стилей можно достичь большого разнообразия эффектов. Например, следующий фрагмент.
<HEAD>
<STYLE type="text/css">
.#myid {font-style: italic; color: blue}
P { font-weight: 700 }
H1 { font-weight: 200 }
</STYLE>
</HEAD> <BODY>
<H1 ID="myid">Стиль влияет на этот заголовок</Н1>
<Р ID="myid"> Стиль влияет на этот абзац
</BODY>
в окне просмотра отобразится следующим образом:
То есть, можно гибко переопределять стили любых тегов.
В следующем фрагменте задают отступ в первой строке абзаца:
Р {text-indent: 2.6em }
<P ID ="myid">Стиль влияет на этот абзац. Стиль влияет на этот абзац. Стиль влияет на этот абзац. Стиль влияет на этот абзац. Стиль влияет на этот абзац. Стиль влияет на этот абзац.
Тогда первая строка любого абзаца будет, отображена с отступом
Стиль влияет на этот абзац. Стиль влияет на этот абзац. Стиль влияет на этот абзац. Стиль влияет на этот абзац. Стиль влияет на этот абзац. Стиль влияет на этот абзац.
Здесь величина отступа 2.6еm подбиралась так, чтобы отступ был равен ширине 5 символов.
Стили могут наследоваться от внешних блоков. В следующем фрагменте стиль выравнивания наследуется от блока с идентификатором center:
<HEAD>
<STYLE type="text/css">
.#myid {font-style: italic; color: blue}
P { font-weight: 700 }
HI { font-weight: 200 }
DIV.#center {text-align: center }
</STYLE>
</HEAD>
<BODY>
<DIV ID="center">
<DIV>
<H1 ID ="myid”>Cтиль влияет на этот заголовок</Н1>
<Р ID ="myid"> Стиль влияет на этот абзац
</DIV>
</BODY>
Для выделения некоторых фрагментов можно увеличить расстояние между символами. Например, следующий стиль добавляет к текущему расстоянию между символами значение 0.2еm:
Р {letter-spacing: 0.2em}
Можно отобразить все символы прописными
Hl {text-transform: uppercase }
2.2. Стили цветового форматирования
Параметр стили цвета color принимает значения, задаваемые ключевым словом или RGB-значением. Кроме этих ключевых слов, можно задавать идентификаторы системных цветов операционной системы пользователя, например, Windows
Примеры применения ключевых слов:
BODY {color: black }
H1 { color: maroon }
H2 { color: olive }
Примеры применения RGB-значений цветов:
EM { color: #f00 }
EM { color: #ff0000 }
EM { color: rgb(255,0,0) }
EM { color: rgb(100%, 0%, 0%)}
Формат 16-ричной записи RGB-значения содержит три или шесть 16-ричных символов Функция rgb возвращает 16-ричное число с тремя или шестью цифрами. Например, вызов rgb(f, b, 0) возвращает число #fb0 или #ffbb00, в зависимости от цветового разрешения дисплея пользователя.
Устройство отображения документа также корректирует указанные разработчиком RGB-значения. Например, разработчик, вызывая функцию rgb(300,0,0), говорит, что первая (красная) составляющая RGB-значения должна принимать максимально допустимое значение в диапазоне от 0 до 300. Браузер пользователя, если любая из RGB-составляющих цветов дисплея может принимать значение от 0 до 255, решает, что эта составляющая может принимать значение только в диапазоне от 0 до 255