УРОКИ CSS для начинающих. Базовый курс.


Урок 6. Свойства шрифта

На предыдущих уроках мы задавали стилевые классы для тегов, не вдаваясь в подробности свойств и их значений. На этом и следующем уроках познакомимся более подробно с различными свойствами шрифта и текста. Здесь я не стану предлагать практических упражнений, это скорей ознакомительный урок. Потому что, разобравшись с предыдущими уроками, Вы сможете применять рассматриваемые здесь свойства и значения без моей помощи.

Начнём со свойств, описывающих шрифт.

Рассмотрим фрагмент созданного в прошлом уроке стилевого класса .txt:

Листинг 6.1

body {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : left;
}
......

Стиль шрифта описывается свойствами font.

Здесь мы определили стиль для тега body, задав некоторые свойства для шрифта с помощью свойств font-family и font-size:

- font-family: [перечень семейств или названий шрифтов] - определяет семейства шрифтов: serif - шрифт с засечками, например, Times; sans-serif - шрифт без засечек - Helvetica; cursive - курсивный шрифт, например, Zarf-Chencery; fantasy - декоративный шрифт, например, Western; monospace - моноширинный шрифт, например, Courier и другие. Если название гарнитуры или семейства состоит из нескольких слов, рекомендуется заключать его в апострофы или кавычки, например 'Times New Roman Cyr'. Значение по умолчанию определяется браузером.

- font-size:[абсолютный] | [относительный] | [точный] | [проценты] - размер шрифта. В качестве значений этого свойства могут использоваться абсолютные, относительные и точные размеры, а также проценты.

Абсолютные размеры шрифта указываются с помощью предопределенных значений: xx-small | x-small | small | medium | large | x-large | xx-large. Значение по умолчанию - medium (средний).

Относительные размеры шрифта задаются относительно родительского элемента. Возможные значения: larger (больше), smaller (меньше). Например, если размер шрифта родительского элемента medium, то значение larger преобразует шрифт текущего элемента в large.

Точные размеры шрифта указываются в единицах длины, допускаемых в рекомендациях W3C. Это:

px - логические пиксели;

pt - логические пункты;

em - единицы размера шрифта.

Размер шрифта в процентах задается по отношению к родительскому элементу. Например, слово может иметь размер, на 20% больший, чем остальные слова фразы, благодаря свойству font-size: 120%.

Как видим, размеры могут быть заданы в различных единицах измерения, но я рекомендую не мудрить и пользоваться только пикселями (px).

Кроме двух названных выше свойств, шрифты описываются и другими свойствами:

- font-style: normal | italic | oblique - определяет начертание шрифта: нормальное (normal), курсивное (italic), наклонное (oblique). По умолчанию - normal.

- font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 - определяет толщину шрифта. По умолчанию - normal. Обычно используется только значение bold (полужирный). Значения от 100 до 900 указывают толщину так, что каждое последующее значение соответствует, по крайней мере, не меньшей жирности начертания, чем предшествующее. Нормальный шрифт normal соответствует номеру 400, полужирный bold - 700.

- font-variant: normal | small-caps - вариант начертания: нормальный (normal), малые прописные (small-caps). По умолчанию - normal.

Вот, собственно, и всё, что достаточно знать о свойствах и значениях шрифтов.

Для облегчения работы можно скачать Краткий справочник CSS.

Успехов. До встречи на следующем уроке>>>>>>>.

Важно! Те уроки по CSS, что выложены на нашем сайте - это очень далеко не всё, что следует знать по каскадным таблицам стилей. К тому же, web-технологии постоянно развиваются! Поэтому рекомендую скачать бесплатно видеоуроки по CSS, в которых вы найдёте много нового, соответствующего современным стандартам сайтостроения.

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

Оставьте свой отзыв о статье:



Введите цифровой код с картинки*:

осторожно, мошенник!

Эта информация поможет сохранить вам деньги >>>

Рассылки

"Вокруг Сайта"
подпишитесь и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

"PHP-песочница"
- PHP для начинающих: уроки с подробным анализом скриптов, необходимых для вашего сайта:

PHP-песочница
Подписаться письмом

Скачать видео

Разделы Сайта