Использование листов стилей в документах

Со свойствами и правилами CSS разобрались, но как их применить к конкретному документу ? Рассмотрим три способа:

Внутренние стили

Применение внутренних стилей в документе, основано на использовании тегов <DIV>, <SPAN> и атрибута STYLE.

Атрибут STYLE применяется для определения стиля конкретного элемента HTML документа. Например, вот так можно задать выравнивание по обоим краям для абзаца текста:

<P STYLE="text-align:justify"> Здесь ровный по краям абзац</P>

А вот так можно определить стиль заголовка:

<H1 STYLE="color:red">Красный заголовок</H1>

Тег <DIV> используется для применения заданного в нем стиля на группу элементов документа. Например, вот так можно задать левый отступ для фрагмента документа и выровнять фрагмент по обоим краям:

<DIV STYLE="margin-left:20pt;text-align:justify">

<H1>Заголовок 1</H1>

<p>Абзац 11

<p>Абзац 12

<H1>Заголовок 2</H1>

<p>Абзац 21

<p>Абзац 22

</DIV>

С помощью данного тега можно творить чудеса - делать многослойные документы. Многослойные документы можно создавать манипулируя свойствами CSS: position, left, top, visibility. Например вот так можно наложить два заключенных в контейнер

<DIV>...</DIV> фрагмента, один на другой в HTML документе.

<DIV STYLE="position:absolute; left:100; top:100">

<H1>Заголовок нижнего слоя</H1>

<p>Абзац 11

<p>Абзац 12

</DIV>

<DIV STYLE="position:absolute; left:100; top:100">

<H1>Заголовок верхнего слоя</H1>

<p>Абзац 21

<p>Абзац 22

</DIV>

Подумайте какие возможности открываются разработчику, ведь элементом слоя может быть и графический файл - элемент <IMG>, а манипулируя свойством visibility слоев документа можно отображать в определенной области документа различное содержимое.

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

<P><SPAN STYLE="color:red">Мы </SPAN><SPAN STYLE="color:blue">пошли</SPAN> за грибами.</P>

В окне броузера отобразится следующая cтрока: Мы пошли за грибами.