Embedded Files
Каскадні таблиці стилів - CSS(Cascading Style Sheets) - мова, яку використовують для відображення HTML коду (кольори, шрифти, розташування та розміри блоків, інші аспекти). Це спрощує процес створення сторінок і поліпшує їх дизайн. (https://uk.wikipedia.org/wiki/CSS)
Використання стилів у веб-технологіях схоже на їх використання в текстових редакторах — текст спочатку вводять, а потім форматують, користуючись стилями.
Підключати аркуші стилів можна різними способами.
Inline-стилі. Впливають лише на цей тег. Записуються в конкретному тезі (h1...h6, p, hr, body та ін ) після атрибуту style= у лапках.
Embedded style. Впливають на всю сторінку. Записуються в <head> веб-документа. При описі стилів вказується парний тег <style> і в ньому - селектор - назва елемента (список назв елементів) і у фігурних дужках опис стилю.
Приклад 1.
Створіть папку Урок_3.
Завантажте файл kryla.html і збережіть у своїй папці Урок_3.
Запустіть VScode і оберіть папку зі своїм прізвишем (Open Folder)
Відкрийте файл kryla.html з допомогою браузера.
Скоригуйте html-код так, щоб результат відповідав зразку (допишіть тег </br>).
Не забувайте щоразу, вносячи зміни у код, зберігати його і переглядати результат з допомогою браузера.
Внесіть зміни у head документа, описавши стилі, які будуть застосовані до всього документа.
Результат має виглядати так:
Змініть стиль лише другого куплета, вирівнявши його за центром і задавши курсивний стиль тексту. Для цього в body в параграфі перед другим куплетом дописуємо стиль, що стосується лише цього параграфа.
<p style=" text-align: center; font-style: italic; " >
У style заголовку <head>... </head> опишіть стиль h1{ колір тексту - червоний, вирівнювання за центром} і застосуйте <h1> для назви вірша "Крила" .
Вставте тег <hr> в <body> веб-сторінки до і після назви вірша
В заголовку <head>... </head> до опису style додайте стиль для синьої горизонтальної лінії
hr {
background-color: #0000ff; /* колір лінії */
width: 400px; /* довжина лінії */
height: 20px; /* товщина лінії */
}
Вирівняйте підпис "Ліна Костенко" за правими краєм. Подумайте, який стиль треба описати для цього. Результат буде таким:
Самостійна 1. Забезпечте відображення тексту, заданого в файлі Less2_2.html, на веб-сторінці згідно зразка. Для форматування використайте стилі.
Page updated
Google Sites
Report abuse