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

Пример 2.19.Файл 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% от ширины экрана. Каждый параметр стилевого оформления задается своим именем, после которого через двоеточие следует значение параметра.

Результат выполнения примера имеет вид (рис. 2.20)

Рис. 2.20. Просмотр примера 2.19 (styles.css)

Ссылка на файл таблиц стилей. Чтобы документ HTML был оформлен с использованием файла таблицы стилей, в разделе заголовка документа необходимо разместить оператор <LINK>.

Пример 2.20. Ссылки на файл таблицы стилей

<HTML>

<HEAD>

<TITLE>Пример 3.1</TITLE>

</HEAD>

<H1>Команды логического форматирования</H1>

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

<H2>Заголовок второго уровня</H2>

<P CLASS=italic>Наклонный текст

<P CLASS=red>Текст красного цвета

</BODY>

</HTML>

Результат выполнения примера (рис. 2.21)

Рис. 2.21. Просмотр примера 2.20 (ссылка на файл таблицы стилей)

Параметр HREF указывает адрес таблицы стилей. Этот файл может находиться на любом сервере WWW. Параметр REL указывает, что подключаемый файл (таблица стилей, адрес которой указан HREF) является списком стилей.

Чтобы задействовать созданные классы, нужно указать имя нужного класса в параметре CLASS оператора <P> или другого оператора форматирования текста. Например, <P CLASS=italic>Наклонный текст или <P CLASS=red>Текст красного цвета

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