5.2. Застосування таблиць стилів css
Способи застосування стилів:
1. Створення та застосування стилів може бути локальним, тобто стилі можуть використовуватися для форматування частини документа. Для застосування внутрішніх стилів використовуються атрибут STYLE, теги <DIV>, <SPAN>.
Атрибут STYLE застосовується для визначення стиля певного елемента HTML – документа, його можна використовувати у різних тегах.
Наприклад,
<P STYLE="text-align:justify; border-style: dotted; border-width: thin"> Текст абзацу … </P>
Вирівнювання для тексту абзацу встановлено по ширині, абзац відображається у рамці у вигляді маленьких крапок.
Тег <DIV> надає можливість застосувати визначений стиль для групи елементів документа, що розташовані всередині контейнера <DIV>.
Наприклад, фрагмент коду документа визначає, що усі фрагменти (заголовок і елементи списку) виводяться з відступом першого рядка абзацу 40 пунктів.
<DIV STYLE="text-indent:40pt"> <H2> Документи HTML можуть вміщувати: </H2> <P ALIGN=LEFT> <UL TYPE=square> <LI> нумеровані списки, <LI> маркіровані списки, <LI> списки визначень. </UL> </P> </DIV> |
|
Тег <SPAN> використовується для застосування визначеного у ньому стиля на фрагмент документа.
Наприклад,
<SPAN STYLE="color:red"> Сьогодні </SPAN>
<SPAN STYLE="color:green"> ми </SPAN>
<SPAN STYLE="color:blue"> гарно </SPAN>
<SPAN STYLE="color:black"> попрацювали </SPAN>
2. Глобальні стилі можуть багаторазово використовуватися для форматування різних частин HTML – документа. Глобальні силі задаються в контейнері <STYLE> у заголовній частині документа всередині контейнера <HEAD>. Стилі можна описувати так:
Тег.ім’я_стилю{властивість1:значення1; … властивістьN:значенняN;}
Якщо стиль передбачається використовувати для різних тегів, то ім’я тегу можна не визначати.
.ім’я_стилю{властивість1:значення1; … властивістьN:значенняN;}
Для застосування описаних стилів використовуються атрибути CLASS і ID, які визначають ім’я стилю.
Приклад використання глобальних стилів:
<HTML>
<HEAD>
<STYLE>
.stred{font-style:italic; font-size:xx-large; color:red; border-style:double;}
.stblue{font-style:oblique; font-size:x-large; color:blue; border-style:solid;}
</STYLE>
<TITLE>
Приклад використання глобальних стилів
</TITLE>
</HEAD>
<BODY BGCOLOR=Yellow TOPMARGIN=50 BOTTOMMARGIN=50 LEFTMARGIN=70 RIGHTMARGIN=70>
<P CLASS="stred"> Сонце низенько, </P>
<P CLASS="stblue"> Вечiр близенько, </P>
<P CLASS="stred"> Спiшу до тебе, </P>
<P CLASS="stblue"> Лечу до тебе,</P>
<P CLASS="stred"> Моє серденько!</P>
</BODY>
</HTML>
Рисунок 5.1 – Приклад використання глобальних таблиць стилів
3. Зв’язані таблиці стилів – це окремі файли, у яких описані різні стилі, доступні із різних HTML – документів. Файл стилів створюється у будь-якому текстовому редакторі (наприклад, у програмі Блокнот), містить опис стилів по загальній схемі:
Тег.ім’я_стилю{властивість1:значення1; … властивістьN:значенняN;}
.ім’я_стилю{властивість1:значення1; … властивістьN:значенняN;}
Такий файл обов’язково повинен мати розширення CSS.
Перш ніж використовувати стилі в документі, у контейнері <HEAD> потрібно визначити зв’язок між файлами. Для цього застосовується тег <LINK>.
<LINK HREF=” ім’я_файлу.css ” REL=”stylesheet” TYPE=”text/css”>.
Приклад використання таблиці стилів – сайт туристичної компанії:
Таблиця стилів – файл tablest.css:
BODY {background:url(Фон.jpg); COLOR:#0000FF;font-family:"Times New Poman", "serif"; }
.stblue {font-style:oblique; font-size:xx-large;letter-spacing: 10; text-align:center; color:blue; border-style:dashed;}
.stZ1 {font-style:italic; font-size:32; text-align:center; color:blue;}
.sttext {font-family:"Arial"; font-style:normal; font-size:18; font-weight:bold; text-align:justify; color:Purple;}
Стартова сторінка index.htm містить опис фреймів, на які поділяється сторінка:
<HTML>
<HEAD>
<TITLE>
Приклад використання фреймів
</TITLE>
</HEAD>
<FRAMESET ROWS="20%, 80%">
<FRAME SRC="Firm.htm">
<FRAMESET COLS="200, *">
<FRAME SRC="Menu.htm">
<FRAME SRC="Page.htm" NAME="Inform">
</FRAMESET>
</FRAMESET>
</HTML>
Рисунок 5.2 – Приклад використання зв’язаних таблиць стилів – головна сторінка
Файл Firm.htm – заголовок сайту:
<HTML>
<HEAD>
<LINK HREF="tablest.css" REL="stylesheet" TYPE="text/css">
</HEAD>
<BODY LEFTMARGIN=60 RIGHTMARGIN=60>
<P CLASS=stblue> Туристична фірма "Всесвіт" </P>
</BODY>
</HTML>
Рисунок 5.3 – Приклад використання зв’язаних таблиць стилів –сторінка з інформацією про фірму
Файл Menu.htm – меню в лівому фреймі:
<HTML>
<HEAD>
<LINK HREF="tablest.css" REL="stylesheet" TYPE="text/css">
</HEAD>
<BODY>
<DIV CLASS=sttext>
<P> <A HREF="Page.htm" target="Inform"> Головна сторінка </A> </P>
<P> <A HREF="About.htm" target="Inform"> Про нас </A> </P>
<P> <A HREF="Service.htm" target="Inform"> Послуги </A> </P>
</DIV>
</BODY>
</HTML>
Файл Page.htm – стартова сторінка:
<HTML>
<HEAD>
<LINK HREF="tablest.css" REL="stylesheet" TYPE="text/css">
</HEAD>
<BODY>
<P CLASS=stZ1>
<MARQUEE BEHAVIOR=ALTERNATE SCROLLAMOUNT=10 LOOP=5> Гаряча пропозиція! Тур до Італії - 560 у.о. </MARQUEE> </P>
<P ALIGN=CENTER> <IMG SRC="Italy.jpg" ALT="Прага"> </P>
</BODY>
</HTML>
Файл About.htm – інформація про фірму:
<HTML>
<HEAD>
<LINK HREF="tablest.css" REL="stylesheet" TYPE="text/css">
<STYLE>
.stund{text-decoration:underline;}
</STYLE>
</HEAD>
<BODY LEFTMARGIN=20 RIGHTMARGIN=20>
<DIV CLASS=sttext>
<P CLASS=stZ1> Про нас </P>
<DIV CLASS=sttext>
<P> Фірма «Всесвіт» утворена у 1997 році. </P>
<P> Як туроператор, ми самостійно формуємо тури, що пропонуємо своїм клієнтам. Це означає прямі контакти з партнерами,
досконале знання туристичного продукту, можливість створити тур «під клієнта». У компанії прямі контакти з крупнішими
світовими оптовими постачальниками готелів – лідерів глобального ринку, які надають найбільш конкурентні ціни у
масштабі планети.
Це дає можливість нашим клієнтам отримати безперечні переваги у вартості та оперативності.</P>
<HR SIZE=3 ALIGN=CENTER NOSHADE>
<UL STYLE="list-style-image:url(list.jpg);">
<LI>
<P> <SPAN CLASS="stund"> Наша адреса</SPAN>: 83015, м. Донецьк, бул. Шевченка, 75</P>
<LI>
<P><SPAN CLASS="stund""> Телефони</SPAN>: (062) 338-45-21, 335-78-05</P>
<LI>
<P><SPAN CLASS="stund"> Факс</SPAN>: (062) 338-45-21</P>
<LI>
<P><SPAN CLASS="stund"> E-mail</SPAN>: vsesvit@donbas.com.ua</P>
</UL>
</DIV>
</BODY>
</HTML>
Рисунок 5.4 – Приклад використання зв’язаних таблиць стилів –сторінка з інформацією про послуги фірми
Файл Service.htm – інформація про послуги, що надаються (приклад таблиці):
<HTML>
<HEAD>
<LINK HREF="tablest.css" REL="stylesheet" TYPE="text/css">
</HEAD>
<BODY>
<P CLASS=stZ1> Ми надаємо такі послуги: </P>
<TABLE BORDER=1 CLASS=sttext STYLE="font-size:14;border-color:blue;border-style:double; text-indent:10" ALIGN=CENTER>
<TR>
<TD ROWSPAN=7>Лікування у санаторіях України</TD>
<TD ROWSPAN=3> Моршин</TD>
<TD>санаторій "Моршинський" </TD> </TR>
<TR>
<TD> санаторій "Пролісок"</TD> </TR>
<TR>
<TD> санаторій "Весна"</TD>
</TR>
<TR>
<TD ROWSPAN=2> Трускавець </TD>
<TD>санаторій "Донбас" </TD>
</TR>
<TD> санаторій "Карпати"</TD>
</TR>
<TD ROWSPAN=2> Миргород </TD>
<TD>санаторій "Полтава" </TD>
</TR>
<TD> санаторій ім. М.В.Гоголя</TD>
</TR>
<TR>
<TD ROWSPAN=3>Автобусні тури по Європі</TD>
<TD COLSPAN=2> Угорщина, Італія </TD>
</TR>
<TD COLSPAN=2> Італія </TD> </TR>
<TD COLSPAN=2> Австрія, Німеччина</TD>
</TR>
<TD ROWSPAN=4>Відпочинок в Україні</TD>
<TD ROWSPAN=3> Крим</TD>
<TD>санаторій "Військовий", Алушта </TD>
</TR>
<TR>
<TD> санаторій "Марат", Місхор</TD>
</TR>
<TR>
<TD> санаторій "Ай-Петрі", Алупка</TD>
</TR>
<TD COLSPAN=2> Азовське узбережжя </TD>
</TR>
<TD ROWSPAN=6>Відпочинок за кордоном</TD>
<TD COLSPAN=2> Єгипет </TD>
</TR>
<TD COLSPAN=2> Туреччина </TD> </TR>
<TD COLSPAN=2> Кіпр </TD> </TR>
<TD COLSPAN=2> Испанія</TD> </TR>
<TD COLSPAN=2> Італія </TD> </TR>
<TD COLSPAN=2> Угорщина </TD> </TR>
</TABLE>
</BODY>
</HTML>
Контрольні питання
З якою метою створюються і використовуються каскадні листи стилів CSS?
Як формується правило у CSS?
Які переваги по форматуванню даних надають CSS?
Які способи застосування листів стилів Вам відомі?
Як можна застосувати локальні таблиці стилів?
Де і як описуються глобальні листи стилів? Як їх використовувати?
Які переваги надають CSS у зовнішньому файлі? Як створити такий файл? Як його підключити до HTML – документа?
Практичні завдання
Варіант №1
Відредагувати сайт «Інформація про підприємство -//-» з використанням каскадних листів стилів CSS у зовнішньому файлі.
Варіант №2
Відредагувати сайт «Інформація про студентську групу -//-» з використанням каскадних листів стилів CSS у зовнішньому файлі.
Варіант №3
Відредагувати сайт «Інформація про комерційний банк -//-» з використанням каскадних листів стилів CSS у зовнішньому файлі.