IT_LW_5
.pdf
|
80 |
Лабораторна |
ОЗНАЙОМЛЕННЯ З ТЕХНОЛОГІЄЮ |
робота 5 |
КАСКАДНИХ ТАБЛИЦЬ СТИЛІВ (CSS) |
Мета:
1.Ознайомитись з правилами використання каскадних таблиць стилів.
2.Навчитись використовувати каскадні листи стилів для зміни зовнішнього виду Web-сторінки.
3.Навчитись управляти властивостями елементів Web-
сторінки.
Короткі теоретичні відомості
1. Загальні положення.
Каскадні таблиці стилів (CSS) це інструмент для поліпшення зовнішнього вигляду web-сайтів. Він допомагає заощадити багато часу при розробці html-сторінок і дає нові можливості у дизайні web-сайтів. CSS необхідні кожному, хто працює з web-дизайном. Використання
CSS вимагає знань основ HTML.
Для вивчення технології CSS достатньо використання простого текстового редактора і любого браузера. Можна використовувати текстовий редактор Notepad, який поставляється з Microsoft Windows,
або Pico для Linux та Simple Text для Macintosh.
На перших кроках вивчення CSS не доцільно користуватися такими програмами як FrontPage, DreamWeaver або Word. Ці просунуті програми сильно обмежать ваше просування в обраному напрямку.
Основним поняттям CSS є стиль - тобто набір правил оформлення й форматування, який може бути застосований до різних елементів сторінки. Іншими словами, можна сказати, що під стилем розуміють параметри шрифту, міжрядкові відстані, поля і таке інше.
При створенні декількох документів з однаковим оформлення можна використовувати файли-шаблони, єдиним змістом яких є опис стилів. Прикладом для створення і використання стилів є Microsoft
Word.
Для Web-сторінки розроблені аналогічні до Word засоби створення і зміни стилів. Ці засоби називаються Cascading Style Sheets (CSS) (Каскадні таблиці стилів), що визначаються специфікаціями Консорціуму Всесвітньої павутини (W3C).
Реалізація цих специфікацій відрізняється не тільки для різних браузерів, але й платформ Windows, Macintosh і т. д. В лабораторній
81
роботі ми розглянемо підмножину засобів, які однаково підтримуються як в Internet Explorer так і Mozilla Firefox.
Засоби CSS можна поділити на наступні категорії:
-керування позиціюванням,
-засоби для керування шрифтами,
засоби для керування фоновими кольорами й зображеннями, - засоби вирівнювання тексту.
2. Використання каскадних листів стилів.
Багато властивостей, що використовуються в CSS, подібні властивостям HTML. Наприклад, нам потрібен червоний колір фона web-сторінки:
В HTML це можна зробити так:
<body bgcolor="#FF0000">
За допомогою CSS того ж самого результату можна досягнути
так:
body {background-color: #FF0000;}
Видно, що ці коди більш менш ідентичні і в HTML і CSS. Цей приклад також демонструє фундаментальну модель CSS (рис. 5.1):
Рисунок 5.1 - Фундаментальна модель CSS
Автори повинні вказувати мову таблиці стилів для інформації про стиль, пов’язаний з документом HTML. Для з’ясування мови таблиці стилів для документа за замовчуванням необхідно застосовувати елемент META. Наприклад, щоб встановити за замовчуванням мову CSS, необхідно розташувати в розділі HEAD наступне оголошення:
82
<meta http-equiv="Content-Style–Type" content="text/css">
Можна створити лист стилів в окремому файлі. Цей лист записується в текстовий файл з розширенням css.
Для того щоб зв’язати файл css з HTML-файлом використовується дескриптор <LINK>:
<link rel=”stylesheet” href="mysheet.css" type=”text/css”>
Атрибут rel вказує на взаємозв’язок між поточним документом HTML та іншим документом. У даному випадку іншим документом являється лист стилів (stylesheet). В атрибуті type вказується мова програми, яка використовувалась при створені листа стилів, тобто css. Атрибут href вказує URL, на який робиться посилання.
Ви не зобов’язані зберігати лист стилів в окремому файлі. Ви можете впровадити лист стилів в HTML-файл. Стилі, що визначенні у впровадженому листі, діють тільки на HTML-код у середині цього файлу. Тому не можна використовувати цей лист стилів в декількох HTML-документах без копіювання його в кожний з них.
Для впровадження листа стилів у HTML-файл використовується дескриптор <STYLE>. Цей дескриптор слід розташовувати між дескрипторами <HTML> та <BODY>. Найчастіше його розміщують в заголовку (<HEAD>) для зручності, як це показано у лістингу 5.1
Лістинг 5.1 Шаблон для розміщення стилів
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<HTML>
3<HEAD>
4<TITLE>Шаблон для CSS</TITLE>
5<META NAME="Author" CONTENT="Л.Кравчук">
6<META HTTP-EQUIV="Content-Style–Type" content="text/css">
7<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
8CHARSET=windows-1251">
9<STYLE type=”text/css”>
10<!--
11Тут знаходяться визначення стиля
12-->
13</STYLE>
14</HEAD>
15<BODY>
16Це звичайний текст HTML
17</BODY>
18</HTML>
Найважливіший атрибут дескриптора <STYLE> – це атрибут type. Він визначає мову листів стилів.
83
Зв’язані та вкладенні листи стилів дозволяють визначати стилі для одного або декількох дескрипторів, наприклад: <BODY>, <H1>, <P>, <A>, <UL> та інших. Кожне визначення стилів називається правилом. Правило містить селектор, який являє собою дескриптор HTML (див. рис.1). Кожний селектор зв’язує визначення стилю з дескрипторами. Стиль визначається шляхом привласнення імені властивості значення.
Можна встановлювати декілька властивостей в межах одного селектора:
H1 {color: blue; font-size: 12pt; text-align:center}
У даному випадку браузер буде виводити заголовки синім кольором використовуючи шрифт розміром 12 пунктів, вирівнюючи текст у вікні браузера по центру. Для всіх інших властивостей браузер буде використовувати значення за замовчуванням.
Можна також групувати селектори разом і визначати правило для них як для групи. Наприклад:
P, UL, UL {font-size: 14pt}
У лістингу 5.2 показано синтаксис групування селекторів із визначенням правил для них
Лістинг 5.2 Синтаксис групування селекторів із їхніми правилами
1<html>
2<head>
3<style type=”text/css”>
4p {color: blue; font-size: 12pt; text-align: center}
5UL, H1 {font-size: 10pt}
6</style>
7</head>
8<body>
9<h1>Тут записується заголовок</h1>
10<p>Тут записується текст</p>
11<ul>
12Тут міститься список
13</u1>
14</body>
15</html>
3. Робота з класами в листах стилів.
Використовуючи клас можна визначити стиль певного дескриптора. Для цього спочатку треба визначити стиль класу, а потім звернутись до нього в дескрипторі, використовуючи атрибут class. Наприклад:
<head>
<style type=”text/css”>
84
.class_1 {color: red; font-size: 16pt; text-align: left} </style>
</head>
<body>
<h1 class=”class_1”>Цей заголовок буде мати форматування вказане у
.class_1 </h1>
<p class=”class_1”>Цей текст буде мати форматування вказане у .class_1
</p>
</body>
Можна визначати стиль будь-якого елемента, привласнюючи йому ідентифікатор (ID). Наприклад:
<html>
<head>
<style type="text/css">
#test {color: red; font-size: 15pt} </style></head>
<body>
<p id="test">Цей текст буде мати червоний колір та розмір шрифту 15pt</p> </body>
</html>
В HTML існує чотири псевдокласи для гіперпосилань (псевдоклас – це спеціальний селектор, який визначає як виглядають
HTML-елементи в певний момент): link, active, visited та hover. В цих псевдокласах визначається вигляд на Web-сторінці нормального, активного, відвіданого гіперпосилання, а також вигляд посилання при наведені на нього мишки. Наприклад:
a: link {color: blue} або a {color: blue} a: active {color: red}
a: visited {color: yellow} a: hover {color: green}
У результаті на Web-сторінці не відвідані гіперпосилання мають синій колір, активні – червоний колір, відвідані – жовтий колір. При наведені мишки на посилання воно змінює свій колір на зелений.
Нижче наведені найбільш корисні властивості листів стилів.
– Властивості фону:
1.Background-color. Значенням цієї властивості може бути одне з імен кольорів або RGB-значення. Наприклад, при визначенні стиля дескриптора <UL>, який змінює колір фону на синій, у всіх невпорядкованих списків HTML-файла буде синій фон.
2.Background-image. Ця властивість дозволяє встановити фон елемента у вигляді зображення. При цьому виникає ефект водяних знаків позаду елемента. Наприклад:
85
H1 {background-image: URL(http://www.server.com/Images/Ris_2.gif)}
або
H1 {background-image: URL(D:/Images/Ris_2.gif)}
3. Color. Ця властивість визначає колір переднього плану елемента.
– Властивості блоку:
1)Padding. Ця властивість визначає розмір простору між рамкою
івмістом. Верхній, правий, нижній та лівий простір до рамки визначаються таким чином: padding: 0.25cm 0.25cm 0.25cm 0.25cm.
Наприклад:
P {padding: 10pt 20pt 0pt 25pt}
– Властивості списків:
1. List-style-image. Ця властивість використовується для визначення зображення, яке броузер буде використовувати як мітки для пунктів списка. Значенням властивості може бути тільки URL зображення (в форматі URL (address)). Наприклад:
UL {list-style-image: URL(http://www.server.com/Images/Ris_3.gif)}
або
UL {list-style-image: URL(D:/Images/Ris_3.gif)}
2. List-style-position. Ця властивість визначає відносне розташування міток. Дана властивість приймає такі значення:
•Inside – текст пункту списка продовжується на наступному рядку під міткою.
•Outside – текст пункту списка продовжується на наступному рядку під текстом.
Приклад:
UL {List-style-position: Outside}
– Властивості шрифту:
1. Font-family. Ця властивість представляє список сімейств шрифтів. Можна вказати одно сімейство або список можливих сімейств, розділивши їх комами, наприклад:
P {font-family: Arial, Courner}
Якщо використовується гарнітура з назвою в декількох слів, то цю назву треба заключити у лапки. Наприклад:
P {font-family: “Times New Roman”, Arial}
86
2. Font-size. Ця властивість вказує на розмір шрифта в пунктах (pt), дюймах (in), сантиметрах (cm) або пікселях (px). Наприклад:
P {font-size: 15pt}
3. Font-style. Ця властивість дозволяє змінювати вигляд шрифта. Вона може приймати такі значення:
•normal – звичайний шрифт;
•oblique – похилий шрифт;
•italic – курсив.
Наприклад:
H1 {font-style: italic}
4. Font-weight. Ця властивість визначає товщину шрифта. Вона приймати такі значення:
•normal –звичайна товщина;
•bolder – жирніший;
•bold – напівжирний;
•lighter – світліший. Наприклад:
P {font-weight: bold}
Для визначення товщини шрифта також можна використовувати ряд чисел 100, 200, ... 900. Значення 400 відповідає звичайній товщині шрифта. Наприклад:
P {font-weight: 800}
– Властивості текста:
1. Letter-spacing. Ця властивість визначає інтервал між буквами в рядку текста. Якщо привласнити йому значення normal, то броузер сам буде встановлювати інтервал. Можна також примусово привласнити цій властивості певні значення: 1pt, 2pt, … Наприклад:
P {letter-spacing: 3pt}
2. Line-height. Ця властивість визначає відстань між базовими лініями двох сусідніх рядків. Можна використовувати абсолютні значення, а також привласнити значення normal. Наприклад:
P {line-height: 1.2}
3. Text-align. Ця властивість визначає вирівнювання тексту в елементі. Вона приймає такі значення:
•left – вирівнює текст по лівому краю;
•right – вирівнює текст по правому краю;
87
•center – вирівнює текст по центру;
•justify – вирівнює текст по ширині. Наприклад:
P {text-align: justify}
4. Text-decoration. Ця властивість додає в текст елементи оформлення, наприклад підкреслювання. Вона може приймати такі значення:
•none – відсутність елементів оформлення;
•underline – підкреслювання;
•overline – лінія над текстом;
•line-through – перекреслювання;
•blink – мерехтіння.
Наприклад:
H1 {text-decoration: blink}
5. Text-indent. Ця властивість використовується для створення відступу в першому рядку текста. Її значенням може бути будь-яка відстань. Наприклад:
P {text-indent: 1.25 cm}
4. Використання шарів.
За допомогою стилю можна створювати шари. Ці шари можна накладати один на другий у заданій послідовності.
Приклад створення шару:
#element_1 {position: absolute; top:50; left:20; width:100; height:80; z-index: 1}
Властивість position визначає позиціювання даного шару. Зазвичай цій властивості привласнюють значення absolute.
Властивості top, left приймають значення в пікселях відносно верхнього лівого кута вікна браузера або будь-якого іншого елемента (комірки таблиці, вікна фрейму і т.і.).
Властивості width та height дозволяють змінювати висоту та ширину прямокутної області, яку займає шар.
Властивість z-індекс визначає порядок накладання шарів.
Таким чином, Ви можете накласти декілька шарів в одній і тій же позиції, визначити порядок їх виведення, після чого убираючи шари по одному з використанням сценарію, створити просту мультиплікацію.
Приклад використання шарів:
<style type="text/css">
#layer_1 {position: absolute; top:20; left:20; width:400; height:400; z-index: 1} #layer_2 {position: absolute; top:20; left:20; width:200; height:200; z-index: 2}
88
</style>
<body>
<img id=layer_1 src="Backgrn.gif"> <img id=layer_2 src="Gal.gif"> </body>
Питання для самоперевірки
1.Що можна робити за допомогою CSS?
2.Що таке каскадні таблиці стилів? Поясніть на прикладах.
2.У чому полягає різниця між CSS та HTML?
3.Які переваги дає CSS веб-дизайнеру?
4.Яке програмне забезпечення необхідно мати для для використання CSS?
5.Яка модель лежить в основі базового синтаксису CSS
6.Як задають стилі у HTML-документі?
7. Який елемент використовується для того щоб зв’язати файл css з HTML-документом? Наведіть приклади.
8. Вкажіть основне призначення атрибутів REL і TYPE дескриптора <LINK>. Які значення вони можуть приймати? Наведіть приклади.
9. Який дескриптор використовується для впровадження листа стилів у HTML-файл. Приведіть приклад його використання.
10. Вкажіть основне призначення атрибуту TYPE дескриптора <STYLE>. Які значення він може приймати? Наведіть приклади.
11. Як задаються значення властивостям в листах стилів? Наведіть приклади.
12. Наведіть приклади роботи з класами в листах стилів.
13. Назвіть основні властивості фону та блоку. Поясніть їх призначення на прикладах.
14. Назвіть основні властивості списків та тексту. Поясніть їх призначення на прикладах.
15. Назвіть основні властивості шрифту. Поясніть їх призначення на прикладах.
16. Як за допомогою листів стилів можна створювати шари? Поясніть на прикладах.
Порядок виконання роботи
1. Створіть «Першу таблицю стилів (style sheet)», яка відображає текст, як показано на рисунку 5.2.
89
Рис. 5.2 – Перша таблиця стилів (файл Page1_L5)
Для цього виконайте наступні дії:
Запустіть текстовий редактор і створіть у ньому файл (шаблон) змістом якого є код, наведений у лістингу 5.1.
Створений шаблон збережіть під ім’ям Template_CSS.html у папці зі своїм прізвищем;
Відкрийте створений шаблон і змініть назву HTML-сторінки набравши у 4 рядку наступний код:
<TITLE>Перша таблиця стилів (тегова пара <style>-</style>)</TITLE>
Змініть зміст рядків 10-12, записавши наступний фрагмент коду, що описує властивості стилю для заголовків H2, H3:
H2 {Font-size: 48pt; Color: RED}
H3 {Font-size: 20pt; Color: BLUE}
Змініть зміст рідка 16, добавивши код, що відображає зміст HTML-сторінки:
<H1>Використання стиля всереди тегової пари <STYLE>… </STYLE> між тегами <HEAD>… </HEAD>
</H1>
<H2>Це стиль H2. Колір - червоний</H1> <H3>Це стиль Н3. Колір - синій</H2>
Це - звичайний стиль за замовчуванням
Збережіть створений файл під ім’ям Page1_L5.html у папці зі своїм прізвищем .
Відкрийте у вікні браузера створений файл і переконайтеся в тому, що з’являється вікно подібне до того, що показане на рис. 5.2.
2. Створіть Web-сторінку, яка демонструє випадок використання стилів у середині тегу. Як приклад, покажіть вивід фрагменту тексту