CSS. Шрифтовое и абзационное оформление

advertisement
CSS. Шрифтовое и абзационное оформление
Параметры шрифтов
Семейство шрифта
Свойство font-family указывает приоритетный список шрифтов, используемых для
отображения данного элемента или web-страницы. Если первый шрифт списка не
установлен на компьютере, с которого выполняется доступ к сайту, ищется следующий
шрифт списка, пока не будет найден подходящий.
Например:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Стиль шрифта
Свойство font-style определяет normal, italic или oblique.
Например:
h2 {font-family: "Times New Roman", serif; font-style: italic;}
Вес шрифта
Свойство font-weight описывает, насколько толстым, или "тяжёлым", должен
отображаться шрифт. Шрифт может быть normal (обычный), bold (полужирный), bolder
(жирный). Некоторые браузеры поддерживают числовые значения 100-900 (в сотнях) для
описания веса шрифта.
Например:
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Размер шрифта
Размер шрифта устанавливается свойством font-size. Используются различные
единицы измерения (например, пикселы и проценты) для описания размера шрифта.
Например:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
'px' и 'pt' дают абсолютное значение размера шрифта, а '%' и 'em' - относительные.
Декоративный текст
Свойство text-decoration позволяет добавлять различные "декоративные эффекты".
Например, можно подчеркнуть текст (underline), перечеркнуть (line-through) провести
линию над текстом (overline).
Например:
h1 {text-decoration: underline;}
Интервал между буквами
Интервал между буквами текста можно специфицировать свойством letter-spacing.
Значение - нужная величина.
Например:
h1 {letter-spacing: 6px; }
Режимы преобразования текста
Свойство text-transform может иметь значения: capitalize (первая буква каждого
слова – заглавная), uppercase (все буквы заглавные), lovercase (все буквы строчные).
Сокращённая запись
Используя сокращенную запись font, можно указывать все свойства шрифта в
одном стилевом правиле:
p {font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif;}
Используя сокращённую запись, код можно упростить:
p {font: italic bold 30px arial, sans-serif;}
Параметры абзацев
Отступы
Свойство text-indent позволяет выделить параграф с помощью установки отступа
для его первой строки.
Например:
p {text-indent: 30px;}
Выравнивание текста
CSS-свойство text-align соответствует атрибуту выравнивания. Текст может быть
выровнен left, right, center или justify.
Например:
p {text-align: justify;}
Задание к уроку
Создать web-страницу graphic.htm с использованием стилей шрифтового и
абзационного форматирования. Ввести описание стилей h1, h2, p.
 Для стиля h1 задать шрифт Verdana, размер – 24 пункта, жирный
шрифт, выравнивание по центру;

Для стиля h2 задать шрифт Sans-serif, размер – 18 пунктов, жирный
шрифт, выравнивание по левому краю;
 Для стиля р задать шрифт Arial, размер – 14 пунктов, выравнивание по
ширине.
Примените эти стили к тексту, чтобы отформатировать его по образцу.
Образец:
Растровая и векторная графика
Растровая графика
Растровое изображение формируется как матрица точек различного цвета
(пикселей), которые образуют строки и столбцы. Каждый пиксель может
принимать любой цвет из палитры, содержащей десятки тысяч или даже десятки
миллионов цветов, поэтому растровые изображения обеспечивают высокую
точность передачи цветов и полутонов.
Векторная графика
Векторные изображения формируются из объектов (точка, линия,
окружность, прямоугольник и др.), которые называются графическими
примитивами. Для каждого примитива задаются опорные координаты и цвет.
Download