Опубликован: 19.03.2007 | Уровень: для всех | Доступ: платный
Лекция 4:

Форматирование текста

Вложенные стили

Приведенная выше страница включает вложенные таблицы стилей, где внутренняя настройка стиля наследует и затем временно переопределяет, или изменяет, настройки внешнего стиля. Внешний стиль <body>, например, задает вывод страницы шрифтом типа Arial размером 12 пунктов с полями страницы 20 пикселей и отступом параграфа 25 пикселей. Эти настройки остаются в силе, пока не будут переопределены, например, вложенными стилями <div>, которые изменяют поля для двух вложенных параграфов на 25 пикселей и задают отступ параграфа как 0 пикселей. Эти стили разделов переопределяются далее в одном из вложенных параграфов, в котором стиль шрифта изменяется на Comic Sans MS 13 пунктов, сохраняя поля и отступ из раздела. В этом параграфе теги <span> используются для переопределения стиля параграфа для отдельных строк текста, которые будут иметь отличающийся тип шрифта и размеры. Таблицы стилей могут вкладываться друг в друга, так что стили каскадно спускаются на любое количество уровней. Окончание действия настроек стиля происходит в обратном порядке. Этот момент иллюстрирует следующий код, показывающий структуру со сдвигами тегов <span>, которые применяют, а затем удаляют увеличивающиеся размеры шрифта с помощью линейных таблиц стилей.

<p>
<span style="font-size:12pt">
Здесь 
  <span style="font-size:16pt">
  показано 
    <span style="font-size:20pt">
    вложение 
      <span style="font-size:24pt">
        стилей	 
      </span>
    друг 
    </span>
  в 
  </span>
друга.
</span>
</p>
Листинг 4.4. Вложенные настройки стиля, использующие теги <span>
Применение вложенных стилей шрифта с помощью тегов <span>

Рис. 4.3. Применение вложенных стилей шрифта с помощью тегов <span>

Хотя такое количество вложенных стилей вряд ли будут часто использоваться, суть вопроса состоит в том, что каждый закрывающий тег </span>, начиная с самого внутреннего, завершает действие связанного с ним стиля, что приводит к возвращению действия следующего внешнего стиля, пока не будет отменено действие всех вложенных стилей. Не забывайте только правильно поддерживать пары открывающих и закрывающих тегов оформления.

Приведенный выше пример еще раз подчеркивает тот факт, что теги <span> не имеют своих собственных характеристик форматирования. Хотя они записаны на отдельных строках, чтобы показать вложенную структуру примера, они не создают переноса строк или пробелов при выводе в браузере. Результат вывода такой же, как если бы код был записан в виде следующей непрерывной строки.

<p><span style="font-size:12pt">Здесь<span style="font-size:16pt">показано<span 
    style="font-size:20pt">вложение<span style="font-size:24pt">стиля </span> 
    друг</span>в  </span>друга.</span></p>
Листинг 4.5. Другая запись кода задания вложенных стилей

В противоположность этому, тег <div> решает такие же задачи оформления, но, кроме того, создает перенос строки. Следующий код оформляет предыдущую строку текста с помощью тегов <div> и создает вывод, показанный на рисунке 4.4.

<div style="font-size:12pt">
  Здесь
    <div style="font-size:16pt">
      показано
        <div style="font-size:20pt">
          вложение 
            <div style="font-size:24pt">
              стиля 
            </div>
          друг 
        </div>
      в друга 
    </div>
  another.
</div>
Листинг 4.6. Вложенные настройки стилей, использующие теги <div>
Применение вложенного оформления шрифта с помощью тегов <div>

Рис. 4.4. Применение вложенного оформления шрифта с помощью тегов <div>

Необходимо помнить об этих различиях, так как теги <span> и <div> широко используются при оформлении элементов страницы.

Исключенный тег <font>

Хотя и не используемый в XHTML, но распространенный способ задания оформления шрифта состоит в применении тега <font>. Этот тег, подобно тегу <span>, задает для ограничиваемого текста тип шрифта, размер, и цвет. Общая форма тега <font> и его атрибуты показаны ниже.

<font
  face="face1 [,face2] [,face3]"
  size="n|+n|-n"
  color="color"
  >
    ... форматируемый текст ...
</font>

Атрибут face определяет разделенный запятыми список до трех типов шрифта, которые могут использоваться для текста, заключенного внутри тега <font>. Размеры шрифта можно задавать или изменять с помощью атрибута size. Значение этого атрибута может изменяться от 1 до 7, от наименьшего до наибольшего. Если размер не определен, то по умолчанию применяется системный размер шрифта 3, который соответствует примерно размеру шрифта 12 пунктов. Отметим, что размер шрифта определяется не в пунктах. Размер шрифта может изменяться относительно текущего размера с помощью модификаторов "+" или "-". Поэтому значение атрибута "+1" задает размер шрифта на один размер больше текущего значения.

Цвет шрифта можно задавать с помощью атрибута color. Значение цвета задается именем цвета или шестнадцатеричным значением. Эти способы будут рассмотрены в дальнейшем.

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

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

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

Спасибо!