|
CSS-конструирование
Задание 4. Азы программирования
Создайте документ, вид которого показан на рисунке в конце этой
страницы.
Стилевые определения записывайте в отдельный файл с именем
task04.css, а HTML-код — в файл task04.htm.
Файлы сохраняйте в каталоге, который вам укажет учитель. В этом
каталоге есть подкаталог pic, в котором содержатся
следующие картинки.
В качестве средств оформления используйте свойства, приведённые в таблице.
| Свойство |
Описание и значения |
| color |
Задаёт цвет текста. Значения: название цвета или его номер
(как в соответствующем атрибуте HTML).
|
| background |
Значение свойства записывается в виде последовательности параметров:
цвет скролл повтор координаты картинка
|
| border |
Задаёт рамку вокруг элемента. Записывается в формате:
border: толщина стиль цвет, например,
border: 1px solid red. Некоторые значения стиля рамки:
solid (сплошная линия), dashed (штриховая линия),
double (двойная линия).
|
margin
margin-left
margin-right
margin-top
margin-bottom |
Определяет размер отступа элемента: со всех сторон (margin)
или с только с соответствующей стороны.
Значения: число с допустимой единицей измерения (например, px).
Можно записывать значение в виде процента от родительского элемента.
|
padding
padding-left
padding-right
padding-top
padding-bottom |
Определяет расстояние между содержимым и границей элемента слева
со всех сторон (padding)
или с только с соответствующей стороны.
Значения: число с допустимой единицей измерения (например, px). Можно
записывать значение в виде процента от родительского элемента.
|
| text-align |
Задаёт способ выравнивания внутри элемента.
Значения: left, right, center,
justify.
|
| font-family |
Задаёт гарнитуру шрифта. Можно указывать
название конкретного шрифта или задавать родовое название:
serif (шрифт с засечками),
sans-serif (рубленый шрифт),
monospace (моноширинный шрифт).
|
| font-size |
Задаёт размер шрифта. Значения: мнемонические размерные единицы
(xx-small, x-small,
small, medium, large,
x-large, xx-large),
мнемонические относительные указания
(smaller, larger),
проценты по отношению к текущему размеру (%),
любые допустимые абсолютные единицы:
pt (пункты), pt (пики),
px (пикселы), in (дюймы),
cm (сантиметры), mm (миллиметры).
|
| font-style |
Задаёт стиль написания. Значения:
normal (обычный шрифт),
italic (отображение курсивом).
|
| font-weight |
Задаёт вес шрифта (толщину линий). Значения:
normal (нормальный вес),
bold (полужирное начертание),
bolder (больший вес относительно текущего шрифта),
lighter (меньший вес относительно текущего шрифта).
В качестве значений можно использовать числа от 100 до 900 с шагом 100
(Значение 400 — это то же, что normal,
700 — то же, что и bold).
|
| width |
Задаёт ширину элемента.
Значения: число с допустимой единицей измерения (например, px).
Можно записывать значение в виде процента от родительского элемента.
|
| float |
Определяет тип обтекания элемента другими элементами (слева или
справа).
Значения:
none (нет обтекания),
left (элемент слева, обтекание справа),
right (элемент справа, обтекание слева).
|
| letter-spacing |
Определяет добавочное расстояние между буквами.
Значения: число с допустимой единицей измерения (например, px).
Процентная запись не поддерживается.
|
| list-style-image |
Определяет адрес картинки, использумой в качестве маркера для
элемента списка. Адрес записывается в виде:
url("путь_к_файлу").
|
| position |
Задаёт тип позиции блока в окне.
Значением является ключевое слово:
absolute (блок с абсолютными координатами),
relative (блок с относительными координатами),
static (действуют обычные правила размещения блока).
|
| left |
Расстояние элемента от левого края содержащего его блока.
Значения: число с допустимой единицей измерения (например, px).
Можно записывать значение в виде процента от родительского элемента.
|
| top |
Расстояние элемента от верхнего края содержащего его блока.
Значения: число с допустимой единицей измерения (например, px).
Можно записывать значение в виде процента от родительского элемента.
|
В качестве текстового редактора используйте PSPad или Блокнот. Заготовки
файлов можно скопировать в текстовый редактор через буфер обмена.
Файл task04.css
/* ---------
Белый фон, чёрный текст, фоновая полоска
нулевые отступы и нулевые поля
------------*/
BODY
{
}
/* ---------
Зелёный цвет (#009900;), выравнивание слева
------------*/
H1,H2,H3,H4,H5,H6
{
}
/* ---------
Картинка disc.gif в качестве маркера
------------*/
UL LI
{
}
/* ---------
Картинка в левом верхнем углу
* Абсолютное позиционирование (10,10)
------------*/
.block1
{
}
/* ---------
Вертикальная полоса (меню и слоган)
* Абсолютное позиционирование
* Явно заданные координаты
------------*/
.menu00
{
}
.menu01
{
}
.menu02
{
}
.menu03
{
}
.menu04
{
}
.menu05
{
}
.menu06
{
}
.disc
{
}
.slogan
{
}
/* ---------
Заголовок и горизонтальное меню
* Фон цвета #DFF2E5
* Нулевой отступ блока
* Отступ содержимого на 10 пикселов от границ
* Дополнительно отступ от левой границы на 100 пикселов
------------*/
.block2
{
}
/* ---------
Меню
* Отступ от рамки слева на 5 пикселов
* Рубленый шрифт
* Уменьшеннвй на 30% размер шрифта
------------*/
.menu
{
}
/* ---------
Основная часть страницы
* Нулевой отступ блока
* Отступ содержимого от рамки на 10 пикселов
* Дополнительно отступ от левой границы на 100 пикселов
------------*/
.block3
{
}
/* ---------
Выделение подписи
* Рубленый шрифт
* Уменьшеннвй на 30% размер шрифта
* Отступ от левой границы на 105 пикселов
------------*/
.sign
{
}
Файл task04.htm
|
