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

 

Со свойствами и правилами 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трока: Мы пошли за грибами.

 








Дата добавления: 2015-04-19; просмотров: 768;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.003 сек.