Таблицы стилей могут быть добавлены на web-страницу тремя разными способами, которые различаются по своим возможностям.
Самый мощный и удобный способ определения стилей и правил для с нашего сайта. Стили хранятся в отдельном файле, который может быть использован для любых web-страниц. Для подключения таблицы связанных стилей используется тег <LINK> в заголовке страницы (пример 1).
Пример 1. Подключение таблицы связанных стилей
Путь к файлу со стилями может быть как относительным, так и абсолютным, как показано в данном примере.
Стиль определяется в самом файле и обычно располагается в заголовке web-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле объекта. Определение стиля задается тегом <STYLE> (пример 2).
Пример 2. Использование таблицы глобальных стилей
В данном примере показано изменение стиля заголовка <H1>. На web-странице теперь дастаткова указать только этот тег и стили будут добавлены к нему автоматически.
Внутренний стиль являются по существу расширением для одиночного тега используемого на web-странице. Для определения стиля используется параметр style, а его атрибуты указываются с помощью языка таблицы стилей (пример 3)..
Пример 3. Использование внутренних стилей
Рекомендуется использовать внутренний стиль для одиночных тегов или отказаться от его использования вообще, поскольку изменение ряда элементов становится проблематичным. Внутренние стили не соответствуют идеологии структурного объекта, когда содержимое и его оформление разделены.
Все описанные способы использования CSS (ЦСС) могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей. В примере 4 используются сразу два метода добавления таблиц стилей в файл.
Пример 4. Сочетание разных методов подключения стилей
В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий — зеленым цветом и другим шрифтом.
Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru
О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект