Практикум 01<- Селекторы

Селекторы

Практикум

Задание 1. Математики и ювелиры 1

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

Стилевые определения записывайте в отдельный файл с именем task01.css, а HTML-код — в файл task01.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-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`.

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

Файл task01.css

  
/* Стили страницы
   --------------
   Выравнивание по ширине */
BODY
{
}

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

/* Стили определения
   -----------------
   Цвет текста 
   Вес шрифта
   Стиль шрифта */
DFN
{
}

/* Стили врезки
   ------------
   Цвет фона
   Рамка
   Уменьшенный размер шрифта
   Внешний отступ слева
   Внутренний отступ */
.incut
{
}

/* Стили подвала
   -------------
   Цвет текста
   Вес шрифта
   Выравнивание справа
   Рамка сверху */
P.footer
{
}

Файл task01.htm

Математики и ювелиры

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