Оператор з обробки інформації та програмного забезпечення

урок 24

ЛПР №16 Створення та форматування HTML-документів.

ЛПР №16 Створення та форматування HTML-документів.

Створення текстових ефектів за допомогою стилів

Визначимо для тегу <BODY> такий стиль: шрифт Arial чорного кольору розміром 16 пунктів. Внаслідок цього весь текст, що міститься між тегами <BODY> та </BODY>, буде автоматично відформатований відповідно до цих властивостей. Тепер визначимо стилі з іменами тінь, основа, шар1 і шар2. Текст запишемо в шарах, які накладаються. Спочатку відображатиметься шар тінь, а на нього накладатимуться шари основа, шар 1 та шар2. Порядок накладання задано розташуванням фрагментів тексту в HTML-документі.

Буде застосовано такі властивості:

· margin-top — відступ згори (за від'ємних значень можна забезпечити накладання фрагментів);

· color — колір;

· font-size — розмір шрифту;

· font-family — сімейство шрифтів (гарнітура);

· line-height — висота рядка.

Визначені в документі стилі мають такі параметри:

· тінь — колір зі значенням #DBDBDB (світло-сірий), вирівнювання по центру, відступ згори 30 пікселів, розмір шрифту 80 пікселів, висота рядка 270 пікселів, гарнітура Times;

· основа — червоний колір шрифту, відступ згори -230 пікселів, розмір 70 пікселів, висота рядка 250 пікселів, гарнітура — Times;

· шар1 — чорний колір шрифту, відступ згори -100 пікселів, розмір шрифту — 50 пікселів, висота рядка 65 пікселів, гарнітура — Arial;

· шар2 — зелений колір шрифту, відступ згори — 30 пікселів, розмір шрифту — 35 пікселів, висота рядка — 45 пікселів, гарнітура — Arial.

Для виділення частини HTML-документа використовують тег <DIV>. Він нічого не форматує, а лише відзначає фрагмент тесту, який виступає як окремий об'єкт. Атрибут CLASS цього тегу дає змогу посилатися на стилі внутрішньої таблиці й тим самим задавати стиль подання тексту, розташованого між тегами <DIV CLASS...> та </DIV>.

<HTML>

<HEAD>

<TITLE>Приклад використання CSS</TITLE>

<STYLE>

BODY {color: black; font-size: 16px; font-family: Arial}

.тінь {color: #DBDBDB; text-align: center; margin-top: ЗОрх;

font-size: 80px; line-height: 270px; font-family: Times}

.основа {color: red; margin-top: -230px; font-size: 70px;

line-height: 250px; font-family: Times}

.шар1 {color: black; margin-top: -lOOpx; medium; font-size:

50px; line-height: 65px; font-family: Arial}

.шар2 {color: green; margin-top: ЗОрх; font-size: 35px;

line-height: 45px; font-family: Arial}

</STYLE>

</HEAD>

<BODY>

Приклад використання каскадних стилів

<TR>

<DIV CLASS='тінь'>Текст із тінню</DIV>

<DIV CLASS='основа'>Текст із тінню</DIV>

<DIV CLASS='шар1'>Приклад тексту із тінню</DIV>

<DIV CLASS='шар2'>Це приклад використання каскадних стилів</DIV>

</TD> </TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Page updated

Report abuse