Лабораторна робота №3 Використання таблиць каскадних стилів
Мета: Вивчити основи створення таблиць каскадних стилів для форматування документів. Навчитись додавати таблиці в HTML-документи. Отримати навички створення HTML-документів з використанням стилів CSS.
Методичні вказівки
Використовуючи таблиці, можна створювати такі ефекти, як верстка в декілька колонок, застосування ефектів стикування картинки і фону, тонкі лінії на всю ширину або висоту сторінки і т.д. Така таблиця реалізується наступним кодом:
-
<TABLE BORDER="2" WIDTH="200" BGCOLOR="#00FF00"> <TR> <TD>Комірка 1</TD> <TD>Комірка 2</TD> </TR> <TR> <TD>Комірка 3</TD> <TD>Комірка 4</TD> </TR> </TABLE>
Основні теги для організації таблиць
<TABLE> …</TABLE> |
Організовує структуру таблиці |
<TR>…</TR> |
Організовує рядок таблиці |
<TD>…</TD> |
Організовує комірку в рядку таблиці |
<TH>…</TH> |
Задає заголовок в середині таблиці |
<CAPTION ALIGN="вирівнювання">…</CAPTION> |
Задає заголовок таблиці |
Атрибути елементів таблиці
Наступні атрибути можуть застосуються для рядків і комірок |
|
ALIGN=”вирівнювання” |
Встановлює горизонтальне вирівнювання тексту в комірках рядка. (LEFT , CENTER RIGHT) . |
VALIGN=”вирівнювання” |
Встановлює вертикальне вирівнювання тексту в осередках рядка. Допустимі значення: TOP, CENTER, BOTTOM. |
BGCOLOR="#FFFFFF" |
Встановлює колір фону рядка або осередку. |
BACKGROUND="image.gif" |
Заповнює фон рядка або комірки зображенням. |
Наступні атрибути можуть застосуються тільки для комірок |
|
WIDTH="n" |
Визначає ширину комірки чи таблиці в n пікселях. |
HEIGHT="n" |
Визначає висоту комірки в n пікселях. |
COLSPAN="n" |
Розтягання комірки по горизонталі. Наприклад, <TD COLSPAN="2"> означає, що комірка буде розтягнута на 2 колонки. |
ROWSPAN="n" |
Розтягання комірки по рядку. Наприклад, <TD ROWSPAN="2" означає, що комірка буде розтягнута на два рядки таблиці. |
NOWRAP |
Присутність цього атрибута показує, що текст повинен розміщуватися в один рядок |
BACKGROUND="image.gif" |
Заповнює фон комірки зображенням. |
Таблиці каскадних стилів
CSS Cascading Style Sheets (Таблиці каскадних стилів) – це набір правил оформлення і форматування, який може бути застосований до різних елементів сторінки. За допомогою CSS можна один раз описати властивості елементів і визначити цей опис як стиль, і надалі указувати, що елемент, який буде форматуватись відповідним чином, повинен прийняти властивості описаного стилю. Зберегти опис стилю можна не в тексті сторіночки, а в окремому файлі – це дозволить використовувати опис стилю на будь-якій кількості Web-сторінок. Описи стилів знаходяться в тегах <STYLE></STYLE> і розмішаються між тегами <HEAD></HEAD>.
Приведемо приклад використання стилів, де слово "Приклад" відображається шрифтом Comic Sans MS, якщо такого немає на машині користувача, використовується шрифт Tahoma, жирним шрифтом, розміром 25 відсотків і темно-зеленим кольором :
Описуємо стилі під ім'ям Example : <STYLE> .Example{font-family: Comic Sans MS, Tahoma; font-weight: bolder; font-size: 25%; color: darkgreen;} </STYLE>
Тут викликаємо описи стилів :
<div class="Example"> Приклад </div>
Якщо стилі розташовуються в окремому файлі, тоді між тегами <HEAD></HEAD> кожного HTML документа потрібно додати посилання на CSS файл:
<LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">
Example.css - це CSS файл, що містить опис стилів, що використовуються. У CSS файлі теги <STYLE></STYLE>. не указуються Наприклад:
У нас є файл Example.css:
A { text-decoration: none; }A:hover { color: #FF0000; text-decoration: underline; }
Посилання на нього в HTML документі буде виглядати так:
<LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">
Можна визначити стиль для будь-якого тегу окремо. Для цього потрібно в тег додати атрибут STYLE і описати його стиль в лапках.
<H3 STYLE="font-family:Verdana; font-size:150%; color:red"> Приклад </H3>
У таблиці приведені деякі властивості елементів, керованих за допомогою CSS.
Властивості шрифту |
|
font-family |
Використовується для вказівки шрифту або шрифтового сімейства, яким відображатиметься елемент. |
Приклад: |
|
P {font-family: Verdana, sans-serif;} |
|
font-weight |
Визначає ступінь жирності шрифту за допомогою трьох параметрів: lighter (звичайний), bold (жирний), bolder (дуже жирний) |
Приклад: |
|
B {font-weight: bolder;} |
|
font-size |
Встановлює розмір шрифту. Параметр може указуватися у відсотках, пікселях або сантиметрах. |
Приклади використання для тегів H1, H2, H3: |
|
H1 {font-size: 200%;} |
|
H2 {font-size: 150px;} |
|
H3 {font-size: 400pt;} |
|
Властивості тексту |
|
text-decoration |
Встановлює ефекти оформлення шрифту, такі, як підкреслення або закреслення тексту |
Приклад використання для тега Н4: |
|
H4 {text-decoration: underline;} (підкреслення) |
|
H4 {text-decoration: line-through;} (закреслення) |
|
text-align |
Визначає вирівнювання елементу. |
Приклад: |
|
P {text-align: left} (вирівнювання по лівому краю) |
|
P {text-align: right} (вирівнювання по правому краю) |
|
P {text-align: justify} (вирівнювання по ширині) |
|
P {text-align: center} (вирівнювання по центру) |
|
text-indent |
Встановлює відступ першого рядка тексту. Найчастіше використовується для створення параграфів з табульованим першим рядком. |
Приклад використання для тега H1: |
|
H1 {text-indent: 60pt;} |
|
line-height |
Встановлює інтервали між рядками тексту. |
Приклад: |
|
P {line-height: 50 %} |
|
Колір елементу і фону |
|
Color |
Визначає колір елементу I {color: yellow;} |
Приклад використання для тега H3: |
|
H3 {color: #0000FF;} |
|
Background-color |
Встановлює колір фону для елементу. |
Приклад використання для тега H3: |
|
<H3 style=”background-color:gold; color:brown;”> Приклад </H3> |
|
Приклад |
|
Властивості меж |
|
margin-left (з лівого краю) |
Встановлюють значення відступів навколо елементу. |
margin-right (з правого краю) |
Приклад використання для малюнка: |
margin-top (зверху) |
IMG { margin-left: 20pt} |
margin-bottom (знизу) |
IMG { margin-right: 20pt} |
|
IMG { margin-top: 20pt} |
|
IMG { margin-bottom: 20pt} |
Одиниці вимірювання |
|
Px |
Пікселі |
Cm |
Сантиметри |
Mm |
Міліметри |
% |
Проценти |
Приклад файлу fstyle.css
.title {
font-family : "Times New Roman", Times, serif;
font-size : 22px;
color : Teal;
}
.normal {
font-family : "Times New Roman", Times, serif;
font-size : 16px;
color :black;
font-weight : normal;
}