Каскадні таблиці стилів (CSS) є одним із основних інструментів для завдання зовнішнього вигляду веб-сторінок. Вони дозволяють визначити такі властивості, як колір, розмір тексту, відступи та багато іншого. Щоб додати стилі до HTML-елементів, необхідно знати основні принципи роботи з CSS.
Перший крок у додаванні стилів до CSS – це створення файлу стилів. Він може бути зовнішнім файлом із розширенням .css або включений прямо в тег <style> всередині тега <head> HTML-документ. У файлі стилів або всередині тега <style> потрібно визначити селектор, який вказує на HTML-елемент, до якого будуть застосовуватись стилі. Селектори можуть бути класами, ідентифікаторами чи тегами.
Після визначення селектора необхідно вказати властивості стилю, які застосовуватимуться до вибраного елементу. Кожна властивість у CSS має ім'я та значення. Наприклад, можна вибрати колір тексту для вибраного елемента за допомогою властивості "color" і вказати його значення, наприклад "red". Крім того, можна встановити й інші властивості, такі як розмір шрифту, фоновий колір або відступи.
| Спосіб | Опис |
|---|---|
| Зовнішнє підключення | Створити окремий файл із розширенням .css та підключити його до HTML-документу за допомогою тега <link>. |
| Внутрішнє вбудовування | Використовувати тег <style> всередині розділу <head> HTML-документа для написання CSS правил. |
| Вбудований стиль | Прямо в атрибуті style HTML-елемента можна встановити стилі за допомогою CSS. |
| Важливість стилів | Використання ключового слова !important дозволяє пріоритезувати стилі. |
| Каскадування стилів | Різні CSS-правила можуть мати однаковий пріоритет, у такому випадку каскадування CSS визначає, які стилі будуть застосовані. |
| Спадкування стилів | Деякі CSS-властивості, такі як колір тексту або шрифт, успадковуються від батьківських елементів до дочірніх. |
| Псевдокласи та псевдоелементи | Використання псевдокласів та псевдоелементів дозволяє застосовувати стилі до елементів у певних станах або створювати додаткові елементи за допомогою CSS. |
| Селектори | Існують різні типи селекторів CSS, що дозволяють вибирати елементи для застосування стилів. |
Як додати стиль до CSS?
Щоб додати до елемента вбудований стиль, виконайте наступні дії:
- Виберіть елемент.
- На панелі CSS у блоці Вбудований стиль натисніть кнопку Додати властивість.
- Додайте властивості зі значеннями, щоб змінити стиль елемент.
Як додати стилі CSS до HTML?
Найбільш правильний варіант визначення загальних стилів для сайту – це підключення зовнішнього файлу CSS за допомогою тега <link>. В атрибуті href необхідно вказати URL-адресу файлу, що містить набір стилів CSS. Атрибути rel="stylesheet" та type="text/cssвказують, що вказаний файл є таблицею стилю у форматі CSS. Збережена копія
Як імпортувати стилі в CSS?
Виберіть елемент→стиль→імпорт стилів CSS. У вікні Імпорт стилів CSS у полі Ім'я файлу вкажіть ім'я файлу CSS, з якого потрібно імпортувати стилі. Щоб знайти файл, натисніть кнопку Огляд. У вікні Імпорт стилів CSS відображаються всі стилі, визначені у файлі CSS.