Сервер Web своими руками. Язык HTML, приложения CGI и ISAPI, установка серверов Web для Windows

Таблицы стилей

По мере увеличения количества документов, расположенных на вашем сервере WWW, вам будет все труднее и труднее заниматься его сопровождением. Особенно это касается оформления документов HTML. Представьте себе, что вам нужно, например, изменить оформление заголовков первого уровня во всех документах, а также изменить шрифтовое оформление текста, вставленного в документ при помощи оператора <P>. Ручная обработка множества документов HTML с целью приведения их внешнего вида к некоторому стандарту может отнять немало времени.

Аналогичная проблема возникает и при подготовки обычных текстовых документов. Например, при создании документа вы указали для обычных параграфов абзацный отступ и шрифт, а также оформили определенным образом заголовки. Далее у вас может возникнуть необходимость изменения параметров оформления, например, величины того же абзацного отступа. В простейших текстовых редакторах для внесения необходимых изменений вам придется вручную обработать каждый параграф текста.

Для упрощения оформления документов современные текстовые процессоры, такие, например, как Microsoft Word, используют оформление по образцу. Образцы содержат в себе описания параметров оформления и называются стилями. Например, в стиле может быть указано, что заголовок второго уровня отображается красным цветом и должен быть отцентрирован.

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

Вернемся к проблеме оформления большого количества документов HTML. Для решения этой проблемы вы можете использовать так называемые каскадные таблицы стилей Cascading Style Sheets (CSS), разработанные консорциумом World Wide Web Consortium (W3C).

Полное описание текущей редакции каскадных таблиц стилей вы можете найти на сервере консорциума W3C по адресу http://www.w3.org/pub/WWW/TR/WD-css1.html. Кроме того, мы рекомендуем вам обязательно познакомиться с описанием таблиц стилей A User's Guide to Style Sheets, расположенном на сервере http://www.microsoft.com. Мы же расскажем вам только о самых важных возможностях таблиц стилей, реализованных в навигаторе Microsoft Internet Explorer версии 3.0.

Что же касается навигатора Netscape Navigator версии 3.0, то он не работает со стилями. Однако в ближайшем будущем фирма Netscape планирует добавить такую возможность в свой навигатор.

Способы использования стилей

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

Общие таблицы стилей для нескольких документов HTML

Наиболее интересное применение таблиц стилей - это их использование для оформления многих, возможно, даже всех документов HTML, расположенных на вашем сервере. При этом выполняется подключение (linking) файлов таблиц стилей к документам HTML. Имя файла таблицы стилей должно иметь вид *.css.

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

Заметим, что общие таблицы стилей могут использоваться одновременно не только на одном, но и на нескольких серверах WWW, так как можно подключать файлы таблиц стилей, указывая их стандартный адрес URL. Это позволяет централизованно создавать и изменять корпоративные таблицы стилей.

Встраивание таблиц стилей в документы HTML

Если отдельные документы HTML должны быть оформлены особым образом, отличным от того, что задано в общих таблицах стилей, вы можете встроить таблицы стилей непосредственно в текст документа HTML. Такие таблицы называются встроенными (embedded) таблицами стилей.

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

Может получиться так, что стили, встроенные в документ HTML, будут конфликтовать с общими таблицами стилей. В этом случае навигатор отдаст преимущество встроенным таблицам стилей.

Встраивание стилей в операторы HTML

Последний способ предполагает встраивание стилей непосредственно в операторы языка HTML и применение стилей для оформление отдельных фрагментов документа HTML. Этому способу присущ тот же недостаток, что и предыдущему, - при изменении стиля необходимо вручную редактировать все документы HTML, в котором этот стиль используется.

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

Создание файлов таблиц стилей

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

Внешний вид файла таблицы стилей лучше изучать на конкретном примере (листинг 2.17).

Листинг 2.17. Файл chap2\styles\styles.css

H1 { font-size: 24;
     font-weigt: bold;
     color: red;
     margin-left: 10% }

H2 { font-size: 20;
     font-weigt: bold;
     color: black; 
     font-family: Courier }

P.italic { font-style: italic }
P.red { color: red }

Здесь мы определили стили H1, H2, P.italic и P.red.

Определение стиля начинается с имени класса (например, H1), вслед за которым в фигурных скобках перечисляются параметры стиля. Для стиля с классом H1 мы указали размер шрифта, равный 24 пунктам, задали утолщение, красный цвет и отступ с левой стороны на 10 процентов от ширины экрана.

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

Ссылка на файл таблицы стилей

Для того чтобы документ HTML был оформлен с использованием файла таблицы стилей, в разделе заголовка документа необходимо разместить оператор <LINK>. Пример ссылки на файл таблицы стилей вы можете найти в листинге 2.18.

Листинг 2.18. Файл chap2\styles\cssdemo.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Команды логического форматирования</TITLE>
    <LINK REL=STYLESHEET HREF="styles.css" TYPE="text/css">
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <H1>Заголовок первого уровня</H1>
    <P>Обычный текст
    <H2>Заголовок второго уровня</H2>
    <P CLASS=italic>Наклонный текст
    <P CLASS=red>Текст красного цвета
  </BODY>
</HTML>

Параметры оператора <LINK> необходимо задавать, как указано в этом примере. В параметре HREF должен быть указан адрес URL файла таблицы стилей. Этот файл может находиться на любом сервере WWW, а не только на том, где размещен данный документ HTML.

Как пользоваться стилями из файла таблицы стилей?

Очень просто.

Если в файле определены параметры для операторов языка HTML, предназначенных для оформления текста (например, для операторов <H1> или <H2>, как в нашем примере), вы просто указываете эти операторы без изменений:

<H1>Заголовок первого уровня</H1>
<P>Обычный текст
<H2>Заголовок второго уровня</H2>

Однако при определении стиля вы можете не только переопределить параметры форматирования операторов, но и создать новые классы для этих операторов. Например, ниже определены классы italic и red для оператора <P>:

P.italic { font-style: italic }
P.red { color: red }

Для того чтобы задействовать созданные классы, вы должны указать имя нужного класса в параметре CLASS оператора <P> (или другого оператора форматирования текста), как это показано ниже:

<P CLASS=italic>Наклонный текст
<P CLASS=red>Текст красного цвета

Внешний вид документа, оформленного с использованием нашего файла таблицы стилей, показан на рис. 2.18.

Рис. 2.18. Внешний вид документа, оформленного с использованием файла таблицы стилей

Нетрудно заметить, что заголовок первого уровня отображается с отступом от левого края, как это и было указано в стиле H1.

Заголовок второго уровня изображен с использованием шрифта с фиксированной шириной символов, так как в соответствующем стиле было указано семейство шрифтов Courier.

Последние два параграфа документа отображаются, соответственно, с наклоном и с выделением красным цветом.

Стили в документе HTML

Вы можете встроить таблицу стилей непосредственно в документ HTML, для чего нужно использовать оператор <STYLE>. Этот оператор применяется в паре с закрывающим оператором </STYLE>. Между операторами <STYLE> и </STYLE> находится таблица стилей.

В листинге 2.19 мы привели пример документа HTML, в который встроена таблица стилей.

Листинг 2.19. Файл chap2\styles\embed.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Встроенная таблица стилей</TITLE>
    <STYLE TYPE="text/css">
      <!--
      H1 { font-size: 24;
           font-weigt: bold;
           color: red;
           margin-left: 10% }

      H2 { font-size: 20;
           font-weigt: bold;
           color: black; 
           font-family: Courier }

      P.italic { font-style: italic }
      P.red { color: red }
      -->
    </STYLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <H1>Заголовок первого уровня</H1>
    <P>Обычный текст
    <H2>Заголовок второго уровня</H2>
    <P CLASS=italic>Наклонный текст
    <P CLASS=red>Текст красного цвета
  </BODY>
</HTML>

Внешний вид этого документа при просмотре в навигаторе Microsoft Internet Explorer аналогичен показанному на рис. 2.18. Навигатор Netscape Navigator, как и в предыдущем случае, игнорирует стилевое оформление.

Обратите внимание на использование оператора комментария <!-- -->. Когда документ просматривается навигатором, не распознающем стилевое оформление, то такой навигатор проигнорирует как оператор <STYLE>, так и таблицу стилей. Если убрать оператор комментария, таблица стилей появится в окне навигатора, чего вы, очевидно, не хотели.

Стили в операторах HTML

Указывая в операторах оформления текста параметр CLASS, вы можете непосредственно задавать параметры стилевого оформления. Соответствующий пример документа HTML мы привели в листинге 2.20.

Листинг 2.20. Файл chap2\styles\inline.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Встроенные стили</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <H1 STYLE="font-size: 24; font-weigt: bold; color: red;
        margin-left: 10%">Заголовок первого уровня</H1>

    <P>Обычный текст

    <H2 STYLE="font-size: 20; font-weigt: bold;
        color: black; 
        font-family: Courier">Заголовок второго уровня</H2>

    <P  STYLE="font-style: italic">Наклонный текст
    <P  STYLE="color: red">Текст красного цвета
  </BODY>
</HTML>

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