возврат

Стили сайта

Практикум

Задание 6. Над облаками 2

Не меняя HTML-код (оперируя только CSS), создайте оформление, вид которого показан на рисунке в конце этой страницы.

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

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

Свойство Описание и возможные значения
color Задаёт цвет текста. Значения: название цвета (например, red) или его номер (как в соответствующем атрибуте HTML, например, #ff0000).
background Задаёт цвет фона элемента. Значения: название цвета или его номер.
margin
margin-left
margin-right
margin-top
margin-bottom
Определяет размер внешнего отступа элемента: со всех сторон (margin) или с только с соответствующей стороны. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента.
padding
padding-left
padding-right
padding-top
padding-bottom
Определяет размер внутреннего отступа со всех сторон (padding) или с только с соответствующей стороны. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента.
border
border-left
border-right
border-top
border-bottom
Задаёт границу (рамку) элемента со всех сторон (border) или с только с соответствующей стороны. Значение записывается в формате: толщина стиль цвет. Например, border:1px solid red. Некоторые значения стиля рамки: solid (сплошная линия), dashed (штриховая линия), double (двойная линия).
font-family Задаёт гарнитуру шрифта. Можно указывать название конкретного шрифта или задавать родовое название: serif (шрифт с засечками), sans-serif (рубленый шрифт), monospace (моноширинный шрифт).
font-size Задаёт размер шрифта. Значения: преопределённые размерные единицы (xx-small, x-small, small, medium, large, x-large, xx-large), относительные указания (smaller, larger), проценты по отношению к текущему размеру (%), указания в единицах em (1em соответствует размеру текущего шрифта), указания в пикселах px, абсолютные единицы: pt (пункты), pt (пики), in (дюймы), cm (сантиметры), mm (миллиметры).
text-align Задаёт способ выравнивания внутри элемента. Значения: left, right, center, justify.

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

Файл task06.css

  
/* Стили страницы
   --------------
   Цвета текста и фона 
   Обнуление всех отступов */
BODY
{
}

/* Стили заголовка
   ---------------
   Цвета текста и фона 
   Обнуление внешних отступов
   Внутренний отступ
   Размер шрифта в пикселах 
   Выравнивание по центру */
H1
{
}

/* Стили содержания
   ----------------
   Цвет фона 
   Обнуление внешних отступов
   Внутренний отступ
   Рамка 
   Выравнивание по ширине */
BLOCKQUOTE
{
}

/* Стили подписи
   -------------
   Внутренний отступ
   Уменьшенный на 20% шрифт без засечек
   Рамка 
   Выравнивание справа */
DIV
{
}

Файл task06.htm

  

Над облаками

Вверх вверх | возврат