Практическое
занятие № 5
Тема:
«Построение простого CSS документа»
Цель:
научиться использовать основные
селекторы, их свойства и значения для построения простого CSS документа,
использовать внутренний способ подключения CSS к HTML-документу.
Ход работы.
Задание 1. Имеется HTML-документ
для задания и папка с изображениями. Оформите его по образцу,
используя внутреннюю CSS таблицу:
1. Откройте файл index.html
2. В разделе
<head>... </head> подключите
таблицу стилей с помощью тега <style>…</style>
3. Устанавливаем фоновое изображение с помощью селектора body,
используя свойство background-image: и
цвет текста всего документа свойством color:
4. Продолжаем задавать свойства для web-страницы. Устанавливаем синий цвет заголовка h1 и
выравнивание по центру командой:
5. Все заголовки h3 отображаем красным цветом одной
командой:
Таблица стилей имеет вид:
6. Установите отступ заголовков h3 в 30 пикселей,
дополнив селектор h3 командой text-indent:30px;
7. Установим выравнивание всех абзацев p по ширине:
8. Первому абзацу зададим
форматирование: зеленый курсив. Воспользуемся атрибутом style для тега p:
9. Следующий абзац будет иметь жирное начертание и фиолетовый цвет. Также добавим атрибут style тегу p второго абзаца:
10.
Работаем с первым
и вторым списком. Чтобы цвет маркера оставался таким же, как и цвет текста, а
текст после маркера был синим, поместим текст каждой строки списка в контейнер <span>…</span>
А затем установим синий цвет для контейнеров, находящихся
в списках, с помощью команды
между тегами <style>…</style> в
разделе <head>... </head>.
11.
Первый список
оставим так. Второму списку поменяем глиф
на окружность, установив атрибут style
тегу ul:
12.
Далее поработаем
с нумерованными списками. Чтобы цвет текста списка был синим поместим каждую
строку списка в контейнер <span>…</span>
После
сохранения свойство li
span{color:#0000FF;} распространится и на данные списки.
13.
Изменим нумерацию
для второго нумерованного списка на большие римские цифры (upper-roman), начиная с 6-го
числа, указав атрибуты style и start для списка ol:
14.
Находим
теперь список определений <dl>…
</dl>. Выделим красным цветом перечисленные типы данных. Для этого
сначала выделим каждую фразу, которая должна быть красного цвета, в контейнер <span>…</span>.
Далее между тегами <style>…</style> в
разделе <head>... </head> добавим свойство красного
цвета для списков определений:
15.
Следующий список
(нумерованный) поместим в контейнер <div>…
</div>, для того чтобы
применить этому списку свое форматирование:
Чтобы весь список отобразился цветом 
,
укажем этот цвет для свех строк списков, находящихся в контейнере, с помощью
команды в разделе <head>...
</head> между тегами <style>…</style>:
Укажем тип маркера – изображение. Тегу ol зададим
атрибут style:
И последнее: отобразим первые фразы (предложения) каждой строки в
списке синим цветом и курсивом. Поместим нужные нам предложения в контейнеры <span>…</span>, а для
контейнеров установим свойство цвета между тегами <style>…</style>:
16.
Переходим
к коду
программы на странице. Здесь установим зеленый цвет для комментариев, поместив
комментарии в контейнеры <span>…</span>.
Для контейнеров, которые находятся в абзацах (p) кода (code), запишем
свойство цвета между тегами <style>…</style>:
Задание 2. Самостоятельно. Создайте страницу по образцу. К html-страницам примените стили.