Тема 14_02. Синтаксис і принцип роботи CSS

Як і будь-яка інша мова програмування, CSS має строго визначений синтаксис, тобто правила, за якими створюються таблиці стилів.

CSS – не HTML!!!

В CSS немає ні елементів, ні тегів, ні атрибутів.

Основною структурною одиницею в CSS являється правило, яке визначає, як буде виглядати той чи інший елемент в документі.

Структура правила:

Дане правило вказує на те, що всі заголовки першого рівня h1 в документі будуть відображатись синім кольором з розміром шрифту 14 пікселів.

Як видно з малюнку, спочатку вказується селектор.

В даному випадку селектор h1 показує, до якого html-елемента відноситься це правило.

Далі, безпосередньо за селектором, пишемо блок оголошення стилів, який обов’язково беремо у фігурні дужки.

Кожне оголошення в свою чергу складається із властивості та його значення.

Після властивості ставиться двокрапка.

Правило може містити в собі декілька оголошень. В такому випадку вони повинні бути відокремлені один від одного крапкою з комою. Після останнього оголошення крапку з комою можна не ставити.

Як підключити CSS таблицю до HTML документа?

Найбільша перевага CSS полягає в тому, що змінюючи стильові правила в зовнішній таблиці стилів, ми можемо керувати дизайном як завгодно великою кількістю сторінок.

Зовнішня таблиця стилів – це файл з розширенням.css (наприклад, style.css).

Якщо у нас є зовнішня таблиця стилів style.css і декілька html-сторінок, тоді на кожній html-сторінці необхідно прописати рядок:

Якщо файл style.css розташований у папці css, тоді рядок підключення зовнішньої таблиці стилів буде мати вигляд:

Такий рядок вказує браузеру, що він повинен використовувати правила відображення html-файлу із css-файлу.

Створимо файл index.html, папку css, в якій розташовуємо файл style.css.