Основы CSS. Часть 2

1554
0
0

Автор: Дмитрий Сапожников inter2006@mail.ru
aupair-evro.narod.ru

Источник материала izcity.com

Продолжение. Первую часть статьи читайте здесь izcity.com/data/raznoe/article587.htm

Сегодня мы с вами рассмотрим следующие свойства шрифтов: font-size, font-style, font-family. По каждому свойству шрифта, для наглядности, будут приведены небольшие примеры.

Свойство font-size

Свойство font-size определяет размер шрифта. Обычно задается в пикселях px или в процентах pt.

Пример:

P {
font-size : 10pt;
}
EM {
font-size : 10px;
}

Свойство font-style

Свойство font-style определяет стиль шрифта из выбранного семейства: нормальный (normal), курсивный (italic) или наклонный (oblique).

Примеры:

1.Normal:

EM {
font-style : normal;
}

Отображение в браузере: Вася Пупкин.

2.Italic:

EM {
font-style : italic;
}

Отображение в браузере: Вася Пупкин.

Свойство font-family

Это свойство показывает каким шрифтом будет отображен текст. Через запятую можно указывать несколько шрифтов.

Приведу фрагмент стиля:

P {
FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; text-align: justify; padding-right: 3px;
}

В данном случае текст заключенный в параграфы <p></p> будет отображаться шрифтом Arial, а если на пользовательской машине не установлен этот шрифт то шрифтом Helvetica, а если нет и последнего то шрифтом sans-serif.

При использовании свойств шрифтов часто приходиться выбирать разные свойства для разных элементов.

Приведу пример CSS:

TD {
FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif
}
B {
FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif
}
H2 {
FONT-WEIGHT: bold; FONT-SIZE: 12pt; MARGIN: 0px; COLOR: #000000; TEXT-INDENT: 0pt; FONT-FAMILY: Arial, Helvetica, sans-serif
}
H3 {
FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #829eaa; margin-bottom: 3pt; LINE-HEIGHT: normal; FONT-FAMILY: Arial, Helvetica, sans-serif
}
H4 {
FONT-WEIGHT: bold; FONT-SIZE: 10pt; MARGIN: 0px; COLOR: #000000; TEXT-INDENT: 0pt; FONT-FAMILY: Arial, Helvetica, sans-serif
}
H5 {
FONT-WEIGHT: bold; FONT-SIZE: 8pt; MARGIN: 0px; COLOR: #000000; TEXT-INDENT: 0pt; FONT-FAMILY: Arial, Helvetica, sans-serif
}

Как видите, я задал различные свойства шрифта для разных частей документа. Как это выглядит на экране, смотрите здесь aupair-evro.narod.ru

Теги Web


    Вы должны авторизоваться, чтобы оставлять комментарии.

    При использовании материалов данного сайта прямая и явная ссылка на сайт radiomaster.ru обязательна. 0.2195 s