Использование стилей | Практическая информатика

Одним из способов подключения стиля к html-странице (остальные способы рассматриваются в параграфе "Каскадные таблицы стилей") является использование в заголовке документа контейнера <style>:

<head>
...
<style type="text/css">
 ...
 описание стилей
 ...
</style>
...
</head>

Включение в этот контейнер атрибута type="text/css" указывает браузеру, что в нем содержится описание стилей. В настоящее время атрибут type может принимать только указанное значение, однако если он будет опущен, то некоторые браузеры могут проигнорировать всю таблицу стилей.

Само описание стиля включает селектор тега, указывающий имя тега, на который распространяется правило стиля, и фигурные скобки, содержащие одну или более пар объявлений вида "свойство_стиля:значение", разделенных точкой с запятой:

селектор_тега{
 свойство_стиля1:значение1;
 свойство_стиля2:значение2;
 свойство_стиля3:значение3;
}

Если в фигурных скобках указано всего одно правило, то точку с запятой можно опустить.

Пример

<html>
<head>
<title>Первый пример использования стилей</title>
<style type="text/css">
<!--
 H1 {text-align: center}
-->
</style>
</head>
<body>
<H1>Заголовок</H1>
<P>
Какой-то текст
</body>
</html>

В данном примере в секции заголовка документа <head> ... </head> задан стиль (правило), согласно которому браузер должен выравнивать по центру страницы содержимое контейнера <H1> ... </H1>: свойству text-align присвоено значение center.

Обратите внимание на использование тегов комментария (). Все содержимое контейнера <style> находится между ними. Это позволяет скрыть информацию о стиле от браузеров, которые не распознают тег <style> (в противном случае они могут принять правила за текст и вывести их на экран).

В таблицах стилей также можно использовать комментарии, позволяющие описать то или иное свойство: текст, расположенный между символами /* и */ не обрабатывается браузером и не рассматривается, как элемент таблицы стилей (не путайте теги комментария и комментарии таблиц стилей, они имеют разный синтаксис и разное назначение).

Пример
Рассмотрим пример оформления текста. Установим белый цвет фона документа (свойство background-color), затем задействуем свойства управления шрифтом: color (цвет), font-family (гарнитура шрифта) и font-size (размер шрифта), например,

цвет -- серый;
семейство шрифта (гарнитура) -- Times, шрифт с засечками;
размер шрифта -- 14 пунктов.

Добавим свойства, связанные с форматированием абзаца: text-indent (отступ красной строки), text-align (выравнивание), padding-left (отступ слева), например,

дополнительный отступ красной строки -- 10pt;
выравнивание -- по ширине документа;
отступ от левого края -- 20pt.

Установим темно-красный цвет (свойство color) заголовков с первого по третий уровень.

Документ примет вид:

<html>
<head>
<title>Второй пример использования стилей</title>
<style type="text/css">
<!--
 body {background-color: white}

 h1, h2, h3 {color: red}

 p    {
 /* шрифт */
       color: gray;
       font-family: Times, serif;
       font-size: 14pt;
 /* абзац */
       text-indent: 10pt;
       text-align: justify;
       padding-left: 20pt;
      }
-->
</style>
</head>
<body>
...
</body>
</html>