Как подключить CSS: от статики к динамике
Статическое подключение стилей CSS к HTML-странице - простая задача. Сложившиеся традиции предлагают три основных варианта: непосредственно на теге, в специальном теге style и через подключение внешнего css-файла. Использование серверного языка позволяет придать этим способам динамику, но использование языка браузера JavaScript открывает совершенно другие возможности.
Теги HTML и стили CSS
Веб-страница представляет собой формализованный стиль представления информации. Каждый текстовый или графический элемент отображается «как есть» по умолчанию браузера или может быть описан правилами CSS и отображен так, как задумал дизайнер и реализовал программист.
Любое правило CSS - это наименование и значение. Развитие таблиц каскадных стилей привело к многовариантности в наименованиях и значениях. Появились псевдоклассы и псевдоэлементы. Использование классов и идентификаторов CSS стало тесно взаимосвязано с тегами HTML. Задача, как подключить CSS к конкретному тегу, получила широкий спектр допустимых решений.
Принципиально есть три варианта подключения правила CSS к нужному тегу:
- непосредственно через атрибут style тега;
- через специальный тег tyle;
- через подключение внешнего файла стилей.
Любая неточность или ошибка в описании и подключении стиля будет проигнорирована. HTML - язык жестких конструкций, внести в него динамику посредством серверного языка допустимо только в определенных пределах.
Использование механизма AJAX расширяет границы возможного. Но в любом случае решение задачи, как подключить CSS-правило к тегу HTML, статично: правило записано и указано, к чему оно относится.
Каркас стилей HTML страницы
В примере показано, как подключить внешний файл стилей sci-index.css (1), и как это сделать через специальный тег style (2): здесь изменен цвет фона для тега тела страницы body. Как подключить CSS-правило непосредственно на теге дважды (через идентификатор; через атрибут style), описано в (3). Здесь идентификатор scWelcomeLabel определяет стиль (набор правил) из внешнего файла стилей, а атрибут style уточняет только одно правило: top - координату по оси Y от верхнего края блока, в котором этот тег находится.
Использование серверного языка PHP (4) для создания формы накладывает еще один уровень «жесткости» на каркас стилей.
По сути, задача создания веб-страницы - процедура точного определения последовательности тегов, размещающих содержание (информацию) нужным образом благодаря правилам CSS. Если в страница формируется кодом PHP, то жесткая структура тегов и их связей с CSS-правилами «усиливается» кодом PHP.
Фактически задача, как подключить CSS к HTML при использовании PHP, - это двойной уровень жесткости. Если меняется дизайн и нужно изменить правило CSS, то необходимо будет внести изменения в коды CSS/HTML и в код PHP.
Простая динамика правил CSS
Нет проблем найти функцией getElementById() любой тег и назначить ему новый стиль или изменить отдельное правило стиля. В приведенном ниже примере найдены теги шапки, контента и подвала, затем изменены их координаты. Эта логика позволяет написать функцию scfChange и назначить ее событию - изменение размера окна браузера.
Результат: посетитель может изменить размер окна браузера, а сайт автоматически подстроит под него положение шапки, контента и подвала.
Реальная динамика стилей CSS
HTML тесно связан с CSS, и для него нет проблемы создать специальный тег style в реальном времени и использовать новые (измененные) правила. Нет необходимости решать задачу, как подключить CSS-файл: нужное содержимое можно сформировать динамически.
Здесь сформирован и подключен CSS-стиль в динамике. Сделать это можно несколько раз. Сначала создается строка символов StyleText, в которую помещается «дословное» описание нужного набора правил CSS.
Правило background-image здесь указано через «текст» нужной картинки: издержки производства - картинка внутри стиля, но так не требуется наличие внешнего файла этой картинки.
После того как описание нужного набора правил сформировано в виде строки символов, создается тег style, указывается его тип text/css и содержимое стилевого тега заполняется нужным содержанием. Задача, как подключить CSS по ходу дела, в процессе работы посетителя сайта, решена!
Добавление в тело документа нового тега автоматом делает доступным все описанные в нем стили. Подключить CSS в динамике - это просто, практично и надежно.