Главная | Обратная связь | Поможем написать вашу работу!

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

Тема: Основы использования стилей для оформления html-документов

Цель работы: Освоить основные приемы техники задания и использования стилевых свойств

ЗАДАНИЕ 1 (Разные способы задания стилей)

1. Создать стилевой файл style.css, в котором задать стилевой класс main, определяющий следующие свойства:

семейство шрифтов: Arial,

размер шрифта: 14px.

2. Создать пустой html-документ 1.htm. Подключить к нему стилевой файл.

3. Создать в файле 1.htm глобальную таблицу стилей, в которой определить стилевой класс global со свойствами:

семейство шрифтов: Tahoma,

размер шрифта: 14px.

4. Добавить в тело документа три элемента div.

· С первым связать стилевой класс main, его содержание состоит из слова Main.

· Второй связан со стилевым классом global и содержит текст Global.

· В третьем определить стиль непосредственно в элементе:

семейство шрифтов: Сourier,

размер шрифта: 14px.

Содержание элемента — слово Local.

Открыть файл в браузере и проанализировать форматирование вывода.

ЗАДАНИЕ 2 (Правила каскадирования)

1. В документ добавить элемент

<p id="element">Цвет шрифта</p>

2. В стилевой файл добавить стиль для элемента с идентификатором element:

размер шрифта: 24px,

цвет шрифта — красный (значения red или #FF0000).

3. В таблицу глобальных стилей добавить стиль для элементов p:

размер шрифта: 24px,

цвет шрифта — зеленый (значения green или #00FF00).

4. Определить стиль непосредственно в элементе p:

размер шрифта: 24px,

цвет шрифта — голубой (значения blue или #0000FF).

Открыть файл в браузере и проанализировать форматирование вывода. Какой цвет использован для шрифта при выводе и почему?

5. В элементе p удалить определение стиля и вновь перезагрузить файл документа. Как изменился цвет шрифта и почему?

ЗАДАНИЕ 3 (Стили и специальные атрибуты тегов — исследование приоритетов)

1. Добавить в документ элемент div, в котором определены следующие стилевые свойства:

ширина (width): 300px;

высота (height): 200px;

стиль граничной линии (border-style): solid;

цвет фона прямоугольника: cyan (бирюзовый).

2. В стилевом файле определить стиль для элементов div со свойством:

способ выравнивания текста в элементе (text-align): вправо.

Содержание элемента div состоит из слова Выравнивание.

3. Перезагрузить документ и проверить наличие у нового элемента заданных свойств.

4. В элемент div добавить атрибут выравнивания (по центру)

align="center"

Перезагрузить документ и проверить, есть ли изменения в форматировании.

5. В элемент div добавить атрибут id="element1"

В таблице глобальных стилей задать стиль для элемента с идентификатором element1, в котором определяется способ выравнивания по центру.

Перезагрузить документ и проверить, есть ли изменения в форматировании.

6. В элемент div с помощью атрибута style добавить стиль, в котором определено выравнивание влево.

Перезагрузить документ и проверить, есть ли изменения в форматировании.

7. Сделать выводы о том, каков уровень приоритетов стилевых свойств и свойств, заданных специальными атрибутами элементов.

ЗАДАНИЕ 4 (Элементы div и span)

1. Добавить в документ текст:

Тег <div> — это контейнер, похожий на тег абзаца <p>. Но это уникальный контейнер, так как он может содержать в себе любые html-элементы, т.е. его содержание не ограничивается только текстом. Тег <span> также контейнерный. Он может содержать текст, картинки и т.п. Особенностью этого тега является то, что он не вызывает перевода строки ни перед собой, ни после себя.

Замечание.

Для вывода на экран тире (в предложении <div> — это …) нужно использовать специальное обозначение —, что означает "черта, шириной в букву m". Для вывода угловых скобок, которые воспринимаются браузерами как служебные символы разметки, нужно использовать < и >.

2. Отформатировать предложенный текст следующим образом.

С помощью тегов div разбить текст на два абзаца: один посвященный тегу div, а второй — тегу span. Текст должен выводиться шрифтом arial, размером в 15 пикселей. Способ определения стиля выбрать самостоятельно.

Исключения составляют названия тегов (<div>, <p>, <span>), которые должны выводиться шрифтом courier, размером 14 пикселей, синим цветом, с расстоянием между строками в 20 пикселей. Для форматирования использовать тег span, способ определения стиля выбрать самостоятельно.

ЗАДАНИЕ 5 (Изменение свойств стандартных тегов оформления)

1. В стилевой таблице или в стилевом файле определить стиль для элементов с тегом <b>. А именно, задается красный цвет шрифта, и он выводится курсивом.

2. Добавить в документ несколько слов, заключенных в тег <b>.

Перезагрузить документ и сделать выводы об изменениях в форматировании.

Приложение.