B. Листинг HTML-файла

<html>

<HEAD>

<Title> Форматирование текста средствами CSS </Title>

</HEAD>

<Body>

<H1>Пример файла с текстовыми стилями </h1>

<P class="size1"> Это текст размером 16 пунктов,

<P class="size2"> а это текст размера 8 мм.

<P Class="size3"> Этот текст в 1,5 раза больше нормального текста

<P class="size4"> Это самый большой шрифт

</p>

<h3>Теперь пробуем применять оформление текста </h3><br>

<P class="under">Подчеркнутый текст <br>

<P clfss="strike">Перечеркнутый и

<P class="crazy">между двух линеечек </p>

<h3>теперь попробуем текст с красной строкой и различными межстрочными интервалами</h3>

Директор говорил очень сухо, внимательно разглядывая пустую, залитую

асфальтом и солнцем площадь под окном. У него давно болела шея, на площади

не происходило ровно ничего интересного. Но он упрямо сидел отвернувшись.

Так он выражал свой протест. Директор был молод и самолюбив. Он отлично

понимал, что имеет в виду инспектор, но не считал инспектора в праве

касаться этой стороны дела.

Спокойная настойчивость инспектора его

раздражала. "Вникает, - думал он со злостью. - Все ясно, как шоколад, - но

вникает!"

</p>

<h3>И в конце проверим как работают интервалы</h3>

Сначала следовало разобраться в главном. На первый взгляд

действительно все было как будто ясно. Инспектор Управления охраны труда

Рыбников уже сейчас мог бы приняться за "Отчет по делу Комлина Андрея

Андреевича, начальника физической лаборатории Центрального института

мозга".

Андрей Андреевич Комлин производил на себе опасные эксперименты и

уже четвертый день лежит на больничной койке в полусне-полубреду,

запрокинув щетинистую круглую голову, покрытую странными кольцеобразными

синяками.

</body>

</html>

2. Используя возможности стилевого форматирования, создайте HTML – файл максимально соответствующий приведенному ниже примеру. Таблицы каскадных стилей запишите в отдельный файл, либо используйте существующую.

ПРИМЕР:

Лабораторная работа №3

Использование таблиц стилей для форматирования текстовых элементов

Краткие теоретические сведения

Cписки

В CSS предусмотрена группа свойств, позволяющих изменять внешний вид списков. Причем все рассмотренные здесь свойства влияют на внешний вид маркера, наличие которого, собственно, и является характерной особенностью любого списка.

Итак, в первую очередь обратимся к свойству list-style-type. Для маркированных списков этому свойству задаются следующие значения:

• disc – задает круглый маркер списка (маркер закрашен внутри);

• circle – задает маркер в виде окружности;

• square – задает маркер в виде квадрата.

Для нумерованных списков свойству list-style-type присваиваются такие значения, задающие тип нумерации:

• decimal – нумерация арабскими цифрами;

• lower-roman – нумерация малыми римскими цифрами;

• upper-roman – нумерация большими римскими цифрами;

• lower-alpha – нумерация малыми латинскими буквами;

• upper-alpha – нумерация большими латинскими буквами.

Воздействие каждого значения свойства list-style-type аналогично соответствующим значениям атрибута type HTML элементов OL и UL.

Следующее свойство, предназначенное для задания рисунка в качестве маркера списка, имеет имя list-style-image. Оно перекрывает значение свойства list-style-type и может иметь следующие значения:

• url("URI изображения для маркера") – указывает путь рисунка, который будет использоваться в качестве маркера списка;

• none – отменяет использование рисунка в качестве маркера (значение по умолчанию).

Наконец, свойство list-style-position позволяет задать более компактное отображение списка за счет изменения положения маркера. Свойство принимает следующие значения:

• inside – помещает маркер в текст элемента списка;

• outside – помещает маркер вне текста элемента списка (значение по умолчанию).

На рис. 3 показано, как могут выглядеть обычный и компактный списки с маркерами-изображениями.

Рис. 3. Обычный и компактный списки

Показанный на рис. 3 эффект достигнут применением совсем простой таблицы стилей:

<STYLE>

UL.list {list-style-image: url("marker.gif")}

UL.compact_list {list-style-image: url("marker.gif");

list-style-position: inside}

</STYLE>