Основы CSS (на начало урока 10)
Регистрационная метка
Практикум
На начало урока 10
Возврат

Практикум

Стили сайта и фон элемента

Задание 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

  

Над облаками

На начало урока 10
Возврат

Азы информатики RU 2000/2007 © А.А.Дуванов

Вверх Оглавление книги Урок 10. Основы CSS Письмо автору Об авторах