Стиль-2

Стилі, які описують властивості елемента сторінки, і описання якого знаходиться безпосередньо в рядку елемента, називається inline style – "стилем в рядку":

<p style="color:red;">This is a paragraph.</p>

Так записаний стиль було використано у попередньому завданні.

Проте таке оформлення кожного елемента вкрай незручне. До того ж, багато однорідних елементів мають однакове оформлення.

Але можна описати потрібний стиль елемента один раз так, щоб всі такі елементи на сторінці мали цей стиль.

Так описаний стиль називається internal style ("внутрішній стиль", тобто, стиль всередині цілої сторінки).

Цей стиль описується за допомогою тегу <style></style>. Такий опис стилів розміщується в розділі <head></head>.

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

Пояснення, приклади і тренування можна знайти на сторінці w3schools.

Якщо потрібно якомусь елементу надати особливого форматування, можна це форматування також вказати не безпосередньо inline, а в розділі стилів internal. Для цього елементові треба дати назву – ідентифікатор (id), а потім відповідним чином описати для нього стиль.

Пояснення, приклади і тренування можна знайти на сторінці w3schools.

https://www.w3schools.com/html/html_css.asp

https://www.w3schools.com/html/html_id.asp

Завдання Стилі-2

Написати невелику розповідь: Як я провів (провела) літо.

У своїй папці сайту потрібно створити новий файл style.html.
У файлі style.html написати заголовок завдання.
Кожне речення написати як окремий абзац (paragraph).
Створити на сторінці internal-стиль для заголовка.
Створити internal-стиль для абзаців (наприклад: тло, колір, шрифт, розмір).
Двом абзацам надати кожному свій ідентифікатор і для них окремо створити кожному свій стиль.
У файлі index.html додати заголовок Завдання Стилі-2 і зробити з нього гіперпосилання на сторінку style.html

Для посилання із сторінки на іншу сторінку потрібно використати відносне посилання. Не можна просто скопіювати адресу файла на комп'ютері, тому що тоді посилання не працюватиме навіть якщо перемістити папку в інше місце на цьому комп'ютері, а тим більше, якщо сайт розмістит в Інтернеті.

Отже, нехай ми хочемо на сторінці page1.html розмістити посилання на сторінку page2.html і обидві сторінки знаходяться в тій самій папці. Тоді достатньо написати;

<a href="page2.html">текст посилання</a>.

Якби, наприклад сторінка була в підпапці folder, тоді було б:

<a href="folder/page2.html">текст посилання</a>.

Детальніше про шляхи до файлів: https://www.w3schools.com/html/html_filepaths.asp

Останні зміни: 28 03 2022