Опубликован: 24.01.2007 | Доступ: свободный | Студентов: 9048 / 1428 | Оценка: 4.28 / 4.09 | Длительность: 20:51:00
Лекция 7:

Отображение XML-документов с использованием таблиц каскадных стилей

Установка свойств шрифта

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

  • font-family ;
  • font-size ;
  • font-style ;
  • font-weight ;
  • font-variant.

Все эти свойства наследуются дочерними элементами.

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

Свойство font-family определяет имя шрифта (гарнитуру), используемого для отображения текста элемента. Например:

BOOK {font-family:Arial}

Вы можете задавать любое имя шрифта по вашему желанию. (Имена шрифтов не являются ключевыми словами CSS.) Если браузер не может найти требуемый шрифт, он заменит его на другой доступный шрифт.

Совет. Если имя шрифта содержит пробелы, заключите название в кавычки, как в следующем примере: BOOK {font-family:"Times New Roman"}.

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

BOOK {font-family:Arial, Helvetica}

Если шрифт Arial не доступен, браузер использует шрифт Helvetica. Если шрифт Helvetica также не доступен, он заменит его на какой-либо другой имеющийся шрифт.

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

BOOK {font-family:Arial, Helvetica, sans-serif}

В этом случае, если браузер не найдет шрифтов Arial или Helvetica, он использует какой-либо другой шрифт без засечек ( sans-serif ).

В следующей таблице приведен перечень ключевых слов, которые вы можете использовать для указания общего типа нужного вам шрифта. В спецификации CSS они носят название имен родовых семейств. Для каждого имени родового семейства в таблице также приведено имя определенного шрифта, принадлежащего к этому семейству, а также образцы отображения текста для указанного семейства. (Конкретные типы шрифтов, которые будет использовать Internet Explorer 5 при отображении текста, зависят от набора шрифтов, которые установлены в Microsoft Windows, поэтому ваши шрифты могут отличаться от представленных в таблице 7.1.)

Таблица 7.1

Таблица 7.1

Например, если вы присоединили следующую таблицу стилей к XML-документу из Листинга 7.2, Internet Explorer 5 отобразит документ, как показано на рисунке 7.7.

BOOK
	{display:block;
	margin-top:12pt;
	font-family:Arial, sans-serif;
	font-size:12pt}
TITLE
	{font-style:italic}
AUTHOR
	{font-family:"Times New Roman", serif}

Рис. 7.7.

Шрифт Arial, назначенный свойству font-family элемента BOOK, наследуется всеми дочерними элементами, за исключением элемента AUTHOR, для которого задано свое значение свойства font-family ("Times New Roman", serif).

Установка свойства 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.
    Аббревиатура Сантиметры Дюймы Миллиметры Пики Пункты
    Cm 1 0,3937 10,0 2,3622 28,3465
    In 2,54 1 25,4 6 72
    mm 0,1 0,03937 1 0,23622 2,83465
    pc 0,42333 0,16667 4,23333 1 12
    pt 0,03528 0,01389 0,35278 0,08333 1

    Например, следующие два правила присваивают абсолютные значения размеров:

    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%}. )

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

Максим Попов
Максим Попов

Почему при использовании скриптов, приведенных в курсе Основы XML

лекция Лекция 8: 

Отображение XML-документов с использованием связывания данных

не происходит связывания XLM документа с HTML?

Отображаются пустые поля. Браузер IE11

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!

Геннадий Шестаков
Геннадий Шестаков
Беларусь, Орша
Наталья Алмаева
Наталья Алмаева
Россия