Не меняя HTML-код (оперируя только CSS), создайте оформление, вид которого показан на рисунке в конце этой страницы.
Стилевые определения записывайте в отдельный файл с именем
task06.css
, а HTML-код — в файл task06.htm
.
Файлы сохраняйте в каталоге, который укажет учитель.
В качестве средств оформления используйте свойства, приведённые в таблице.
Свойство | Описание и возможные значения |
---|---|
color |
Задаёт цвет текста. Значения: название цвета (например, red ) или его номер
(как в соответствующем атрибуте HTML, например, #ff0000 ).
|
background |
Задаёт цвет фона элемента. Значения: название цвета или его номер. |
margin |
Определяет размер внешнего отступа элемента: со всех сторон (margin )
или с только с соответствующей стороны.
Значения: число с допустимой единицей измерения (например, px ).
Можно записывать значение в виде процента от родительского элемента.
|
padding |
Определяет размер внутреннего отступа
со всех сторон (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