У цьому підручнику для створення HTML і CSS файлів ми будемо використовувати редактор Notepad ++, він призначений для користувачів Microsoft Windows і всі приклади будуть виконані саме у ньому.
Якщо ж у вас Mac, то ви можете виконувати приклади у редакторі Brackets, він як і Notepad ++абсолютно безкоштовний. Щодо редактора Brackets, то він підходить і для користувачів Microsoft Windows, Ви можете згодом вибрати, що вам ближче.
Створення внутрішньої таблиці стилів
Розглянемо приклад у якому ви створюватимете Вашу першу внутрішню таблицю стилів.
Крок 1: Відкрийте текстовий редактор
Натисніть кнопки WIN + R одночасно (аналог Пуск - Виконати), при цьому відкриється діалог «Виконати»впишіть та натисніть Enter (відкриється програма ), або запустіть програму через її ярлик.
Перед Вами відкриється основне вікно програми:
Крок 2: Створіть структуру документа
Скопіюйте або впишіть у редактор наступний HTML код:
У коді прикладів цього підручника я даватиму додаткові коментарі, виділені світло-зеленим кольором. HTML для створення коментарів у вашому коді використовується спеціальний тег, текст всередині такого елемента не відображається браузером. У CSS коді для додавання коментаря необхідно текст коментаря помістити в таку конструкцію: /* текст коментаря */. Коментарі в CSS коді ви можете робити як всередині вбудованих стилів, так і зовнішніх (в окремому файлі).
Крок 3: Додати вбудовані стилі
Наступним кроком додайте до вашої сторінки вбудовані стилі: для заголовка першого рівня колір тексту червоний (color: red), а для абзаців блакитний (color: blue). Крім того, для заголовка першого рівня ми зробимо вирівнювання тексту центром (text-align : center ). Перевірте, щоб кожне CSS властивістьі його значення було розділено двокрапкою, а наприкінці кожного оголошення стояла крапка з комою.
Як добре, що я займаюся саморозвитком.
Я вивчу CSS за місяць, а то й швидше
Крок 4: Перегляд HTML сторінки у браузері
Відкрийте приклад у браузері та переконайтеся, що результат нашого прикладу відповідає зображенню:
З'єднання зовнішньої таблиці стилів
Зараз ми з Вами створимо окремий файл, який міститиме таблицю стилів та підключимо його до нашого HTML документу.
- У програмі Notepad++ створіть новий порожній файл та збережіть його під ім'ям page.css (при збереженні файлу необхідно вибрати Cascade Style Sheets *.css) у тій же папці, де ви створювали HTML документ.
- Перенесіть із попереднього прикладу код CSS (вміст тега
Hello, world!