ЛПР №19 Створення та підключення стилю CSS.
Теоретичні відомості
Поняття про таблиці каскадних стилів. Стиль – це набір правил оформлення та форматування, який можна застосовувати до різних елементів веб-документа. У разі використання стандартної мови HTML для надання кільком елементам певних властивостей (наприклад, призначення стилю шрифту) доводиться здавати ці властивості для кожного елемента. Використання таблиць стилів дає змогу уникнути цього, оптимізувавши розробку веб-сайтів. Стилі дають змогу позицію вати елементи сторінки (наприклад, тексти і графіку), задаючи координати. Крім того, таблиці стилів часто використовують під час створення так званих динамічних сторінок.
Таблиці каскадних стилів (CSS, Cascading Style Sheets) містять параметри форматування частини або всього тексту веб-сторінки. Якщо таку таблицю підключено, то у тегах можна просто вказувати посилання на неї, а не задавати велику кількість атрибутів. У цьому випадку стилі названі каскадними тому, що в одному документі їх можна описати кілька, і браузер використовуватиме їх каскадом відповідно до їхнього пріоритету.
Таблиці каскадних стилів – це передусім набори параметрів, що змінюють властивості тегів HTML. Такі набори називають ще визначенням тегів. Наприклад:
P {font-size: 40pt; color: green; font-family: “Comic Sans MS”}
Тут задано параметри для тегу абзацу <P>, які встановлюють розмір шрифту 40 пунктів, колір шрифту – зелений, гарнітуру - Comic Sans MS. У документі достатньо ввести теги <P> … </P> із текстом абзацу, щоб автоматично адати йому зазначеного оформлення.
Параметрів форматування, які можна задавати за допомогою стилів, досить багато. Це зокрема:
¨ background – колір тла;
¨ font-family – стиль шрифту (гарнітура);
¨ font-size – розмір шрифту;
¨ font-weight – жирність шрифту;
¨ color – колір шрифту;
¨ text-decoration –оздоблення тексту;
¨ text-align – вирівнюваня тексту;
¨ margin-top – відступ від верхнього рядка абзацу;
¨ line-height – міжрядкова відстань.
Застосування каскадних стилів у HTML-документах. Є три способи зв’язку каскадних стилів із HTML-документом: підключення зовнішньої таблиці стилів; безпосередньо в тегах абзаців і заголовків.
Підключення зовнішньої таблиці стилів. Зовнішня таблиця стилів (External Style Sheet) – це текстовий файл із розширенням .css. Його підключають до HTML-документа за допомогою тегу <LINK>, який записують у розділі <HEAD>, наприклад:
<LINK REL=”stylesheet” TYPE=”text/css” HREF=”mystyle.css”>
Атрибути REL та TYPE вказують браузеру на те, що сторінка використовує таблиці каскадних стилів. Атрибут HREF задає адресу файлу (mystyle.css).
Завдання Змініть властивості другого абзацу, застосувавши до нього будь-які стилі. Оформіть (змініть стилі) на свій смак.
<!DOCTYPE html>
<html>
<head>
<title> Львів</title>
</head>
<body>
<h1 style="text-align:center; font-size: 150%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #00f"> Львів</h1>
Львів заснований королем Данилом Романовичем в середині 13 століття. Близько 1272 року місто стало столицею Галицько-Волинського князівства.
<p >В добу Середньовіччя Львів був важливим торгівельним центром. За австрійського панування місто стає осередком українського та польського національно-визвольних рухів.
<p style="font-size: 110%; font-family: Arial; color: #00ff44">Після розпаду Австро-Угорщини був столицею Західноукраїнської народної республіки. До Другої світової війни належав Польщі, за Пактом Молотова — Ріббентропа анексований Радянським Союзом.
<h1>Клімат</h1>
<p>Львів характеризується найбільшою кількістю опадів та найнижчими літніми температурами серед всіх обласних центрів України, що спричинено чи не найменшою континентальністю місцевого клімату з-поміж великих міст України.
</body>
</html>