Як підключити CSS: від статики до динаміки

356 0 Новини високих технологій

Статичне підключення стилів CSS HTML-сторінці - проста задача. Сформовані традиції пропонують три основних варіанти: безпосередньо на тезі, в спеціальному тегу style і через підключення зовнішнього css-файлу. Використання серверного мови дозволяє надати цим способам динаміку, але використання мови браузера javascript відкриває зовсім інші можливості.

Теги HTML і CSS

Веб-сторінка являє собою формалізований стиль подання інформації. Кожен текстовий або графічний елемент відображається «як є» за замовчуванням браузера або може бути описаний правилами CSS і відображений так, як задумав дизайнер і реалізував програміст. Будь-яке правило CSS - це найменування і значення. Розвиток таблиць каскадних стилів призвело до багатоваріантності в найменуваннях і значеннях. З'явилися псевдокласи і псевдоелементи. Використання класів та ідентифікаторів CSS стало тісно взаємопов'язане з тегами HTML. Завдання, як підключити CSS до конкретного тегу, отримала широкий спектр припустимих рішень.


Як підключити 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: від статики до динаміки
    По суті, завдання створення веб-сторінки - процедура точного визначення послідовності тегів, які розміщують зміст (інформацію) належним чином завдяки правилам CSS. Якщо сторінка формується кодом PHP, то жорстка структура тегів і їх зв'язків з CSS-правил «посилюється» кодом PHP. Фактично завдання, як підключити CSS HTML при використанні PHP, - це подвійний рівень жорсткості. Якщо змінюється дизайн і потрібно змінити правило CSS, то необхідно буде внести зміни в коди CSS/HTML і PHP код.

    Проста динаміка правил CSS

    Немає проблем знайти функцією getElementById() будь-тег і призначити йому новий стиль або змінити окреме правило стилю. У наведеному нижче прикладі знайдено мітки шапки, контенту і підвалу, потім змінено їх координати. Ця логіка дає змогу написати функцію scfChange і призначити її події - зміна розміру вікна браузера.
    Як підключити CSS: від статики до динаміки
    Результат: відвідувач може змінити розмір вікна браузера, а сайт автоматично підлаштовує під нього положення шапки, контенту і підвалу.

    Реальна динаміка стилів CSS

    HTML тісно пов'язаний з CSS, і для нього немає проблеми створити спеціальний тег style в реальному часі і використовувати нові (змінені) правила. Немає необхідності вирішувати задачу, як підключити CSS-файл: потрібний вміст можна сформувати динамічно.
    Як підключити CSS: від статики до динаміки
    Тут сформований і підключений CSS-стиль в динаміці. Зробити це можна кілька разів. Спочатку створюється рядок символів StyleText, в яку поміщається «дослівне» опис потрібного набору правил CSS. Правило background-image тут зазначено через «текст» потрібної картинки: витрати виробництва - картинка всередині стилю, але так не вимагається наявність зовнішнього файлу цієї картинки. Після того як опис потрібного набору правил сформовано у вигляді рядка символів, створюється тег style, вказується його тип text/css і вміст стильового тега заповнюється потрібним вмістом. Завдання, як підключити CSS по ходу справи, у процесі роботи відвідувача сайту, вирішена!
    Як підключити CSS: від статики до динаміки
    Додавання в тіло документа нового тега автоматом робить доступними усі описані в ньому стилі. Підключити CSS в динаміці - це просто, практично і надійно.

    Популярі новини
    Загрузка...