Не меняя HTML-код (оперируя только CSS), создайте оформление, вид которого показан на рисунке в конце этой страницы.
Стилевые определения записывайте в отдельный файл с именем
task02.css, а HTML-код — в файл task02.htm.
Файлы сохраняйте в каталоге, который укажет учитель.
В качестве средств оформления используйте свойства, приведённые в таблице.
| Свойство | Описание и возможные значения |
|---|---|
color |
Задаёт цвет текста. Значения: название цвета (например, red) или его номер
(как в соответствующем атрибуте HTML, например, #ff0000).
|
background |
Задаёт цвет фона элемента. Значения: название цвета или его номер. |
margin |
Определяет размер внешнего отступа элемента: со всех сторон (margin)
или с только с соответствующей стороны.
Значения: число с допустимой единицей измерения (например, px).
Можно записывать значение в виде процента от родительского элемента.
|
padding |
Определяет размер внутреннего отступа
со всех сторон (padding)
или с только с соответствующей стороны.
Значения: число с допустимой единицей измерения (например, px). Можно
записывать значение в виде процента от родительского элемента.
|
borderborder-leftborder-rightborder-topborder-bottom |
Задаёт границу (рамку) элемента
со всех сторон (border)
или с только с соответствующей стороны.
Значение записывается в формате:
толщина стиль цвет.
Например,
border:1px solid red. Некоторые значения стиля рамки:
solid (сплошная линия), dashed (штриховая линия),
double (двойная линия).
|
font-family |
Задаёт гарнитуру шрифта. Можно указывать
название конкретного шрифта или задавать родовое название:
serif (шрифт с засечками),
sans-serif (рубленый шрифт),
monospace (моноширинный шрифт).
|
font-style |
Задаёт стиль написания. Значения:
normal (обычный шрифт),
italic (отображение курсивом).
|
font-weight |
Задаёт вес шрифта (толщину линий). Значения:
normal (нормальный вес),
bold (полужирное начертание).
|
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.
|
letter-spacing |
Значение свойства добавляется к стандартному расстоянию между символами.
Допускается
число с допустимой единицей измерения (например, px) или
ключевое слово
normal, которое соответствует нулю.
|
В качестве текстового редактора используйте PSPad
или Блокнот. Заготовки файлов скопируйте в
текстовый редактор через буфер обмена.
Файл task02.css
/* Стили страницы
--------------
Цвет текста и цвет фона
Внешний отступ слева */
BODY
{
}
/* Стили заголовка
---------------
Цвет текста
Шрифт без засечек
Выравнивание справа
Внутренний отступ снизу
Рамка снизу */
H1
{
}
/* Стили врезки
------------
Цвет фона
Рамка
Шрифт без засечек
Уменьшенный размер шрифта
Внешний отступ справа
Внутренний отступ со всех сторон */
.incut
{
}
/* Стили абзаца внутри врезки
--------------------------
Увеличенное расстояние между буквами
Выравнивание справа */
.incut P
{
}
/* Стили определения внутри абзаца,
который расположен во врезке
-------------------------------
Цвет текста
Вес шрифта
Стиль шрифта */
.incut P DFN
{
}
/* Стили подвала
-------------
Цвет текста
Шрифт без засечек
Вес шрифта
Рамка сверху */
P.footer
{
}
Файл task02.htm
