www html, html уроки, html теги, css, верстка
статьи html уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > FAQ > контент > Что обозначает единица em, применяемая для задания...

Справочник по CSS (ЦСС) и ШТМЛ

Что обозначает единица em, применяемая для задания размера шрифта?

Наряду с пикселами, пунктами и процентами находит свое применение единица em, которая обычно используется для определения размера шрифта. Давайте разбираться, что это такое.

Единица em отталкивается от размера основного шрифта объекта. Предположим, что для всей страницы мы установили шрифт размером 14 пунктов (пример 1), тогда единица 1em будет эквивалентна 14pt.

Пример 1. Основной контент

Валидный HTML
Валидный CSS

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN" "http://www.w3.org/TR/ШТМЛ4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Размер шрифта в pt и em</title>
<style type="text/CSS (ЦСС)">
BODY {
font-size: 14pt; /* Размер шрифта в пунктах */
}
h1 {
font-size: 1em; /* Размер шрифта в em */
}
</style>
</head>
<body>
<p>Шрифт размером 14 пунктов.</p>
<h1>Заголовок размером 1em.</h1>
</body>
</html>

В данном примере параметры основного контента определяются с помощью атрибута font-size, добавляемого к селектору BODY. Поскольку размер контента задан явно для всего объекта, то 1em равен 14pt, поэтому заголовок, заключенный в контейнере <H1> также будет выводиться размером 14 пунктов (рис. 1).

Рис. 1

Рис. 1. контент, в котором используются разные единицы измерения

В том случае, когда размер контента напрямую не задан, браузер устанавливает значение размера самостоятельно. В каждом случае эта величина будет своя, например, для тега <H1> обычно используется 24pt, для <H2> ? 18pt, а для основного контента ? 12pt. При этом за 1em принимается размер, задаваемый браузером по умолчанию для основного контента. Как правило, браузеры исходно используют шрифт 12 пунктов. Следовательно, 2em эквивалентно 24pt, а 3em равно 36pt (пример 2).

Пример 2. Размер основного контента по умолчанию

Валидный HTML
Валидный CSS

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN" "http://www.w3.org/TR/ШТМЛ4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Размер шрифта в em</title>
<style type="text/CSS (ЦСС)">
h1 {
font-size: 2em; /* Размер шрифта в em */
}
</style>
</head>
<body>
<h1>Шрифт размером 2em.</h1>
<p>Основной контент.</p>
</body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2

Рис. 2. Заголовок размером 2em

Допустимо задавать не только целые числа, но и дробные, например 0.5em. Вместо em можно использовать процентную запись, при этом 1em равен 100%.

Поиск по сайту



FAQ

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект