DHTML – динамічний HTML

Internet Explorer пропонує вам свій стиль, що називається за промовчанням. Цей стиль передбачає біле чисте тло, чорний колір шрифту, всі посилання підкреслені і синього кольору і т. д. Що якщо вам не подобається все це? Ви вже вмієте міняти різноманітні атрибути безпосередньо. Навіть якщо однакових за значенням об'єктів багато, ви вже вмієте застосовувати класи. Але є ще одна можливість. Для завдання всього стилю документа цілком застосовуються звані Ієрархічні Стилеві Таблиці (Cascade Style Sheets - CSS), які є набір установок властивостей різних об'єктів. Чимось вони нагадують класи, але якщо клас сходить всередині документа і може бути застосований, а може бути і ні, то CSS, якщо він підключений, то установки в ньому впливають безпосередньо на всі об'єкти в документі.

Далі розглядатимуться такі теми:

CSS дуже схожі на класи тільки з тією різницею, що в них описується стиль для вже відомого об'єкта. Для наочного прикладу, огляньте зараз свою кімнату (офіс, зал.), в якій ви знаходитесь. Напевно, ви побачите багато різних предметів (стіл, крісло, вікно, комп'ютер). Кожен з цих предметів-об'єктів має характеристики, і вам треба скласти список цих предметів та їх характеристик. Можливо у вас вийде щось таке:

стіл: колір - коричневий матеріал - дерев'яний комп'ютер: колір - білий матеріал - пластмаса призначення - для роботи

Звичайно, ви можете піти іншим шляхом, але тільки CSS складаються саме так, де замість предметів виступають об'єкти, та й їхні характеристики трохи інші. Наприклад, ось вам уривок такого документа:

body background-color: rgb(255,255,153); color: rgb(51,51,153); >

h1 color: rgb(255,0,0); font-family: arial, helvetica; >

Тут задається яким буде стиль елемента BODY та H1. Ті параметри, які не задано, залишаються за замовчуванням.

Створення CSS не потребує особливих зусиль і може бути виконане у простому блокноті, хоча для цих цілей і існують спеціальні програми, що полегшують роботу та наочно показують, яким буде виглядати майбутній документ із застосуванням цього стилю. Пошукайте такі програми у себе на диску чи у знайомих.

Існує два способи підключення CSS. Перший – задати її в елементі STYLE на початку документа, як клас. Це робиться так:

Цей документ

використовує стильові таблиці

У цьому прикладі на екрані ви побачите два рядки, що складаються з двох об'єктів: H1 і H2. Подивіться, на що перетворився стиль за промовчанням Internet Explorer. Адже ми не робили жодних вказівок у самому об'єкті щодо його стилю. Таким чином, хоч би скільки ви наробили об'єктів H1 і H2, їх стиль завжди буде таким, яким ви його вказали в стильовій таблиці.

Якщо вам подобається стиль, який ви створили, і ви хочете використовувати його у всіх своїх документах. Або ваш документ складається з безлічі HTML сторінок і у них повинен бути однаковий стиль, вам необов'язково щоразу вбивати рядки стильової таблиці на початку документа.

Отже, спочатку ви створюєте таблицю, дотримуючись вказаних вище правил. Потім, ви додаєте в елемент для включення таблиці стилів рядок подібний до наступного:

Ви можете динамічно змінювати ім'я файлу зі стильовою таблицею, відповідно змінюючи сам стиль. Ось функція, мовою JScript, яка при її виклику, якщо вже застосований будь-який стиль, прибирає його і підключає новий.

function change_style() if (document.styleSheets.href !=null) document.styleSheets.href = "newStyle.css"; >

Якщо стильова таблиця визначена всередині HTML-сторінки, можна додавати нові визначення за допомогою функції addRule (object, style). Де object – об'єкт, а style, відповідно, стильові установки. Ось приклад, у якому після натискання на кнопку, відбувається зміна стильової таблиці:

Це Заголовок 1

Це Заголовок 2

Це абзац. Клацніть на кнопку для зміни його стилю

Переглянувши сторінку з таким кодом, ви побачите, як відбувається зміна стилю шляхом додавання установки до таблиці стилів.

---