Web-дизайн / ЛР_3. CSS_изучение свойств
.docЛабораторная работа 3. HTML 4 и CSS 2.
Изучение свойств таблиц стилей CSS. Использование внедренного стиля
-
Внедренные стилевые таблицы
Вторым вариантом использования стилевых спецификаций является их внедрение в документ. Для этого в заголовок документа (в теге<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
-
В справочнике Sprav_CSS.doc изучить свойства категории background.
-
Создать web-страницу, на которой должны быть блоки, как изображено на рис. 3.1. Все материалы (тексты, картинки находятся в папке html_css_3).
-
Сохранить файл под именем background.html
Рисунок 3.1
Практическое задание 2
-
В справочнике Sprav_CSS.doc изучить свойства категории border.
-
Создать web-страницу, как изображено на рис. 3.2. Сохранить файл под именем border.html
Рисунок 3.2
Практическое задание 3
-
В справочнике Sprav_CSS.doc изучить свойства категории margin.
-
Создать web-страницу, как изображено на рис. 3.3. Сохранить файл под именем margin.html
Рисунок 3.3
Практическое задание 4
-
В справочнике Sprav_CSS.doc изучить свойства категории padding.
-
Создать web-страницу, как изображено на рис. 3.4. Сохранить файл под именем padding.html
Рисунок 3.4
Практическое задание 5
-
В справочнике Sprav_CSS.doc изучить свойства категории float и clear.
-
Создать web-страницы, как изображено на рис. 3.5, 3.6. Сохранить файлы под именами float_1.html и float_2.html.
Рисунок 3.5
Рисунок 3.6
Практическое задание 6
-
Используя полученные выше знания, создать web-страницу, как изображено на рис. 3.7. Сохранить файл под именем itog.html
Рисунок 3.7
Практическое задание 7
-
В справочнике Sprav_CSS.doc изучить свойства категории list-style и font.
-
Создать 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.