Вход/Регистрация
HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
вернуться

Дронов Владимир

Шрифт:

Значение normal этого атрибута возвращает управление высотой строки Web-обозревателю.

Атрибут стиля letter-spacing позволяет задать дополнительное расстояние между символами текста:

letter-spacing: normal|<расстояние>

Отметим, что это именно дополнительное расстояние; оно будет добавлено к изначальному, установленному самим Web-обозревателем.

Здесь также можно задать абсолютное и относительное расстояние, указав соответствующую единицу измерения CSS (см. табл. 8.1). Расстояние может быть положительным и отрицательным; в последнем случае символы шрифта будут располагаться друг к другу ближе обычного. Значение normal устанавливает дополнительное расстояние по умолчанию, равное нулю.

Атрибут стиля letter-spacing не поддерживает значение inherit.

Вот пример задания дополнительного расстояния между символами равного пяти пикселам:

H1 { letter-spacing: 5px }

Текст, набранный такими символами, будет выглядеть разреженным.

А здесь мы задали отрицательное дополнительное расстояние между символами равным двум пикселам:

H6 { letter-spacing: -2px }

Эти два пиксела будут вычтены из изначального расстояния, в результате символы сблизятся, а текст станет выглядеть сжатым. Возможно, символы даже налезут друг на друга.

Аналогичный атрибут стиля word-spacing задает дополнительное расстояние между отдельными словами текста:

word-spacing: normal|<расстояние>

Пример:

H1 { word-spacing: 5mm }

Ну, 5 мм, пожалуй, многовато… Хотя это всего лишь пример.

И напоследок рассмотрим атрибут стиля font, позволяющий задать одновременно сразу несколько параметров шрифта:

font: [<начертание>] [<вид строчных букв>] [<"жирность">] [<размер>[/<высота строки текста>]] <имя шрифта>

Как видим, обязательным является только имя шрифта — остальные параметры могут отсутствовать.

Задаем для текста абзацев шрифт Times New Roman размером 10 пунктов:

P { font: 10pt "Times New Roman" }

А для заголовков шестого уровня — шрифт Arial размером 12 пунктов и курсивного начертания:

H6 { font: italic 12pt Verdana }

Параметры, управляющие разрывом строк

По умолчанию Web-обозреватель разбивает текст на строки так, чтобы вместить его в окно и избежать горизонтальной прокрутки. Далеко не всегда при этом он разрывает строки, как нам нужно. Конечно, мы можем установить фиксированное форматирование текста (см. главу 2) и принудительно указать, где следует переносить строки, но не всегда это лучший подход.

CSS предлагает два атрибута стиля, позволяющие нам указать, как Web-обозревателю следует разбивать текст на строки. Сейчас мы их рассмотрим.

Атрибут стиля white-space задает правила, которыми Web-обозреватель руководствуется при выводе текста. В частности, с его помощью мы можем изменить правила, установленные по умолчанию и рассмотренные нами в главе 2. Формат записи этого атрибута стиля:

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit

Атрибут стиля white-space может иметь пять значений.

— normal — последовательности пробелов преобразуются в один пробел, переводы строк также преобразуются в пробелы. Web-обозреватель сам разрывает текст на строки, чтобы вместить его в свое окно по ширине. Фактически это значение предписывает Web-обозревателю применять для вывода текста блочных элементов правила по умолчанию, описанные в главе 2.

— pre — последовательности пробелов и переводы строк сохраняются; текст выводится точно в таком виде, в каком он записан в HTML-коде. Web- обозреватель сам не разрывает текст на строки. Фактически текст выводится так, словно он помещен в тег <PRE> (текст фиксированного форматирования).

— nowrap — последовательности пробелов преобразуются в один пробел, переводы строк также преобразуются в пробелы. Однако Web-обозреватель сам не разрывает текст на строки.

— pre-wrap — последовательности пробелов и переводы строк сохраняются. Web- обозреватель может разорвать слишком длинные строки, чтобы избежать горизонтальной прокрутки.

— pre-line — последовательности пробелов преобразуются в один пробел, переводы строк сохраняются. Web-обозреватель может разорвать слишком длинные строки, чтобы избежать горизонтальной прокрутки.

Чтобы читателям было проще выбрать нужное значение атрибута стиля white-space, автор свел все доступные для него значения в табл. 8.2.

Таблица 8.2. Значения атрибута стиля white-space и результаты их применения

Вот стиль, переопределяющий тег <PRE> так, чтобы при необходимости его содержимое разрывалось на строки:

PRE { white-space: pre-wrap }

Атрибут стиля word-wrap применяется нечасто, но в некоторых случаях без него не обойтись. Он позволяет указать места, в которых Web-обозреватель может выполнить разрыв текста:

  • Читать дальше
  • 1
  • ...
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • ...

Ебукер (ebooker) – онлайн-библиотека на русском языке. Книги доступны онлайн, без утомительной регистрации. Огромный выбор и удобный дизайн, позволяющий читать без проблем. Добавляйте сайт в закладки! Все произведения загружаются пользователями: если считаете, что ваши авторские права нарушены – используйте форму обратной связи.

Полезные ссылки

  • Моя полка

Контакты

  • chitat.ebooker@gmail.com

Подпишитесь на рассылку: