Семейства шрифтов font-family

Таблица 4.1. Примеры шрифтов, входящих в различные семейства шрифтов

 

Семейство шрифтов	Примеры шрифтов	Описание семейства
serif	Times New Roman, Book Antiqua	Шрифт с засечками
sans-serif	Helvetica, Arial, Verdana	Шрифт без засечек
cursive	Zapf-Chancery	Курсивный шрифт
fantasy	Western, Comic	Декоративный шрифт
monospace	Courier New	Моноширинный шрифт

Варианты шрифтов разделяются запятыми, название шриф­та, состоящее из нескольких слов, заключается в кавычки:

р {font-family: 'Western, Times New Roman', serif;}

2. Толщина шрифта font-weight: lighter, bold, bolder.
Пример:

p.bold {font-weight: bold;} (относительно предыдущего текста).

3. Размер шрифта font-size: относительный (проценты — %), или абсолютный (пикселы — рх, пункты — pt, сантиметры — cm и миллиметры — mm).

Пример:

hi {font-size: 200%;} (относительно основного текста)

h2 {font-size: 50px;}

h3 {font-size: 12pt; }

4. Оформление текста text-decoration. Значения: подчеркива­ние (underline), надчеркивание (overline), зачеркивание (line-through), нет подчеркивания (попе).

Примеры:

h4 {text-decoration: underline;}

р {text-decoration: overline;}

.wrong {text-decoration: line-through;}

a {text-decoration: none;}

Цвет.

Цвет элемента color — цвет элемента в модели RGB или по стандартным названиям цветов.

Примеры:

hi {color: yellow;}

hi {color: yellow;}

.active {color: #FFFF00;}

2. Цвет фона background-color — цвет фона элемента (фоно­вый цвет).

Пример:

hl.grayback {background-color: #CCCCCC;}

Отступы.

1. Выравнивание text-align — выравнивание абзаца относи­тельно страницы или ячейки таблицы. Значения: по левому краю (left), по центру (center), по правому краю (right), по шири­не (justify).

Пример:

р {text-align: justify;}

Отступ первой строки text-indent — отступ первой строки абзаца (красная строка). Значение задается в пикселах (рх) или в пунктах (pt).

 

Пример:

р {text-indent: 50pt;}

3. Межстрочные интервалы Hne-heighn — междустрочный ин­тервал абзаца. Значение задается в пикселах (рх), пунктах (pt) или в процентах от размера шрифта (%).

Пример:

р {line-height: 50%;} межстрочные интервалы.

4. Отступы вокруг элемента margin — отступы вокруг элемен­та. Значение задается в пикселах (рх) или в пунтках (pt). Различ­ные типы этого параметра: одинаковый отступ со всех сторон (margin), отступ слева (margin-left), отсуп справа (margin-right), отступ сверху (margin-top), отступ снизу (margin-bottom).

Примеры:

р {margin: ЗОрх;}

img {margin-left: 20px;}

Рамка.

1. Толщина рамки border-width — толщина границы. Различ­ные типы этого параметра: толщина левой границы {border-left-width), толщина верхней границы {border-top-width), толщина правой границы {border-right-width), толщина нижней границы {border-bottom-width). Значение задается в пикселах (рх).

Пример:

.lineTop {border-top-width: Зрх;}

2. Цвет рамки border-color — цвет рамки (границы).
Пример:

.lineRed {border-color: #FF0000;}

3. Стиль рамки border-style — стиль границы. Значения: гра­ницы нет {попе), сплошная линия {solid), пунктирная линия {dotted), штриховая линия {dashed), двойная линия {double), объ­емная канавка {groove), объемный гребень {ridge), объемнаякнопка внутрь {inset), объемная кнопка наружу {outset).

Пример:

.lineSimple {border-style: outset;}

4. Обобщающий стиль рамки border — обобщающий стиль границы, объединяющий три параметра: толщину, стиль и цвет границы. Порядок записи параметров неважен:

border: ширина стиль цвет; border-tor: ширина стиль цвет; border-right: ширина стиль цвет; border-bottom: ширина стиль цвет; border-left: ширина стиль цвет;

Пример:

td.blueBorder {border: 4px dotted #003399}

Обобщающий стиль можно задавать для определенной сто­роны границы: слева (border-left), сверху (border-top), справа (border-right), снизу (border-bottom).

Пример:

td.red21ine {border-color: #FF0000;

border-left: 2px double;

}