Тег <STYLE>
Тег <STYLE> контейнер в котором описываются стили используемые в документе. Стили задаются в формате CSS (каскадные таблицы стилей).
Формат представления:
<Style type="text/css" атрибут="значение атрибута">
... Описание стилей ...
</Style>
Стили можно описать как для одного конкретно указанного тега, так и для различных тегов, используя имя стиля и применяя в к различным тегам. Используя атрибут Media можно описать стили для различных устройств.
Значения атрибута MEDIA:
print – стиль при выводе на печать.
screen – стиль для отображения на экране браузером.
all – стиль для любого устройства.
Использование:
Рассмотрим использование на примере тега абзаца.
Задание стилей:
<style type="text/css" атрибут="значение атрибута">
<!-- для абзаца тег <p> устанавливаем цвет и фон -->
p.col {
color:#000080;
Background:#FFFF00
}
<!-- Для всех тегов устанавливаем отступ и размер шрифта-->
.alig {
text-indent: 50px;
font-size:15pt;
}
</style>
Применяем стили:
1) <p class="col">Установили цвет и фон для абзаца<p>
Установили цвет и фон для абзаца
2) <p class="alig">Задали отступ и размер шрифта для абзаца<p>
Задали отступ и размер шрифта для абзаца
3) <table width="50%" border="2">
<tr><td class="alig">Оформление текста в ячейке таблицы</td></tr>
</table>
Оформление ячейки таблицы |
Для тега стиль можно применять и без объявления стиля в head. Для этого используется атрибут STYLE (атрибут определен для всех тегов). Значения свойств тегов записываются через точку с запятой в формате CSS и берутся в кавычки. В некоторых случаях названия свойств используемых и документе и таблице стилей различаются.
Пример оформления абзаца: <p style="color:#000080; background-color: #FFFF00">Установили цвет и фон для абзаца</p>.
Стили можно определить в отдельном файле (файл таблицы стилей) и используя команду @import подключить к документу.
Использование:
<style>
@import URL("Путь и имя файла таблицы стилей");
</style>
Обратите внимание: Команда @import должна быть первой в контейнере, иначе некоторые браузеры её проигнорируют.
|