Лекція №4
Тема: Форматування тексту на основі використання таблиць стилів CSS
На даний час все більшого застосування набуває форматування тексту за допомогою стилів, використовуючи каскадні таблиці стилів CSS (Cascading Style Sheets).
Таблиця стилів - це текстовий файл, який створюють за допомогою мови CSS - Cascading Style Sheets - чи іншої.
CSS придумані спеціально для розширення можливостей HTML. Розробила специфікації каскадних таблиць відома фірма Microsoft.
Стиль – це набір правил оформлення та форматування, який можна застосувати до різних елементів сторінки.
Каскадні аркуші стилів, (так звані CSS, Cascading Style Sheets) містять опис формату частини або всього тексту. Якщо заданий аркуш стилів, то різні теги можуть просто посилатися на нього і не містити великої кількості атрибутів. Аркуші стилів назвали каскадними тому, що в одному документі можна описати кілька аркушів, браузер використовуватиме їх каскадом, відповідно до пріоритету цих описів.
Отже, каскадні аркуші стилів – це набори тегів HTML, до яких додаються параметри, що змінюють їхні властивості.
Наприклад: P {font-size:40pt; color:green; font-family:"Comic Sans MS"}. Даний каскадний аркуш стилів містить параметри тега абзаца <P>, які встановлюють розмір шрифта – 40 пунктів, колір шрифта – зелений, ґарнітура шрифта – Comic Sans MS. У документі досить вказати тег <P>… </P>, що автоматично надаватиме даному абзацові вказаного оформлення.
Таблиця стилів складається з правил, а правило - з назви тега чи списку назв тегів і описів стилів, які діятимуть у межах цих тегів деякого htmlфайлу.
Опис стилю - це послідовність пар <властивість>: <значення>, які записують через крапку з комою та охоплюють фігурними дужками.
Імена властивостей складаються з одного чи декількох англійських слів, що записуються через риску. Властивість діє лише в межах тега, зазначеного у відповідному правилі.
Cпособи зв'язку каскадних аркушів стилів з HTML-документом
Зовнішній аркуш стилів
Даний аркуш стилів існує у вигляді окремого текстового файла з розширенням .css (бажано розташовувати цей файл у тій папці, де міститься зв'язаний з ним HTML-документ). Файл *.css підключається до HTMLдокумента за допомогою тега <LINK>, який записується у розділі <HEAD>, наприклад:
<LINK REL="stylesheet" TYPE="text/css" HREF="mystyle.css">
Атрибути REL та TYPE є зарезервованими іменами, вони вказують браузеру на те, що сторінка використовуює каскадні аркуші стилів. Атрибут HREF вказує на ім'я файла (mystyle.css).
Приклад 1а. Зовнішні стилі
Оформимо веб-сторінку за допомогою зовнішніх аркушів стилів.
Відкриємо текстовий редактор Блокнот і наберемо визначення тега <P>.
P {font-size:40pt; color:green; font-family:"Comic Sans MS"}
Збережемо файл під іменем mystyle.css.
У текстовому редакторі Блокнот створимо файл з наступним змістом:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"> <title>приклад використання CSS </title>
</head>
<body>
<P> Цей текст відповідає призначенням в аркуші стилів, що міститься у файлі mystyle.css, тобто розмір шрифта – 40 пунктів, колір шрифта – зелений, а ґарнітура – Comic Sans MS.
</p>
</body>
</html>
Збережемо цей файл під іменем pryklad1.html у тій самій папці, де збережений файл mystyle.css.
Відкриємо файл pryklad1.html за допомогою браузера. Хоча в документі pryklad1.html не вказано жодних параметрів для тегу <p>...</p>, текст абзацу набув властивостей, що описані в зовнішньому аркуші стилів:
Перевага такого методу підключення CSS полягає у тому, що одна таблиця стилів може підключатися до великої кількості документів, і ці документи матимуть єдине стильове оформлення.
Внутрішній аркуш стилів
Внутрішній аркуш стилів (Embedded Style Sheet) розміщується безпосередньо в розділі <HEAD>, всередині блока, що відзначений тегами
<STYLE>…</STYLE>.
<HEAD>
<STYLE>
Тег {властивість1: значення1; властивість2: значення2, …, властивістьn: значенняn}
</STYLE>
</HEAD>
У фігурних дужках через крапку з комою перелічуються властивості та їхні значення, причому між властивістю та її значенням ставиться двокрапка. Розглянутий нами вище приклад можна представити на основі внутрішніх таблиць стилів наступним чином:
Приклад 1б. Внутрішні стилі
<html>
<head>
<title>приклад використання CSS </title> <style type="text/css">
P {font-size:40pt; color:green; font-family:"Comic Sans MS"}
</style>
</head>
<body>
<P> Цей текст відповідає призначенням в аркуші стилів, що міститься у файлі mystyle.css, тобто розмір шрифта – 40 пунктів, колір шрифта – зелений, а ґарнітура – Comic Sans MS.
</p>
</body>
</html>
Приклад 2. Визначимо стилі заголовків першого та другого рівнів шляхом використання тега <STYLE>.
<html>
<head>
<style>
h1 {font – size:48pt;color:Red}
h2 { font – size:20pt;color:Blue}
</style>
<body>
<h1> Для заголовка першого рівня визначений розмір 48pt, а колір тексту – червоний </h1>
<h2> Для заголовка другого рівня визначений розмір 20pt, а колір тексту – синій </h2>
Для цього тексту стиль не застосований, для відтворення тексту використовуються атрибути за замовчуванням.
</body>
</html>
Зауваження. В даному прикладі, в описі стилю змінено оформлення заголовків <h1> та <h2>. Зокрема, для заголовка <h1> призначено розмір 48 пунктів і червоний колір. Для заголовка <h2> визначено розмір 20 пунктів і синій колір.