Embedded Files
Каскадні таблиці стилів (англ. Cascading Style Sheets, або скорочено CSS) — спеціальна мова, що використовується для опису зовнішнього вигляду сторінок, написаних мовою розмітки даних. Основна ідея CSS полягає в тому, щоб відокремити дизайн документа від його вмісту. CSS відповідає за оформлення і зовнішній вигляд HTML-коду, тоді як HTML — за зміст та логічну структуру документа. Можливість роботи зі стилями здавна включають в розвинені видавничі системи і текстові редактори, тим самим дозволяючи одним натисканням кнопки надати тексту заданий, заздалегідь встановлений вид. Якщо таку таблицю підключено, то у тегах можна просто вказувати посилання на неї, а не задавати велику кількість атрибутів. У цьому випадку стилі названі каскадними тому, що в одному документі їх можна описати кілька, і браузер використовуватиме їх каскадом відповідно до їхнього пріоритету.
Конструкція СSS, яка відповідає за зовнішній вигляд певного елемента HTML, називається CSS-правилом. Усі CSS-правила складаються із селектора та блоку оголошень. Блок оголошень містить одне або кілька оголошень, розташованих у фігурних дужках. Усередині блоку оголошень знаходяться пари CSS-властивість — значення, розділені крапкою з комою:
Що дає використання CSS:
Що дає використання CSS:
Відображати один і той же документ в різних стилях.
Декілька дизайнів сторінки для різних пристроїв. Наприклад, на екрані дизайн буде розрахований на велику ширину, під час друку меню не виводитиметься, а на смартфоні меню буде внизу, під вмістом.
Зменшення часу завантаження сторінок сайту за рахунок перенесення правил відображення в окремий CSS-файл. В цьому випадку браузер завантажує тільки структуру документа і дані, що зберігаються на сторінці, а стильові правила цих даних завантажуються браузером тільки один раз і кешуються.
Простота подальшої зміни дизайну. Не потрібно правити кожну сторінку, а лише змінити CSS-файл.
Додаткові можливості оформлення. Наприклад, за допомогою CSS-розмітки можна зробити так, щоб меню було завжди видно при скролінгу сторінки, або прибрати підкреслення у посилань.
Дозволяє створювати складну і пропрацьовану техніку дизайну.
Таблиці стилів зазвичай створють окремо від html-файлу.
Cпособи взаємодії таблиці стилів з html-файлом:
зв'язування;
імпортування;
вбудовування (використання стильових класів).
Зв'язування
Таблицю стилів створюють і зберігають в окремому файлі з розширенням .css. Таку таблицю називають зовнішньою. Щоб зв'язати основний файл з такою таблицею стилів, у середині тега <head> застосовують одинарний тег <link> з інформацією про таблицю.
<head>
<link href="адреса таблиці стилів"
type="text/css"
rel="stylesheet">
</head>
Тут
href="адреса таблиці стилів" — адреса розташування файлу,
type="text/css" — опис типу файлу,
rel="stylesheet" — вказівка на відношення основного файлу з файлом таблиці стилю.
Наприклад:
<LINK REL = "stylesheet" TYPE = "text/css" HREF="mystyle.css">
Імпорт
Це те саме, що і зв'язування, але взаємодію файлів забезпечують засобами тегу <style> і такої вказівки:
@import URL(адреса таблиці стилів)
Вбудовування (використання стильових класів)
Якщо таблицю створено лише для деякого конкретного html-файлу, то її розташовують у цьому файлі в контейнері <style>. Таку таблицю стилів називають внутрішньою або вбудованою. Також стиль можна вбудувати безпосередньо в html-тег за допомогою атрибуту <style>. Наприклад, контейнер
<span style="color: blue">Blue </span>
створює блок з текстом синього кольору: Blue.
Таблиця стилів складаєтся з правил, а правило — з назви тега (селектора) чи списку назв тегів і описів стилів, які діятимуть у межах деякого html-файлу.
Опис стилю — це послідовність пар властивість: значення, які записують через крапку з комою у фігурних дужках.
Загальний вигляд правила такий:
Селектор{властивість1: значення1;
властивість2: значення2; …
властивістьN: значенняN;}
Наприклад, для виведення усіх абзаців червоним кольором застосовують таке правило:
p { color: red;}
Проаналізуємо приклад складнішого правила для списку тегів.
h3, li{ color: green;
font-family: pragmatica;
font-size: 16pt;
text-align: left;
border-style: ridge;
border-width: 2mm;}
Браузер виведе всі заголовки третього рівня h3 і елементи списків <li> зеленим кольором, гарнітурою pragmatica розміру 16 пунктів, з вирівнюванням за лівим краєм вікна, рамкою товщиною 2 мм з видавленим контуром (ridge).
Каскадність CSS — це механізм, завдяки якому до елемента HTMLдокумента може застосовуватися більш ніж одне правило CSS.
Приклади кількох способів підключення CSS-коду до HTML-документа
Застосування inline-стилів (стилі, які підставляються безпосередньо в рядок).
2. Застосування таблиць стилів документа (document style sheets)
3. Застосування зовнішніх, або зв’язаних, стилів (external style sheets)
Практичне завдання
Практичне завдання
Увага! Під час роботи з комп'ютером дотримуйтеся вимог безпеки життєдіяльності та санітарно-гігієнічних норм.
Завдання:
Увійдіть у редактор коду, встановлений на вашому комп’ютері. Створіть файл style.css.
Наберіть наведену послідовність команд (рис. 11.42)
Збережіть файл у тій самій теці, де ви зберегли файл index.html, створений на попередньому уроці.
Відкрийте файл index.html у редакторі коду. Додайте у блок <head> таку команду:
<link rel="stylesheet" type="text/css" href="style.css">
Збережіть модифікований файл.
Перегляньте результат браузером.
Проаналізуйте, як відобразив браузер змінений файл.
Page updated
Google Sites
Report abuse