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

       

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


Для того чтобы документ 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.

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

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



Содержание раздела