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

При внедрение таблицы стилей в документ правила, составляющие таблицу стилей, располагаются между тегами <STYLE TYPE= “text/css”> и </STYLE>, которые должны размещаться в разделе <HEAD> документа.

Пример:

<HTML>

<HEAD>

<STYLE type= “text/css”>

BODY {background-color: yellow}

H3 {letter-spacing: 1.5 em}

P {color: blue }

</STYLE>

</HEAD>

<BODY>

</BODY>

</HTML>

 

Где свойство letter-spacing влияет на расстояние между символами при отображении текста.

 

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

Для импортирования таблицы стилей после тега <STYLE TYPE= “text/css”> следует задать значение свойства @import, которое определяет адрес файла таблицы стилей, импортируемой в документ.

Таблица стилей, которая импортируется для формирования документа, задается следующим образом:

<STYLE TYPE= “text/css”>

@import: URL(“URL-адрес”);

</STYLE>

 

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

Встраивание определений стилей в тег влияет только на отображение элемента, определяемого данным тегом.

Пример:

<P STYLE= “color: red; text-align: left”>Текст красного цвета, выровненный по левому краю </P>

<P STYLE= “color: blue; text-align: right”> Текст синего цвета, выровненный по правому краю </P>

 

Определение и использование классов

В DHTML можно задать разные правила форматирования для одного элемента. В этом случае в теге <style> определяются классы. Имя класса определяется пользователем, указывается после имени тега и отделяется от него точкой. Например, p.elleft.

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

Пример:

<HEAD>

<STYLE>

p.elleft {color: red; text-align: left}

p.elcenter { color: green; text-align: center}

p.elright {color: blue; text-align: right}

</STYLE>

</HEAD>

<BODY>

<P class=elleft> Текст красного цвета, выровненный по левому краю</P>

<P class=elcenter> Текст зеленого цвета, выровненный по центру</P>

<P class=elright> Текст синего цвета, выровненный по центру</P>

</BODY>

 


Класс для всех элементов страницы

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

<STYLE>

.elred {color: red}

.elblue {color: blue}

</STYLE>

Классы elred и elblue можно применять к любым элементам на странице.