|
Стили сайта и фон элемента
Задание 3
Создайте документ, вид которого показан на рисунке в конце этой
страницы.
Стилевые определения записывайте в отдельный файл с именем
task03.css, а HTML-код в файл task03.htm.
Файлы сохраняйте в каталоге, который вам укажет учитель.
В этом каталоге есть подкаталог pic, в котором находятся три картинки.
-
Картинка
fon01.jpg (шириной в 90 пикселов и высотой в 1 пиксел):
-
Картинка
title01.gif (шириной в 380 пикселов и высотой 80 пикселов):
-
Картинка
01.gif (шириной в 75 пикселов и высотой 81 пиксел):
Первую картинку используйте для создания вертикальной полоски,
вторую как заголовок страницы, третью в
качестве логотипа. Картинки нужно выводить на экран без использования
тега IMG, подбирая нужные параметры свойства
background для элементов страницы.
В качестве средств оформления используйте свойства, приведённые в таблице.
Свойство |
Описание и значения |
color |
Задаёт цвет текста. Значения: название цвета или его номер
(как в соответствующем атрибуте HTML).
|
background |
Значение свойства записывается в виде последовательности параметров:
цвет скролл повтор координаты картинка
|
margin-left |
Определяет размер отступа элемента слева.
Значения: число с допустимой единицей измерения (например, px).
Можно записывать значение в виде процента от родительского элемента.
|
padding-left |
Определяет расстояние между содержимым и границей элемента слева.
Значения: число с допустимой единицей измерения (например, px). Можно
записывать значение в виде процента от родительского элемента.
|
padding-right |
Определяет расстояние между содержимым и границей элемента справа.
Значения: число с допустимой единицей измерения (например, px). Можно
записывать значение в виде процента от родительского элемента.
|
text-align |
Задаёт способ выравнивания внутри элемента.
Значения: left, right, center,
justify.
|
height |
Задаёт высоту элемента.
Значения: число с допустимой единицей измерения (например, px).
Можно записывать значение в виде процента от родительского элемента.
|
width |
Задаёт ширину элемента.
Значения: число с допустимой единицей измерения (например, px).
Можно записывать значение в виде процента от родительского элемента.
|
position |
Задаёт тип позиции блока в окне.
Значением является ключевое слово:
absolute (блок с абсолютными координатами),
relative (блок с относительными координатами),
static (действуют обычные правила размещения блока).
|
left |
Расстояние элемента от левого края содержащего его блока.
Значения: число с допустимой единицей измерения (например, px).
Можно записывать значение в виде процента от родительского элемента.
|
top |
Расстояние элемента от верхнего края содержащего его блока.
Значения: число с допустимой единицей измерения (например, px).
Можно записывать значение в виде процента от родительского элемента.
|
В качестве текстового редактора используйте PSPad или Блокнот. Заготовки
файлов можно скопировать в текстовый редактор через буфер обмена.
Файл task03.css
/* Цвет текста, фона,
фоновая картинка,
отступ элемента слева */
BODY
{
}
/* Отступы содержимого от границы элемента
слева и справа, выравнивание по ширине */
DIV
{
}
Файл task03.htm
|