Основы XML

       

Установка свойства font-size


Свойство font-size устанавливает высоту шрифта, используемого для отображения текста элемента. Вы можете присваивать этому свойству четыре различных типа значений.

  • Значение, задающее размер относительно размера шрифта браузера. Вы можете задать размер шрифта относительно текущего размера шрифта браузера, присвоив свойству font-size одно из значений в виде ключевых слов, представленных в таблице 7.2. Для Internet Explorer 5 значение small заставит браузер использовать текущий выбранный размер шрифта; другие значения масштабируются с увеличением или уменьшением относительно этого размера.

    Таблица 7.2.

    Ключевое слово для font-size:xx-small
    Пример правила CSS: TITLE {font-size:xx-small}
    Описание:Наименьший размер шрифта, который может задаваться с помощью ключевого слова
    Ключевое слово для font-size:x-small
    Пример правила CSS:TITLE {font-size:x-small}
    Описание:Приблизительно в 1,5 раза больше, чем xx-small
    Ключевое слово для font-size:Small
    Пример правила CSS:TITLE {font-size:small}
    Описание:Приблизительно в 1,5 раза больше, чем x-small . Это значение предписывает Internet Explorer 5 использовать его текущий размер шрифта
    Ключевое слово для font-size:Medium
    Пример правила CSS:TITLE {font-size:medium}
    Описание:Приблизительно в 1,5 раза больше, чем small
    Ключевое слово для font-size:large
    Пример правила CSS:TITLE {font-size:large}
    Описание:Приблизительно в 1,5 раза больше, чем medium
    Ключевое слово для font-size:x-large
    Пример правила CSS:TITLE {font-size:x-large}
    Описание:Приблизительно в 1,5 раза больше, чем large
    Ключевое слово для font-size:xx-large
    Пример правила CSS:TITLE {font-size:xx-large}
    Описание:Приблизительно в 1,5 раза больше, чем x-large

    Примечание. Спецификация CSS рекомендует использовать масштабный коэффициент 1,5. Однако в Internet Explorer 5 реальное соотношение между различными значениями размера отличается в меньшей степени. Например, medium в действительности составляет примерно 1,15 от small .

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

    Таблица 7.3.

    Ключевое слово для font-size:smaller
    Пример правила CSS:TITLE {font-size:smaller}
    Описание:Размер шрифта, приблизительно на 33 % меньше размера шрифта для родительского элемента (или, для корневого элемента, на 33 % меньше размера шрифта браузера)
    Ключевое слово для font-size:larger
    Пример правила CSS:TITLE {font-size:larger}
    Описание:Размер шрифта, приблизительно на 50 % больше размера шрифта для родительского элемента (или, для корневого элемента, на 50 % больше размера шрифта браузера)
    <
    Примечание. Значения 33 % и 50 %, приведенные в таблице, основаны на масштабном коэффициенте 1,5, рекомендованном спецификацией CSS. В действительности результат может оказаться иным.

  • Задание размера в процентах от размера родительского шрифта. Вместо того, чтобы использовать ключевые слова smaller или larger , вы можете задать размер шрифта в процентах относительно текущего размера шрифта родительского элемента с большей степенью точности, задав свойству font-size значение в процентах. Например, следующее правило устанавливает размер шрифта, в полтора раза больше, чем размер шрифта родительского элемента: TITLE {font-size:150%}

    (Если браузер использует рекомендуемый масштабный коэффициент 1,5, это правило будет эквивалентно правилу TITLE {font-size:larger} .)

    Следующее правило устанавливает размер шрифта немного больше, чем установленный предыдущим правилом:

    TITLE {font-size:160%}

    Заметим, что для корневого элемента проценты берутся относительно размера шрифта браузера. (Более подробная информация содержится на вставке "Задание значений в процентах".)

  • Задание численных значений размера. Вы также можете задать размер шрифта для элемента, присвоив свойству font-size абсолютное значение. (См. вставку "Задание значений в размерных единицах" далее в этой лекции.) Например, следующее правило устанавливает размер шрифта в 12 пунктов: TITLE {font-size:12 pt}



    А это правило устанавливает размер шрифта в два раза больше, чем размер шрифта родительского элемента:

    TITLE {font-size:2 em}

    (Этот пример эквивалентен записи TITLE {font-size:200%} .)

    Задание значений в процентах

    Вы можете задавать для определенных свойств значения в процентах. Это необходимо, если вы имеете дело с относительными размерами, а не с действительными абсолютными размерами.

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



    SECTION {line-height:200%}

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

    PARAGRAPH {font-size:75%}

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

    Задание значений в размерных единицах

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

    Абсолютное значение размера определяет точный размер с использованием стандартных единиц измерения, таких как дюймы, пункты или миллиметры. В таблице 7.4 приведен список различных единиц измерения, которыми вы можете пользоваться. Для каждой единицы представлена аббревиатура, которую вы должны применить для указания единиц измерения в правиле. Здесь же даны эквивалентные значения в других единицах измерения.

    Таблица 7.4. АббревиатураСантиметрыДюймыМиллиметрыПикиПункты
    Cm10,393710,02,362228,3465
    In2,54125,4672
    mm0,10,0393710,236222,83465
    pc0,423330,166674,23333112
    pt0,035280,013890,352780,083331
    Например, следующие два правила присваивают абсолютные значения размеров:

    STANZA {font-size:12pt} PARAGRAPH {margin-top:.25in}

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



    Таблица 7.5. ЕдиницаРазмерность единицы
    emВысота текущего шрифта элемента
    exВысота строчной буквы x текущего шрифта элемента
    pxРазмер пикселя на мониторе
    Имеется одно исключение: когда вы присваиваете свойству font-size значение в единицах em или ex , оно берется относительно размеров шрифта родительского элемента.

    Например, следующее правило добавляет к элементу отступ сверху. Высота поля отступа будет равна высоте шрифта элемента:

    BOOK {margin-top:1em}

    Следующее правило создает верхнее поле высотой 15 пикселей:

    SECTION {margin-top:15px}

    А это правило устанавливает высоту шрифта элемента в три четверти от высоты шрифта его родительского элемента:

    PARAGRAPH {font-size:.75em}

    (Это последнее правило эквивалентно правилу PARAGRAPH {font-size:75%} .)

    Заметим, что если дочерний элемент наследует относительное значение, наследуется результат вычисления, а не само относительное значение.



Содержание раздела