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

Задание 3. Поиск информации

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

Стилевые определения записывайте в отдельный файл с именем task03.css, а HTML-код — в файл task03.htm. Файлы сохраняйте в каталоге, который вам укажет учитель. В этом каталоге есть подкаталог pic, в котором содержится картинки

• Картинка для фона fon02.gif (размером 100×1):

  

• Картинка для логотипа 02.gif (размером 109×96):

  

• Картинка для заголовка 03.gif (размером 476×63):

  

• Картинка-маркер disc.gif (размером 11×11):

  

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

Свойство	Описание и значения
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). Процентная запись не поддерживается.
list-style-image	Определяет адрес картинки, использумой в качестве маркера для элемента списка. Адрес записывается в виде: url("путь_к_файлу").
position	Задаёт тип позиции блока в окне. Значением является ключевое слово: absolute (блок с абсолютными координатами), relative (блок с относительными координатами), static (действуют обычные правила размещения блока).
left	Расстояние элемента от левого края содержащего его блока. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента.
top	Расстояние элемента от верхнего края содержащего его блока. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента.

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

Файл task03.css

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

/* ---------
Картинка disc.gif в качестве маркера  
------------*/
UL LI
{
}

/* ---------
Выделение терминов
Цвет #BE9802 и жирное начертание
------------*/
DFN
{
}


/* ---------
Картинка в левом верхнем углу
* Абсолютное позиционирование (0,0)
------------*/
.block1
{
}

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

Файл task03.htm