Інформатика – Поглиблений рівень

Безкоштовно

Ніхто не записаний

Урок 95. Каскадні таблиці стилів

Прочитайте!

CSS – це спеціальна мова (мова стилів), за допомогою якої описують вигляду документів (як і де відображати елементи веб-сторінки), написаних мовами розмітки даних. Найчастіше CSS використовується для документів, котрі розмічені мовою HTML, XHTML та XML.

Переваги використання CSS

Одна з головних переваг використання CSS – це можливість розділити зміст сторінки від її оформлення. Таке розділення дозволило покращити сприйняття та доступність змісту, зробити зміст більш структурованим та простим, прибрати повторення та ін.

Що дає використання CSS:

  • Відображати один і той же документ в різних стилях.
  • Декілька дизайнів сторінки для різних пристроїв. Наприклад, на екрані дизайн буде розрахований на велику ширину, під час друку меню не виводитиметься, а на смартфоні меню буде внизу, під вмістом.
  • Зменшення часу завантаження сторінок сайту за рахунок перенесення правил відображення в окремий CSS-файл. В цьому випадку браузер завантажує тільки структуру документа і дані, що зберігаються на сторінці, а стильові правила цих даних завантажуються браузером тільки один раз і кешуються.
  • Простота подальшої зміни дизайну. Не потрібно правити кожну сторінку, а лише змінити CSS-файл.
  • Додаткові можливості оформлення. Наприклад, за допомогою CSS-розмітки можна зробити так, щоб меню було завжди видно при скролінгу сторінки, або прибрати підкреслення у посилань.
  • Дозволяє створювати складну і пропрацьовану техніку дизайну.

Cпособи взаємодії таблиці стилів з html-файлом:

  • зв’язування;
  • імпортування;
  • вбудовування (використання стильових класів).

Зв’язування

Таблицю стилів створюють і зберігають в окремому файлі з розширенням css. Таку таблицю називають зовнішньою. Щоб зв’язати основний файл з такою таблицею стилів, у середині тега <head> застосовують одинарний тег <link> з інформацією про таблицю.

<head>

<link href=”/адреса таблиці стилів”

      type=”text/css”

       rel=”stylesheet”>

</head>

Тут

  • href=”адреса таблиці стилів”— адреса розташування файлу,
  • type=”text/css”— опис типу файлу,
  • rel=”stylesheet”— вказівка на відношення основного файлу з файлом таблиці стилю.

Імпорт

Це те саме, що і зв’язування, але взаємодію файлів забезпечують засобами тегу <style> і такої вказівки:

@import URL(адреса таблиці стилів)

Вбудовування (використання стильових класів)

Якщо таблицю створено лише для деякого конкретного html-файлу, то її розташовують у цьому файлі в контейнері <style>. Таку таблицю стилів називають внутрішньою або вбудованою. Також стиль можна вбудувати безпосередньо в html-тег за допомогою атрибуту <style>. Наприклад, контейнер

<span style=”color: blue”>Blue </span>

створює блок з текстом синього кольору: Blue.

Таблиця стилів складаєтся з правил, а правило — з назви тега (селектора) чи списку назв тегів і описів стилів, які діятимуть у межах деякого html-файлу.

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

Загальний вигляд правила такий:

Селектор

{властивість1: значення1;

         властивість2: значення2; …

         властивістьN: значенняN;}

Наприклад, для виведення усіх абзаців червоним кольором застосовують таке правило:

p { color: red;}

Закріплення нового матеріалу

Повторимо правила ТБ в кабінеті інформатики та при роботі за комп’ютером.

  •  Відкрийте файл створений на попередніх уроках index.html.
  • Увійдіть у редактор коду, встановлений на вашому комп’ютері. Створіть файл style.css.
  • Збережіть файл у тій самій теці, де ви зберегли файл index.html, створений на попередньому уроці.
  • Відкрийте файл index.html у редакторі коду. Додайте у блок <head> таку команду: <link rel=”stylesheet” type=”text/css” href=”style.css”>
  • Збережіть модифікований файл.
  • Перегляньте результат браузером.

Поексперементуйте з кольором тексту і фону, а також із шрифтами.

Продемонструйте виконане завдання вчителю.

0.00 на основі 0 рейтингів

5 зірок
0%
4 зірок
0%
3 зірок
0%
2 зірок
0%
1 зірок
0%