Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

Web-дизайн / ЛР_3. CSS_изучение свойств

.doc
Скачиваний:
72
Добавлен:
29.05.2015
Размер:
1.46 Mб
Скачать

Лабораторная работа 3. HTML 4 и CSS 2.

Изучение свойств таблиц стилей CSS. Использование внедренного стиля

  1. Внедренные стилевые таблицы

Вторым вариантом использования стилевых спецификаций является их внедрение в документ. Для этого в заголовок документа (в теге<head>) нужно поместить теги <style> и </style>, а внутри этой пары тегов ввести стилевые правила. Внедренная таблица стилей действует только для текущего документа и никак не связана с другими web-страницами сайта.

Например:

<head>

<meta http-equiv=Content-Type content="text/html; charset=windows-1251">

<style>

h1 {color: blue, font-size:18pt; text-align:center}

p {color:#0000FF; font-size:13pt}

</style>

</head>

  1. Изучение свойств таблиц стилей

При выполнении заданий все оформление должно быть сделано через внедренную таблицу стилей.

Практическое задание 1

  1. В справочнике Sprav_CSS.doc изучить свойства категории background.

  2. Создать web-страницу, на которой должны быть блоки, как изображено на рис. 3.1. Все материалы (тексты, картинки находятся в папке html_css_3).

  3. Сохранить файл под именем background.html

Рисунок 3.1

Практическое задание 2

  1. В справочнике Sprav_CSS.doc изучить свойства категории border.

  2. Создать web-страницу, как изображено на рис. 3.2. Сохранить файл под именем border.html

Рисунок 3.2

Практическое задание 3

  1. В справочнике Sprav_CSS.doc изучить свойства категории margin.

  2. Создать web-страницу, как изображено на рис. 3.3. Сохранить файл под именем margin.html

Рисунок 3.3

Практическое задание 4

  1. В справочнике Sprav_CSS.doc изучить свойства категории padding.

  2. Создать web-страницу, как изображено на рис. 3.4. Сохранить файл под именем padding.html

Рисунок 3.4

Практическое задание 5

  1. В справочнике Sprav_CSS.doc изучить свойства категории float и clear.

  2. Создать web-страницы, как изображено на рис. 3.5, 3.6. Сохранить файлы под именами float_1.html и float_2.html.

Рисунок 3.5

Рисунок 3.6

Практическое задание 6

  1. Используя полученные выше знания, создать web-страницу, как изображено на рис. 3.7. Сохранить файл под именем itog.html

Рисунок 3.7

Практическое задание 7

  1. В справочнике Sprav_CSS.doc изучить свойства категории list-style и font.

  2. Создать web-страницы, как изображено на рис. 3.8, 3.9, 3.10. Сохранить файлы под именами list_1.html, list_2.html, list_3.html.

Рисунок 3.13

Рисунок 3.14

Рисунок 3.15

В результате выполнения этой темы, у Вас должны быть созданы следующие файлы:

  • background.html;

  • border.html;

  • margin.html;

  • padding.html;

  • float_1.html;

  • float_2.html;

  • itog.html;

  • list_1.html;

  • list_2.html;

  • list_3.html.