У цьому підручнику для створення HTML і CSS файлів ми будемо використовувати редактор Notepad ++, він призначений для користувачів Microsoft Windows і всі приклади будуть виконані саме у ньому.

Якщо ж у вас Mac, то ви можете виконувати приклади у редакторі Brackets, він як і Notepad ++абсолютно безкоштовний. Щодо редактора Brackets, то він підходить і для користувачів Microsoft Windows, Ви можете згодом вибрати, що вам ближче.

Створення внутрішньої таблиці стилів

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

Крок 1: Відкрийте текстовий редактор

Натисніть кнопки WIN + R одночасно (аналог Пуск - Виконати), при цьому відкриється діалог «Виконати»впишіть та натисніть Enter (відкриється програма ), або запустіть програму через її ярлик.

Перед Вами відкриється основне вікно програми:

Крок 2: Створіть структуру документа

Скопіюйте або впишіть у редактор наступний HTML код:

</span>Внутрішня таблиця стилів

У коді прикладів цього підручника я даватиму додаткові коментарі, виділені світло-зеленим кольором. HTML для створення коментарів у вашому коді використовується спеціальний тег, текст всередині такого елемента не відображається браузером. У CSS коді для додавання коментаря необхідно текст коментаря помістити в таку конструкцію: /* текст коментаря */. Коментарі в CSS коді ви можете робити як всередині вбудованих стилів, так і зовнішніх (в окремому файлі).

Крок 3: Додати вбудовані стилі

Наступним кроком додайте до вашої сторінки вбудовані стилі: для заголовка першого рівня колір тексту червоний (color: red), а для абзаців блакитний (color: blue). Крім того, для заголовка першого рівня ми зробимо вирівнювання тексту центром (text-align : center ). Перевірте, щоб кожне CSS властивістьі його значення було розділено двокрапкою, а наприкінці кожного оголошення стояла крапка з комою.

</span>Внутрішня таблиця стилів

Як добре, що я займаюся саморозвитком.

Я вивчу CSS за місяць, а то й швидше

Крок 4: Перегляд HTML сторінки у браузері

Відкрийте приклад у браузері та переконайтеся, що результат нашого прикладу відповідає зображенню:

З'єднання зовнішньої таблиці стилів

Зараз ми з Вами створимо окремий файл, який міститиме таблицю стилів та підключимо його до нашого HTML документу.

  1. У програмі Notepad++ створіть новий порожній файл та збережіть його під ім'ям page.css (при збереженні файлу необхідно вибрати Cascade Style Sheets *.css) у тій же папці, де ви створювали HTML документ.
  2. Перенесіть із попереднього прикладу код CSS (вміст тега

    Hello, world!

    У цьому прикладі показано зміну стилю заголовка

    . На веб-сторінці тепер достатньо вказати лише цей тег та стилі будуть додані до нього автоматично.

    Внутрішні стилі

    Внутрішній стиль є по суті розширенням для одиночного тега, що використовується на веб-сторінці. Для визначення стилю використовується атрибут style , яке значення вказуються за допомогою мови таблиці стилів (приклад 3).

    Приклад 3. Використання внутрішніх стилів

    Стилі

    Hello, world!

    Рекомендується використовувати внутрішній стиль для одиночних тегів або відмовитися від його використання взагалі, оскільки зміна ряду елементів стає проблематичною. Внутрішні стилі не відповідають ідеології структурного документа, коли вміст та його оформлення розділені.

    Усі описані методи використання CSSможуть застосовуватися як самостійно, і у поєднанні друг з одним. У цьому випадку необхідно пам'ятати про їхню ієрархію. Першим завжди застосовується внутрішній стиль, потім - таблиця глобальних стилів і в останню чергу - таблиця зв'язаних стилів. У прикладі 4 використовуються відразу два методи додавання таблиць стилів документ.

    Приклад 4. Поєднання різних способів підключення стилів

    Стилі

    Hello, world!

    Hello, world!

    У наведеному прикладі перший заголовок задається червоним кольором розміром 36 пікселів, а наступний зеленим кольором та іншим шрифтом.

    CSSрозшифровується, як "каскадні таблиці стилів" (від англ. Cascading Style Sheets). CSS - це сукупність параметрів, за допомогою яких відображається той чи інший елемент на веб-сторінці. Ці параметри можуть бути вказані як в окремому файлі, так і бути прописані безпосередньо в HTML-коді сторінки. Наприклад, на нашій веб-сторінці можуть бути такі елементи: заголовок статті, абзаци, цитати, виноски, картинки, відеоролики, посилання. Можна встановити конкретний стиль відображення — розмір, колір, товщину рамок та ін.

    При роботі з сайтом рекомендується використовувати окремий файл зі стилями, а не впроваджувати код зі стильовими налаштуваннями в окремі сторінки. Це помітно скоротить час, коли знаєш місце знаходження таблиці стилів, завжди можна оперативно знайти конкретний стиль і відредагувати. Файл стилів має розширення .css, назва у нього, як правило, style.css.

    Підключення CSS файлу

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

    1. Зв'язування.Цей спосіб використовується, коли необхідно задати стилі для всіх сторінок сайту в одному файлі. Цей спосібчасто використовується під час створення сайту. Щоб підключити таблицю стилів, використовується команда , яку необхідно розмістити в тілі .

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

    2. Вбудовування у теги документа.При цьому способі стиль конкретного елемента сторінки задається безпосередньо в HTML коді. Наприклад:

    Тут ми прописали стилі відповідно для контейнерів

    і . Ці стилі будуть застосовуватися виключно для них.

    Наведемо приклад таблиці стилів - створимо файл style.cssі пропишемо стилі:

    body ( font-family: Arial, Verdana, Sans-serif; /* Сімейство шрифтів */ font-size: 12pt; /* Розмір основного шрифту в пунктах */ background-color: #f0f0f0; /* Колір фону веб-сторінки * / color: #000000; /* Колір основного тексту */ ) h1 ( color: #a52a2a; /* Колір заголовка */ font-size: 24pt; /* Розмір шрифту в пунктах */ font-family: Georgia, Times, serif ; /* Сімейство шрифтів */ font-weight: normal; /* Нормальне зображення тексту */

    Тут ми поставили стилі для тіла сторінки і для заголовка

    . Також можна встановити конкретні стилі для будь-яких інших елементів сторінки веб-сайту.

    Тепер підключимо нашу таблицю стилів до сайту:

    Підключення CSS до сайту

    Привіт, Світ!

    Це моя перша сторінка зі стилями CSS

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

    Для додавання стилів до веб-сторінки існує кілька способів, які відрізняються своїми можливостями та призначенням. Далі розглянемо їх докладніше.

    Зовнішня таблиця стилів

    Стилі розташовуються в окремому файлі з розширенням css, для зв'язування HTML-документа з CSS-файлом застосовується елемент . Він розташований усередині , Як показано в прикладі 1.

    Приклад 1. Підключення зовнішніх стилів

    Стилі

    Заголовок

    Значення атрибуту rel у Завжди буде стиліти і залишається незмінним. Як значення href вказується шлях до CSS-файлу; шлях може бути заданий як щодо, і абсолютно. Зауважте, що таким чином можна підключати таблицю стилів, яка знаходиться на іншому сайті. У прикладі вище ми підключаємо кириличний шрифт Lobster із сайту Google Fonts.

    Вміст файлу style.css показано у прикладі 2.

    Приклад 2. Вміст файлу style.css

    H1 ( font-family: "Lobster", cursive; color: green; )

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

    Внутрішня таблиця стилів

    Стилі пишуться у самому HTML-документі всередині елемента

    Заголовок

    У цьому прикладі заданий стиль елемента

    , який потім можна використовувати на даній веб-сторінці (рис. 1). Зверніть увагу на те, що ми можемо спокійно комбінувати зі

    Заголовок 1

    Заголовок 2

    У даному прикладі для першого заголовка заданий червоний колір і розмір 36 пікселів за допомогою атрибуту style, для другого заголовка - зелений колір через елемент

    Заголовок 1

    Заголовок 2

    У цьому прикладі показано імпорт стильового файлу із сайту Google Fonts для підключення кириличного шрифту Lobster.