CSS-конструирование

Задание 2. Причуды Windows

Создайте документ, вид которого показан на рисунке в конце этой страницы.

Стилевые определения записывайте в отдельный файл с именем task02.css, а HTML-код — в файл task02.htm. Файлы сохраняйте в каталоге, который вам укажет учитель. В этом каталоге есть подкаталог pic, в котором содержится картинка fon01.jpg (размером 70×1):

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

Свойство	Описание и значения
color	Задаёт цвет текста. Значения: название цвета или его номер (как в соответствующем атрибуте HTML).
background	Значение свойства записывается в виде последовательности параметров: цвет скролл повтор координаты картинка
border	Задаёт рамку вокруг элемента. Записывается в формате: border: толщина стиль цвет, например, border: 1px solid red. Некоторые значения стиля рамки: solid (сплошная линия), dashed (штриховая линия), double (двойная линия).
margin margin-left margin-right margin-top margin-bottom	Определяет размер отступа элемента: со всех сторон (margin) или с только с соответствующей стороны. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента.
padding padding-left padding-right padding-top padding-bottom	Определяет расстояние между содержимым и границей элемента слева со всех сторон (padding) или с только с соответствующей стороны. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента.
text-align	Задаёт способ выравнивания внутри элемента. Значения: left, right, center, justify.
font-family	Задаёт гарнитуру шрифта. Можно указывать название конкретного шрифта или задавать родовое название: serif (шрифт с засечками), sans-serif (рубленый шрифт), monospace (моноширинный шрифт).
font-size	Задаёт размер шрифта. Значения: мнемонические размерные единицы (xx-small, x-small, small, medium, large, x-large, xx-large), мнемонические относительные указания (smaller, larger), проценты по отношению к текущему размеру (%), любые допустимые абсолютные единицы: pt (пункты), pt (пики), px (пикселы), in (дюймы), cm (сантиметры), mm (миллиметры).
font-style	Задаёт стиль написания. Значения: normal (обычный шрифт), italic (отображение курсивом).
font-weight	Задаёт вес шрифта (толщину линий). Значения: normal (нормальный вес), bold (полужирное начертание), bolder (больший вес относительно текущего шрифта), lighter (меньший вес относительно текущего шрифта). В качестве значений можно использовать числа от 100 до 900 с шагом 100 (Значение 400 — это то же, что normal, 700 — то же, что и bold).
width	Задаёт ширину элемента. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента.
float	Определяет тип обтекания элемента другими элементами (слева или справа). Значения: none (нет обтекания), left (элемент слева, обтекание справа), right (элемент справа, обтекание слева).
letter-spacing	Определяет добавочное расстояние между буквами. Значения: число с допустимой единицей измерения (например, px). Процентная запись не поддерживается.

В качестве текстового редактора используйте PSPad или Блокнот. Заготовки файлов можно скопировать в текстовый редактор через буфер обмена.

Файл task02.css

  
/* ---------
Белый фон, фоновая полоска слева и поле слева
------------*/
BODY
{
}

/* ---------
Зелёный цвет, выравнивание слева
------------*/
H1,H2,H3,H4,H5,H6
{
}

/* ---------
Зелёный цвет
------------*/
HR
{
}

/* ---------
Заметка
* Область светло-серого цвета #E5E5E5
* Сплошная рамка зелёного цвета
* Отступ блока
* Отступ содержимого блока от рамки
* Ширина области: половина ширины элемента BODY 
* Обтекание области текстом справа
* Рубленый шрифт
* Уменьшенный на 30% размер шрифта
* Выравнивание по ширине
------------*/
.nb
{
}

/* ---------
Выделение в основном тексте
* Рубленый шрифт
------------*/
.mark
{
}

/* ---------
Выделение в заметке
* Моноширинный шрифт
* Уменьшенный на 30% размер шрифта
------------*/
.mark1
{
}


/* ---------
Выделение подписи
* Курсив
* Уменьшенный на 30% размер шрифта
* Выравнивание справа
------------*/
P.sign
{
}

/* ---------
Разделитель
* Зелёный цвет
* Жирное начертание
* Увеличенный на треть размер шрифта
* Добавочное расстояние между буквами в 10 пикселов
* Выравнивание по центру
------------*/
P.star
{
}

Файл task02.htm