Лабораторна робота № 4
Мета роботи: формування умінь створення HTML-документів із застосуванням каскадних таблиць стилів.
Короткі теоретичні відомості
Для чого потрібні таблиці стилів?
Ви створювали попередні сторінки, так як їх створювали раніше до появи каскадних таблиць стилів або CSS (Cascading Style Sheets).
Основні проблеми, з якими стикалися розробники сайтів до появи CSS:
Проблема позиціонування (розмітка сторінок). Хоча для цього стали використовувати таблиці (вони не були для цього призначені спочатку), вони не вирішили всіх проблем. Неможливо здійснити наступне:
- Не можна задати фіксовані розміри якого-небудь блоку. Наприклад, текстовий блок буде роз'їжджатися при переповненні (навіть якщо він в таблиці).
- Не можна задати фіксовані координати положення блоку на сторінці.
- Не можна накласти один блок на інший. Наприклад, спробуйте насунути картинку поверх таблиці або іншої картинки.
Друга проблема полягала в тому, що доводилося кожного разу ставити на сторінках розмір і колір шрифту, властивості елементів таблиці і т.д. Це сильно збільшував розміри сторінки, а значить, вона повільніше завантажується. У разі якщо вам захотілося змінити колір або розмір шрифту, вам довелося б редагувати всі сторінки.
Третя проблема полягала в тому, що всі браузери мають індивідуальні настройки. Наприклад, в браузері можна збільшити шрифт, що призведе до спотворення всієї сторінки.
За допомогою CSS ці проблеми можна вирішити.
Способи застосування CSS
Існує три способи застосування таблиць стилів:
Внутрішні таблиці стилів (Inline Style Sheets) - за допомогою спеціального атрибута поміщаються прямо в HTML теги.
приклад
приклад
Як можна помітити, код Inline Style Sheet вийшов більше ніж HTML. Тому ISS слід використовувати, тільки якщо необхідно задати певному елементу свій індивідуальний стиль.
За допомогою додаткового атрибута style ми можемо визначити потрібні нам стильові параметри в будь-якому тезі. Це найлегший спосіб, і діє він в межах лише одного тега. Але уявіть, наскільки виросте розмір файлу, і наскільки незручно буде його виправляти, якщо ми будемо вказувати стиль у кожного тега.
Глобальні таблиці стилів (Global Style Sheets) - визначають стиль елементів у всьому документі.
Для цього використовується тег