При форматировании 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;
}
