Створення таблиці стилів css

У цій статті розглянемо створення таблиці стилів, візьмемо невеликий і простий приклад.

Таблиці стилів знаходяться в окремому файлі з розширенням .css. цей файл пишеться як і html документ в звичайному Блокноті.

Для роботи з кодом (HTML, CSS, PHP і т.д.), рекомендую використовувати Чи не Блокнот, а програму NotePad ++
Дуже зручна програма, в ній підсвічується весь код, і якщо в коді допущені помилки, він перестає підсвічуватися.

В CSS немає тегів і атрибутів. Хоча багато їх так називають.
Структура таблиці стилів складається з ПРАВИЛ.
У ПРАВИЛІ існують селектори і блоки оголошення стилів. Селектори в перекладі з англійської select значить вибір. Тобто він вибирає тег до якого буде застосований стиль або стилі. Ось наприклад:

h2 в нашому випадку буде селектором, а все інше це блок оголошення стилів, який завжди полягає в фігурні дужки. Все разом буде ПРАВИЛО.

Блок стилів в свою чергу має властивості (позначені зеленим кольором) і значення цих властивостей. Властивості перераховуються через крапку з комою.
У цьому правилі визначаються властивості для всіх заголовків з тегом h2:

• розмір шрифту = 15 пікселів
• колір шрифту # 232D37

Тепер про те як застосувати правило до HTML-документу.

Для цього служить спеціальний тег
де style.css шлях до створеного вами файлу з розширенням .css. шлях може бути відносним або абсолютним (повністю з http). Файл може зберігається як в окремій папці, так і в одній папці, разом з файлом index.html.
Цей тег вставляється перед закриває . приклад:

І приклад файлу таблиці стилів CSS:

Тепер відкриваємо Блокнот і переписуємо туди (вручну) код. Спочатку HTML-файл, не забувайте зберегти з розширенням .html. потім CSS-файл, зберігаємо з розширенням .css.
Всі файли для зручності збережіть в будь-який порожній теці, наприклад www.

Ось що у нас вийде:

Як бачите в HTML-файлі ми не ставили ніяких атрибутів для тексту, вони задані у файлі CSS.
Таким чином можна задати стилі для будь-якого тега в HTML і підключити стилі до будь-якої кількості сторінок.

Тепер трохи потренуйтеся, поміняйте кольору, розмір шрифту і т.д.

Перейти до наступного уроку