Таблицы стилей могут быть добавлены в вашу страницу тремя разными способами, различающиеся
по своим возможностям.
Пример 1. Подключение таблицы связанных стилей
|
Достоинства данного способа:
Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом STYLE.
Пример 2. Использование таблицы глобальных стилей
|
В заголовке определен стиль тега H1, который затем можно повсеместно
использовать на данной веб-странице.
Внутренний стиль являются по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется параметр style, а его атрибуты указываются с помощью языка таблицы стилей.
Пример 3. Использование внутренних стилей
|
Рекомендуется использовать внутренний стиль для одиночных тегов или отказаться от его использования вообще, поскольку изменение ряда элементов становится проблематичным. Внутренние стили не соответствуют идеологии структурного документа, когда содержимое и его оформление разделены.
Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей. В примере используются сразу два метода добавления таблиц стилей в документ.
Пример 4. Сочетание разных методов подключения стилей
|
В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий - зеленым и другим шрифтом.
[Назад] [Содержание] [Вперед]