4 Управление размером элементов с помощью css. Использование процентного размера.

В CSS-свойстве font-size используются различные единицы измерения размера шрифта (em, ex, px, in, cm, mm, pt, pc, %), которые могут быть разделены на две группы.

Относительные длины

em: ширина одного символа «главного» шрифта.

ex: высота одного символа «главного» шрифта.

px: пиксел, зависит от дисплея (разрешение и плотности пикселей)

Абсолютные длины

in: дюймы. Один дюйм равен 2.54 сантиметра

cm: сантиметры

mm: миллиметры

pt: «пункты» — 1 пункт в CSS равен 1/72 дюйма.

pc: пика — 1 пика равна 12 пунктам.

Величина «проценты» определена относительно длины или другой величины.

При использовании пикселей для задания размера шрифта не нужно задумываться о том, как они будут отображаться в различных браузерах: 12 пикселов везде 12 пикселей. Однако при изменении размера шрифта, установленного в браузере по умолчанию, могут возникнуть различные проблемы, связанные с отсутствием должной поддержки в браузерах. По этой причине организации, подобные W3C, против использования пикселей для определения размера шрифта. Дело в том, что большинство браузеров изменяет размер текста, просто увеличивая и уменьшая его. Однако браузеры последних версий вместо этого стали использовать масштабирование всей страницы: уменьшение или увеличение всех элементов на странице.

Отсутствие масштабирования страниц в Internet Explorer 6 может вызывать трудности. Можно использовать em’ы и проценты для всех браузеров, или conditional comment stylesheet (условно комментируемую таблицу стилей) для Internet Explorer 6 и пиксели – для остальных браузеров.

Em’ы и проценты

В том случае, если ваша аудитория состоит из людей, использующих Internet Explorer 6, можно использовать только em’ы или проценты для задания размера шрифтов. Правило: target ? context = result.

Пример

Если мы устанавливаем в body размер шрифта 100% (примерно 16px в большинстве браузеров), то можно взять этот размер за «context». Если необходимо установить размер 12px (это «target») для нормального текста и 20px (это target) для заголовков, то имеем (используя правило):

12 ? 16 = 0,75

20 ? 16 = 1,25

view source

print?01 body {

02 font-size: 100%;

03 }

04 p {

05 font-size: .75em;

06 }

07

08 h1 {

09 font-size: 1.25em;

10 }

Если бы мы использовали пиксель, нужно было бы сделать примерно так:

view source

print?1 p {

2 font-size: 12px;

3 }

4

5 h1 {

6 font-size: 20px;

7 }

Если мы захотели сделать текст параграфа размером 13px, то нужно поступить следующим образом: используем размер текста параграфа в качестве context и имеем 13 ? 12 = 1,0833.

view source

print?1 p strong {

2 font-size: 1.0833em;

3 }

font-size Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры)

H1 {font-size: 200%;}

H2 {font-size: 150px;}

H3 {font-size: 400pt;}