Підручник HTML

Застосування таблиць стилів

Трудомісткий процес створення веб-сторінок можна полегшити, скориставшись спеціальними технологіями розробки, а також різноманітними сервісами, які зазвичай надаються провайдерами. Одним із найважливіших допоміжних елементів, що полегшують створення сайтів, є так звані каскадні таблиці стилів (Cascading Style Sheets, CSS), призначені для централізованого налаштування зовнішнього вигляду сторінок.

НТМL завжди підтримував концепцію стилів – готових типів форматування тексту, призначених для веб-сторінок. До вбудованих стилів НТМL відносяться стиль тіла сторінки, що використовується для неформатованого тексту, і стилі заголовків (від до ). Спочатку в НТМL не існувало засобу зміни параметрів стилів - до того часу, поки винайшли каскадні таблиці стилів. Вони здійснили справжню революцію в галузі створення та структурування веб-сторінок та відкрили перед дизайнерами найширші можливості для творчості. Таблиці стилів дозволяють реалізувати Безліч цікавих можливостей, найважливішими з яких вважаються:

• зміна вигляду тексту та інших об'єктів на всіх сторінках сайту без редагування цих сторінок;
• позиціонування та створення анімаційних ефектів для тексту та інших об'єктів на сторінках.

Далі йтиметься про створення та застосування стилів, а також розміщення об'єктів на сторінках.

Концепція таблиці стилів

Таблицею стилів називається набір стилів форматування тексту, що визначаються веб-дизайнером, та інших об'єктів, що розміщуються на сторінках сайту. Редагуючи таблиці стилів, дизайнер змінює вигляд об'єктів, не вносячи зміни безпосередньо в самі веб-сторінки.

Для використання технології CSS необов'язково вручну писати НТМL код таблиці стилів, а потім, знову ж таки вручну, пов'язувати елементи сторінок зі стилями цієї таблиці. Останні версії найпопулярніших засобів розробки веб-сторінок підтримують технологію CSS або хоч би її найважливіші елементи.

Типи таблиць стилів

Оголошення стилів

Стилі задаються всім стандартних елементів НТМL, зокрема абзаців , і . За допомогою властивостей стилю визначаються основні параметри тексту, наприклад розмір, шрифт, відступи. Значення властивості можна задати так:

Перевизначення стилів НТМL із використанням класів

У попередньому розділі розповідалося, як змінювати стилі стандартних НТМL-елементів документа, таких як абзаци та заголовки. Чи можна створити власний стиль? Скажімо, на сайті дитячої поезії для назв віршів має застосовуватися один стиль, а їхнього тексту — інший.

Визначення стилів за допомогою ідентифікаторів

Стиль, визначений у вигляді класу, використовується для форматування будь-якої кількості елементів сторінки. Якщо стиль на сторінці використовується не більше одного разу, його можна визначити за допомогою ідентифікатора. Ідентифікатор завжди починається із символу "#": і може бути застосований до будь-якого розташованого на сторінці об'єкта, наприклад до тексту:

Створення текстових стилів вручну

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

Створення впровадженої таблиці стилів

Застосування стилів до веб-сторінки

Визначаються дизайнером стилі (у наведеному вище прикладі це класSIDEBAR і стандартний стиль Н3) автоматично застосовуються до всіх елементів, що позначені заданими тегами. Так, всі заголовки, що форматуються за допомогою тега, будуть виводитися шрифтом Desdemona зеленого кольору або Courier, якщо на комп'ютері немає першого шрифту. Щоб вказати, якого класу належить конкретний тег, потрібно скористатися атрибутом CLASS: У разі клас застосовується до тегу абзацу . Але взагалі його можна застосовувати до будь-яких тегів відповідного типу (наприклад, текстовий стиль до текстового тегу, як у даному випадку). Для застосування класу до фрагмента тексту скористайтесь тегом:

Створення зовнішньої таблиці стилів

Зовнішня таблиця стилів - це текстовий файл, який містить лише визначення стилю. Він має розширення CSS (наприклад, mystyles.css). Зовнішні таблиці стилів зазвичай зберігаються в тому ж каталозі, що й веб-сторінки, або якщо використовується кілька таблиць стилів, — в окремому каталозі. У розділі кожної веб-сторінки, де використовуються стилі із зовнішньої таблиці, потрібно увімкнути тег : Замініть mystyles.css ім'ям файлу своєї таблиці стилів. Атрибути REL і ТYРЕ повинні мати ті ж значення, що й у наведеному рядку, вони вказують на використання таблиці стилів CSS. (У майбутньому, можливо, з'являться таблиці стилів інших типів.)

Використання стилів для форматування тексту

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

Щоб визначити стиль форматування тексту, потрібно тег, що містить текст, що форматується, доповнити атрибутом style="властивості". Наприклад, якщо абзац має бути виведений великим шрифтом Arial синього кольору, його можна відформатувати так:

Тег використовується для форматування тексту в абзаці:

---