ЛПР №15 Створення та форматування HTML-документів.
Теоретичні відомості
Таблиці каскадних стилів (CSS, Cascading Style Sheets) містять параметри форматування частини або всього тексту веб-сторінки, які змінюють властивості тегів HTML.
Стилі названі каскадними тому, що в одному документі їх можна описати кілька, і браузер використовуватиме їх каскадом відповідно до їхнього пріоритету
Таблиці каскадних стилів дають змогу отримати результати, яких неможливо досягнути звичайними засобами HTML, а також визначити єдиний стиль оформлення для різних сторінок документа і швидко модифікувати його зміною відповідного параметра у таблиці стилів
Параметри форматування стилів
background — колір тла
font-family — стиль шрифту (гарнітура)
font-size — розмір шрифту
font-weight — жирність шрифту
color — колір шрифту
text-decoration — оздоблення тексту
text-align — вирівнювання тексту
Вправа 1. Задати каскадний стиль для заголовка і абзаца першим способом. Завантажити редактор Блокнот або за посиланням www.w3schools.com/html/tryit.asp?filename=tryhtml_default
<HTML>
<HEAD>
<TITLE> використовуючи атрибут style</TITLE>
</HEAD>
<BODY>
<H1 STYLE="color: Green">Перший спосіб: </H1>
<p STYLE="font-family:Segoe UI;font-size:18pt; color: blue">використовуючи атрибут style.</P>
</BODY>
</HTML>
Вправа 2. Задати каскадний стиль для абзаца другим способом
<HTML>
<HEAD>
<TITLE>Приклад використання CSS з використанням тегу <style></TITLE>
<STYLE>
P{font-family:Segoe UI;font-size: 18pt;color: red}
</STYLE>
</HEAD>
<BODY>
<P> Параграф 1. </P>
<P> Параграф 2. </P>
<P> Параграф 3. </P>
</BODY>
</HTML>
Вправа 3. Задати каскадний стиль для абзаца третім способом.
<HTML>
<HEAD>
<STYLE>
.style1 {font-size: 38pt; color: white; background-color: olive}
.style2 {font-size: 46pt; color: magenta; background-color: mistyrose}
</STYLE>
<TITLE>Приклад використання CSS</TITLE>
</HEAD>
<BODY>
<P CLASS=style1>До цього абзацу застосовано style1 </P>
<P CLASS=style2>До цього абзацу застосовано style2 </P>
</BODY>
</HTML>