При форматировании html-документов с помощью css можно задавать размеры шрифта в относительных единицах em. Задавая размер шрифта задан в em, мы указываем размер шрифта относительно родительского контейнера. Чтобы было понятней рассмотрим следующий пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
h1 {
font-size: 2em;
font-weight: normal;
}
p {
font-size: 1em;
}
sup {
font-size: 0.5em;
}
</style>
</head>
<body>
<h1>Заголовок 40px<sup>Верхний индекс 20px</sup></h1>
<p>Параграф 20px<sup>Верхний индекс 10px</sup></p>
</body>
</html>
Итак мы задаем для body размер шрифта в 20px. Затем для h1 и p задаем размер шрифта соответственно в 2em (это будет 20px * 2 = 40px) и 1em (здесь я думаю и так всё понятно). Затем для тэга верхнего индекса sup задаем размер шрифта в 0.5em, то есть в половину размера шрифта родительского контейнера. В итоге получаем, что верхний индекс для тэга h1 будет иметь размер шрифта в 20px (40px * 0.5 = 20px), а для тэга p по аналогии 10px.
P. S. Всё было замечательно, пока я не решил проверить этот пример в IE7. Как и следовало ожидать вылез баг - размер шрифта в верхнем индексе был в 1.25 раза меньше, чем должен был быть. К счастью это лечится. В таблицу стилей для тэга sup заносим следующий код:
sup {
font-size: 0.5em;
//font-size: 0.625em;
}
спасибо!
ОтветитьУдалитьа как понимать этот em, когда с помощью него указывается размер элемента?
Размер элемента в этом случаи считается в относительных единицах от размера шрифта, заданного для родительского контейнера. Например для приведенного выше примера, код:
ОтветитьУдалить<body>
<div style="width: 10em; height: 2em; background-color: red;"></div>...
</body>
Задает контейнер шириной 200px и высотой 40px, а также присваивает его фону красный цвет, чтобы вновь созданный контейнер было видно.