Internet_tehnologii_kurs_lek

элементов языка HTML, отвечающих за представление документа, и с тех пор изменилось не многое. Кроме этого, у браузеров проявляется существенный изъян при изменении размера шрифта, из-за чего изменение размера шрифта становится настоящей головной болью. Мы практически бессильны в решении данных проблем, однако можно узнать, как управлять ими. Поэтому отнеситесь терпеливо к рассмотрению подробностей, хорошо?

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

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

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

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

счастью, можно воспользоваться несколькими практическими способами.

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

Serif - Буквы шрифта с засечками украшены завитушками, называемыми, как можно догадаться, засечками. Считается, что шрифты этой категории отлично подходят для текста элемента body, особенно при печати, а также для заголовков и другого текста, например заглавий. Шрифты с засечками, с которыми вы, вероятно, знакомы, включают в себя шрифты Times и Georgia - оба этих шрифта широко используются в Интернете.

Sans-serif - Термин sans-serif означает «без засечек» и описывает, буквально, шрифт без завитушек. Вместо этого, у шрифтов без засечек закругленные, более широкие буквы. В основном считается, что эти шрифты отлично подходят для заголовков при печати, но многие думают, что они являются лучшим выбором для текста элемента body, отображаемого на экране. Однако это утверждение не всегда верно, особенно когда дело касается текста очень маленького размера или курсива. К известным шрифтам этой категории относятся Arial, Helvetica, Verdana.

Monospace - Моноширинные шрифты - это шрифты, все буквы которых имеют одинаковую ширину. Они обычно используются для описания примеров программного кода. Совсем недавно эти шрифты были популярны в дизайне, придавая страницам очень «грязный» вид. Однако в основном использование моноширинных шрифтов ограничивается примерами кода. В вычислительной технике наиболее распространенным моноширинным шрифтом является шрифт Courier.

Fantasy - Фантастические шрифты, также известные как декоративные шрифты, - это шрифты с необычным внешним видом. Вид шрифтов замысловатый, поэтому их полезно использовать для заголовков или небольших областей текста, но они не совсем подходят для текста элемента body, поскольку украшения затрудняют чтение текста. В языке CSS фантастические шрифты будут использоваться редко, если вообще будут, поскольку их очень много и они не устанавливаются на большинстве компьютеров. Примером является шрифт Western.

Cursive - Курсивные шрифты известны также под названием рукописные шрифты. Они имитируют курсивную рукопись и насыщены завитушками. Как и в случае с фантастическими шрифтами, в языке CSS рукописные шрифты применяются редко. Многие дизайнеры используют фантастические и рукописные шрифты в изображениях, которые затем становятся декоративными типографическими элементами дизайна. Известным

рукописным шрифтом является шрифт Lucida Handwriting, как показано на рисунке 9.1.

Рис. 9.1. Использован встроенный язык CSS для стилизации каждой строки текста указанным шрифтом

Шрифты, установленные почти в каждой операционной системе, включают: Arial, Helvetica, Verdana, Time, Georgia и Courier. Шрифты Tahoma, Trebuchet и Lucida широко распространены, поскольку они поставляются со всеми версиями операционной системы Windows, а изначально они включались в пакет Web Font Pack корпорации Microsoft - бесплатный набор шрифтов, распространявшийся корпорацией Microsoft в начале развития Интернета.

Если вы - новичок, то со шрифтами лучше всего придерживаться очень простой схемы. Можно воспользоваться одной из перечисленных схем:

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

Выберите два шрифта, распространенный без засечек и распространенный с засечками. Используйте шрифт с засечками для всех заголовков, заглавий и другого текста; шрифт без засечек используйте для элемента body. (Такая схема очень распространена в Интернете.)

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

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

61

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

Для этого выбирается желаемый текст, к которому применяется свойство font-family с определенным значением.

Значением для свойства font-family может являться одиночное название шрифта, ключевое слово семейства шрифтов или ряд названий шрифтов, за которыми следует ключевое слово семейства шрифтов.

Одиночные названия шрифтов Выбирайте этот подход только в том случае, если вы абсолютно уверены, что у посетителей установлен указанный шрифт. body {font-family: Arial;}

Эта инструкция назначает шрифт Arial шрифтом по умолчанию для всех документов. Проблема заключается в том, что если на машине пользователя не установлен шрифт Arial, браузер использует шрифт по умолчанию - обычно это шрифт Times, и в результате страница будет выглядеть совершенно иначе, чем предполагалось.

Ключевые слова семейства шрифтов

Ключевые слова семейств шрифтов в языке CSS соответствуют названиям семейств, описанных в предыдущей части: serif, sans-serif, monospace, fantasy и cursive.

hi {font-family: fantasy;}

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

hi {font-family: Arial, sans-serif;}

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

Несколько названий Подход, предоставляющий больше возможностей управления, заключается в использовании нескольких названий из семейства. Это

означает выбор названий шрифтов из одного семейства и их перечисление в определенном порядке: body {font-family: Arial, Helvetica, Verdana, sans-serif;}

Браузер попытается найти первый шрифт в списке; если этот шрифт на машине пользователя не существует, будет применен второй или третий шрифт. Помимо этого, обратите внимание, что добавлено ключевое имя семейства.

Впримере 9.1 создана таблица стилей для демонстрации использования свойства

font-family.

Пример 9.1. Применение шрифтов к элементам страницы body {font-family: Georgia, Times, serif;}

hi, h2 {font-family: Arial, Helvetica, sans-serif;}

Обратите внимание, что описан шрифт для элемента body, но не для абзацев. Этот шрифт будет использован по умолчанию для любого текста, размещенного в разделе документа body.

В этом примере абзацы просто наследуют семейство шрифтов от элемента body. Обратите также внимание, что сгруппированы селекторы hi и h2, поскольку для них будет использован один и тот же шрифт. На рисунке 9.2 показаны результаты.

Конечно, пока еще не определены другие размеры или стили. В результате, применяются стили браузера, поэтому стандартный размер для элементов hi и h2, и абзацев будет определяться браузером, пока не будут созданы дополнительные правила для управления этими стилями.

Рис. 9.2. Шрифт без засечек используется для заголовков, а шрифт с засечками используется для раздела документа body

Изменение размера шрифтов

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

Ключевые слова абсолютных и относительных значений Ключевые слова абсолютных значений задают размеры шрифта, основываясь на способе расчета размера браузером. Доступны

следующие ключевые слова: xx-small, x-small, small, medium, large, x-large, xx-large. В следующем примере я применила ключевое слово абсолютного значения к тексту абзаца:

Р {font-size: medium,-}

Размер medium обычно соответствует размеру по умолчанию, используемому браузером для этого элемента. На рисунке 9.3 показано применение всех ключевых слов к стандартному тексту браузера.

Рис. 9.3. Изменение размера шрифта в браузере при помощи ключевого слова абсолютного значенья

Если ключевые слова абсолютных значений зависят от расчетов браузером размеров шрифтов, ключевые слова относительных значений - larger и smaller - связаны с размером родительского элемента. Таким образом, если размеру шрифта для элемента body присвоить значение medium, можно использовать ключевое слово относительного значения larger для изменения значения размера на large, или ключевое

62

слово smaller - для изменения значения размера на small. Просто запомните, что ключевые слова относительных значений связаны с предопределенными размерами, заданными ключевым словом, значениями длины или значениями, выраженными в процентах.

Значения длины Значения длины используются для многих свойств. Они включают три относительных, и пять абсолютных значений. К относительным

значениям относятся em, ex и рх; к абсолютным значениям относятся pt, pc, in, mm и cm. Абсолютные значения не следует использовать для отображения на экране, хотя они полезны при создании таблиц стилей для печати документа.

Наиболее распространенными значениями длины для текста в Интернете являются пикселы и единицы размера шрифта (em), поскольку, с технической точки зрения, оба эти значения масштабируемы, что подходит для экрана. Однако есть одна существенная проблема: браузер Internet Explorer для операционной системы Windows корпорации Microsoft не масштабирует пикселы. Это ужасное упущение, которое привело к огромным проблемам в основном из-за того, что пользователям с плохим зрением нужно предоставить масштабируемые размеры шрифтов. Сравните значения слева со значениями справа, показанные на рисунке 9.4, где увеличен размер текста браузера (выбрав в браузере IE команду меню Вид ♦ Размер текста (View ♦ Text Size)) со стандартного значения medium до значения larger.

Рис. 9.4. Сравнениеразмеров шрифтов в браузере Internet Explorer 6.0

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

Проценты Процентные значения, используемые для изменения размера шрифтов, всегда выражаются относительно другого значения, например

ключевого слова или значения длины. Поэтому, если задать размер шрифта элемента body равным значению 1ет, а размер шрифта элемента hi - 150%, получим, что размер шрифта элемента hi будет больше размера шрифта элемента body, относительно стандартных значений браузера:

body{font-size: lem;} hi {font-size: 150%;}

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

Чтобы набить руку, в этой книге вы будете использовать множество вариантов изменения размера шрифтов. За дополнительной информацией о проблемах, связанных с изменением размеров шрифтов, обратитесь к статье Оувена Бригза (Owen Briggs) «Text Sizing» no

адресу http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html.

Жирность и стиль шрифта Фьюить! Слишком много деталей для простой книги. Но я была вынуждена сделать это, чтобы быть с вами справедливой и убедиться, что

вы получили прочные знания. Теперь давайте перейдем к самому представлению!

Помимо семейства и размера, шрифты могут иметь жирность и стиль. Жирность шрифта относится к тому, насколько жирным (или нежирным) является шрифт.

Стиль шрифта относится к различным начертаниям, которые могут существовать в определенном семействе. Жирность шрифта

Определение жирности шрифта осуществляется при помощи свойства font-weight и ассоциированного с ним значения. Значения для выражения жирности шрифта включают в себя: число (100-900, где 100 - самый тонкий шрифт, 900 - самый жирный и 400 - обычный), ключевое слово normal (соответствующее значению жирности, равному 400), ключевое слово bold (эквивалентно значению жирности, равному 700), ключевое слово bolder (определяет следующее большее значение жирности) и ключевое слово lighter (определяет следующее меньшее значение жирности).

В примере 9.2 демонстрируется таблица стилей, в которой применяется несколько значений жирности. Пример 9.2. Стили, описывающие семейство шрифта, размер и жирность

body {font-family: Georgia, Times, serif; font-size: lem; font-weight: normal;}

hl,h2 {font-family: Arial, Helvetica, sans-serif;} hi {font-size: 150%; font-weight: bold;}

h2 {font-size: 130%; font-weight: lighter;}

.accent {font-weight: 700;}

На рисунке 9.5 показан текст с примененными стилями, который использовался ранее в этой главе.

63

Рис. 9.5. Использование жирности для элемента body, заголовков и класса accent

Поддержка числовых значений от 100 до 900 для свойства font-weight реализована недостаточно хорошо. Лучше всего использовать только те значения, которые соответствуют известной жирности шрифта - например, 400 для обычного шрифта, 700 — для жирного шрифта.

Стиль шрифта

СТИЛИ шрифта позволяют изменить начертание. Для определения начертания шрифта, используется свойство font-style со значением normal, italic или oblique.

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

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

Значение italic используется для выделения текста курсивом. Практическое значение? Почти во всех случаях наилучшим значением для свойства font-style будет italic, как показано в примере 9.3.

Пример 9.3. Стили, описывающие семейство шрифта, размер, жирность и стиль body {font-family: Georgia, Times, serif; font-size: lem,-

font-weight: normal;}

hl,h2 {font-family: Arial, Helvetica, sans-serif;} hi {font-size: 150%; font-weight: bold,-}

h2 {font-size: 130%; font-weight: lighter; font-style: italic;}

.accent {font-weight: 700;}

На рисунке 9.6 показано использование курсива для заголовка элемента h2.

Рис. 9.6. Применение стиля шрифта к элементу h2

Раскрашивание текста

Это простая часть! Цвет текста определяется свойством color, в названии которого нет префикса font или text.

Для раскрашивания текста просто используется свойство color с подходящим значением цвета. Можно обратиться к главе 8 «Работа с цветом и изображениями с использованием языка CSS», в которой я много раз применяла свойство color и рассматривала значения цветов. Для того чтобы немного раскрасить текст необходимо добавить свойство color к существующим стилям, как показано в примере 9.4.

Пример 9.4. Раскрашивание текста

body {font-family: Georgia, Times, serif; font-size: lem; font-weight: normal; color: black;} hl,h2 {font-family: Arial, Helvetica, sans-serif;} hi {font-size: 150%; font-weight: bold; color: #999;} h2 {font-size: 130%; font-weight: lighter; font-style: italic-color: #333;} .accent {font-weight: 700; color: red;}

На рисунке 9.7 показано, как изменился цвет заголовков.

Рис. 9.7. Применение цвета к селекторам body, hi, h2 и class

Конечно, невозможно увидеть контрастный красный цвет, примененный к классу accent, из-за характера данной книги, однако вы можете написать свои стили и воспользоваться браузером, чтобы проверить их в действии.

64

Выравнивание текста

Во времена, когда язык HTML использовался для представления документа, выравнивание текста осуществлялось при помощи атрибута align и соответствующего

значения. В языке CSS применяется такой же подход, конечно, без участия языка HTML, с использованием свойства text-align. Значения остались прежними и они наверняка знакомы всем, кто когда-либо использовал текстовый процессор.

•left - левое выравнивание, известное как «рваный» правый край, выравниваеттекст по левому краю, при этом разрывы строк располагаются справа. Этостандартное поведение для всех браузеров и является предпочтением для текста элемента body, text-align: text ; center - центрирует текст. Отцентрированный текст полезен для стилизации заголовков, заглавий и другого особого текста. Очень тяжело читать большие объемы отцентрированного текста, поэтому для текста элемента body такое выравнивание является не самым лучшим выбором, text-align: center ;

right — весь текст выравнивается по правому краю, оставляя «рваный» левый край, text-align: right;

•justify - выравнивание по ширине означает одновременное выравниваниетекста как по левому, так и по правому краю. Осуществляется путем подсчетаслов и промежутков, доступных в строке. Такое выравнивание широко распространено в печатных газетах и журналах. Позволяет создавать весьма унифицированный, привлекательный вид, однако большинство людей избегаютего использования, поскольку промежутки между словами могут быть оченьбольшими, что затрудняет чтение, text-align: justify;

На рисунке 9.8 приведено сравнение различных вариантов выравнивания для абзаца.

Рис. 9.8. Текст выровнен по правому краю, по центру, полевому краю и по ширине

Оформление текста

С помощью языка CSS можно «оформить» текст - то есть, добавить или удалить определенное декоративное значение. Это осуществляется при помощи свойства text-decoration и следующих значений:

• попе - в основном используется для удаления стандартного подчеркивания уссылок. За более подробной информацией обратитесь к главе 10 «Эффектыссылок, списки и навигация».

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

over 1 ine - размещает линию над выбранным текстом. 1 ine - through — перечеркивает выбранный текст.

blink - да, вы правильно прочитали. Это значение заставляет текст мигать. Эта возможность с самого начала была представлена (и использовалась до потери пульса) в браузере Netscape. Поддерживается всеми современными браузерами, кроме браузера Internet Explorer. В примере 9.5 для оформления текста используются встроенные CSS-стили.

Пример 9.5. Оформление текста при помощи языка CSS <р style="text-decoration: underline;">This text is underlined</p>

<p style="text-decoration: overline;">This text is an overline</p>

<p style="text-decoration: line-through;">This text is 1ine-through</p>

<p style="text-decoration: blink;">This text is blinks</p>

На рисунке 9.9 показаны результаты, за исключением мигания.

Рис. 9.9. Оформление текста с использованием языка CSS - чтобы увидеть мигание, выполните приведенный пример в браузере

Установка отступа текста

Еще одно полезное текстовое свойство - свойство text-indent. Это свойство позволяет установить отступ первой строки текста при помощи языка CSS,

вместо использования пустых изображений или нескольких символов неразрывного пробела в языке HTML. Можно использовать любое фиксированное значение длины (что было описано ранее в этой главе).

р {text-indent: 45px;}

Б результате, отступ первой строки каждого абзаца составит 45 пикселов, как показано на рисунке 9.10.

65

Рис. 9.10. Отступ первых строк абзацев составляет 45 пикселов

Можно также использовать процентные значения, относительно элемента-контейнера (за более подробной информацией обратитесь к главе 12 «Позиционирование, плавающее размещение и Z-индекс»).

Р {text-indent: 40%;}

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

Рис. 9.11. Установка отступов с использованием процентных значений

Можно использовать отрицательные значения длины для втяжки текста, как показано на рисунке 9.12.

Рис. 9.12. Втяжка текста путем установки краев и применениясвойства text-indent: -20рх

Преобразование регистра и изменение шрифта текста Можно стилизовать регистр текста и изменить его шрифт с использованием двух свойств.

Для преобразования регистра используется свойство text-transform и одно из значений: capitalize, uppercase, lowercase, none. Для изменения шрифта текста используется свойство font-variant и значение small-caps или normal (значение по умолчанию).

Б примере 9.6 показан документ, в котором используются преобразование регистра и изменения шрифта. Пример 9.6. Преобразование регистра и изменение шрифта текста при помощи языка CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>working with style</title> <style type="text/ess">

body {font-family: Georgia, Times, serif; color: black;}

hi {font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-variant: small-caps;}

h2 {font-family: Georgia, Times, serif; color: #999; font-size: 18px; font-style: italic; text-transform: lowercase;}

.accent {font-weight: 700; color: red; text-transform: uppercase;}

p {font-size: 16px; text-transform: capitalize;} </style>

</head>

<body>

<hl>The Black Cat</hl> <h2>By Edgar Allen Poe</h2>

<p> I married early, and was happy to find in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the <span class="accent">most</span> agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p>

<p>This latter was a <span class="accent"> remarkably</span>

66

large and beautiful animal, entirely black, and sagacious to an astonishing degree. In speaking of his intelligence, my wife, who at heart was not a little tinctured with superstition, made frequent allusion to the ancient popular notion, which regarded all black cats as witches in disguise.</p>

<p>Pluto - this was the cat's name - was my <span class="accent">favorite</span> pet and playmate. I alone fed him, and he attended me wherever I went about the house. It was even with difficulty that I could prevent him from following me through the streets.</p>

</body> </html>

Результаты применения свойств text-transform и font-variant можно увидеть на рисунке 9.13.

Рис. 9.13. Преобразование регистра и изменение шрифта текста

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

Поддержка свойств text-transform и font-variant у браузеров в целом реализована неплохо, но у современных браузеров существует одна известная проблема: свойство font-variant: small-caps; не работает в определенных старых версиях популярного браузера Safari от компании Apple. Стиль просто не будет применен, а будут выбраны только те стили, поддержка которых реализована в браузере Safari.

Установка интервалов между строками Интервал между строками, известный в типографском деле как междустрочный пробел, - это расстояние между строками в разделе

текста. Язык CSS позволяет управлять этим значением при помощи свойства line-height и значением длины, а также числового или процентного значения, как показано в примере 9.7.

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

<р style="line-height: 20px;"> I married early, and was happy to find in my wife a disposition not uncongenial with my own.</p>

<p style="line-height: 2;"> Observing my partiality for domestic pets, she lost no opportunity of procuring those of the <span class="accent">most</span> agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p>

<p style="line-height: 65%;"> This latter was a <span class="accent"> remarkably</span> large and beautiful animal, entirely black, and sagacious to an astonishing degree. </p>

В готовом документе установлен размер шрифта элемента body равный 14 пикселам, а затем применено свойство line-height в виде встроенного стиля к каждому абзацу, который необходимо модифицировать, как показано на рисунке 9.14.

Обычно, чтобы добиться наилучшей читабельности текста, следует придерживаться стандартного значения свойства line-height для шрифта.

Рис. 9.14. Различные междустрочные интервалы могут создавать интересные эффекты

Установка интервала между буквами и словами

Еще одним аспектом типографского дела, который поддерживается языком CSS, является установка интервала между буквами и словами, что осуществляется при помощи свойств letter-spacing и word-spacing соответственно. Значение каждого из свойств выражается длиной, как показано в примере 9.8.

Пример 9.8. Установка интервалов между буквами и словами

67

<р style="letter-spacing: Юрх;"> I married early, and was happy to find in my wife a disposition not uncongenial with my own.</p>

<p style="word-spacing: 0.5em;"> Observing my partiality fordomestic pets, she lost no opportunity of procuring those ofthe <span class="accent">most</span> agreeable kind. We hadbirds, gold fish, a fine dog, rabbits, a small monkey, and acat.</p>

В первом абзаце интервал между буквами будет равен 10 пикселам, а во втором абзаце интервал между словами будет равен 0,5 единицы размера шрифта, как показано на рисунке 9.15.

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

Рис. 9.15. Интервалы между буквами и словами

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

:first-line :first-letter

Эти селекторы присоединяются к элементу, который вы желаете стилизовать, как показано в примере 9.9. Пример 9.9. Использование селекторов псевдоэлементов для стилизации текста

р:first-line {font-weight: bold; color: #333} p:first-letter {font-style: italic; color: #999}

На рисунке 9.16 продемонстрированы результаты применения этих стилей к тексту.

Рис. 9.16. Использование селекторов псевдоэлементов для стилизации первой строки и первой буквы текста

Использование сокращений для стилей шрифта

ДЛЯ стилей шрифта, как и для фона, существует сокращенное свойство. В него включены некоторые свойства шрифта и свойство lineheight, но не включены никакие из текстовых свойств. Более того, при использовании сокращений для шрифта необходимо внимательно следить за очередностью значений.

Сокращенным свойством является свойство font, а порядок следования его значений следующий: font-style, font-variant, font-weight, font- size/line-height, font-family.

p {font: italic small-caps bold 14px/15px Arial, Helvetica, sans-serif;}

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

Если вы хотите выбросить какие-то значения, просто сохраните очередность оставшихся значений:

р {font: bold 14px Arial, sans-serif;}

Врезультате для отображения текста будет использован шрифт Arial, размером 14 пикселов и полужирным начертанием. Использовать сокращение можно в любой момент; просто имейте в виду, что в случае со шрифтами необходимо соблюдать очередность значений, иначе существует вероятность, что таблицы стилей не будут функционировать.

Квантовый скачок: неподдерживаемые или плохо поддерживаемые свойства шрифтов и текста

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

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

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

Наконец, свойство text-shadow позволяет создавать для текста эффект отбрасывания тени. Разве не круто использовать такую

68

возможность? Свойство позволяет указывать значения цвета и смещения, что избавит от необходимости использования изображений в тех случаях, когда нужно просто добавить эффект отбрасывания тени к тексту.

Теперь используйте воображение!

Япросто уверена, что теперь вы довольны! У вас есть достаточный объем знаний для работы с изображениями, цветом и текстом, чтобы создавать действительно прекрасные страницы или сайты.

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

Работа с фреймами В наши дни, использование фреймов для создания страниц - это большая редкость. Этому есть множество объяснений, включая

следующие забавные факты:

Фреймы модифицируют интерфейс браузера, что приводит к противоречию при отображении результатов операционными системами и отдельными браузерами.

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

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

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

Поскольку для каждой страницы с фреймами необходимо создавать несколько документов, управление фреймами становится тяжелой, неприятной задачей при попытке организовать, обновить или модифицировать сайт, построенный на фреймах.

Итак, если фреймы являются совсем ненужной вещью, зачем же их изучать на Земле? У меня есть два весьма специфических аргумента, которые вы должны узнать:

Фреймы - это уникальная часть языка HTML. Я хочу, чтобы, увидев фреймы, вы знали, что это такое, и чтобы они были частью вашего инструментария, если когда-нибудь в них возникнет необходимость.

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

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

Сила тройки

Ячасто вспоминаю способ построения страницы с фреймами, думая «тройками». Чтобы создать одну страницу с фреймами, потребуется, как минимум, три документа. Более того, при этом используется три уникальных элемента языка HTML, которые больше нигде не используются.

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

Помимо документа с набором фреймов, необходимо, по крайней мере, два HTML-документа с содержимым. Эти документы будут отображаться в областях фреймов, созданных с использованием набора фреймов, как показано на рисунке 6.1.

Рис. 6.1. Пример страницы с фреймами

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

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

Создание набора фреймов Для начала, хотелось бы сфокусироваться на изучении метода создания документов с наборами фреймов. Эти документы явно отличаются

от HTML-страниц, которые уже были рассмотрены в этой книге. Для новичков, в документах с набором фреймов используется другое объявление DOCTYPE, как показано в примере 6.1. Это самая первая часть уникальной разметки страницы с фреймами.

Пример 6.1. Объявление DOCTYPE для набора фреймов в языке XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd">

Теперь начинается самое интересное! Элементы head и body из обычной, уже известной вам, HTML-структуры, добавляться не будут; вместо этого будут добавлены элементы head и frameset.

69

Раздел head можно использовать точно так же, как и в любом другом документе -для элементов title, script или style - однако элемент body будет отсутствовать, поскольку его место во всех документах с фреймами занимает элемент frameset. Элемент frameset (и его соответствующие атрибуты, с которыми мы познакомимся далее) - это вторая часть уникальной разметки страницы с фреймами, как показано в примере 6.2.

Пример 6.2. Структура документа с набором фреймов

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Frameset Document</title> </head>

<frameset>

</frameset>

</html>

Третьим уникальным элементом является элемент frame, определяющий, какие HTML-страницы будут размещаться в соответствующих фреймах на создаваемой странице, как показано в примере 6.3. Число элементов frame зависит непосредственно от числа фреймов на странице.

Пример 6.3. Набор фреймов с двумя минимально необходимыми элементами frame <frameset> <frame /> <frame /> </frameset>

Добавление столбцов Наборы фреймов поддерживают столбцы и строки. В этой части мы добавим столбцы в набор фреймов. Начнем с создания страницы,

состоящей из двух фреймов, расположенных вертикально.

Атрибут cols элемента frameset может принимать значения трех типов:

Числовое значение в пикселах, например, cols="200". В результате получим столбец, шириной 200 пикселов.

Значение, выраженное в процентах, например cols="75%". В результате получим столбец, ширина которого будет составлять 75% от доступного пространства окна браузера.

Динамическое значение, представляемое звездочкой, например, cols="*". Это означает, что ширина столбца будет изменяться автоматически, чтобы заполнять все доступное пространство окна браузера.

Впримере 6.4 показан документ с набором фреймов, используемый для создания страницы, состоящей из двух столбцов, вид которой мы и хотим получить.

Обратите внимание, что также были добавлены элементы frame.

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

Пример 6.4. Создание страницы с фреймами, состоящей из двух столбцов

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Frameset Document</title> </head>

<frameset cols="200, *">

<frame src="lightgray.html" /> <frame src="darkgray.html" /> </frameset>

</html>

Врезультате ширина левого светло-серого столбца всегда будет равна 200 пикселам, а ширина правого, темно-серого столбца будет изменяться динамически, как показано на рисунке 6.2.

Рис. 6.2. Ширина левого столбца будет постоянно равна 200 пикселам, тогда как ширина правого столбца будет изменяться динамически при изменении ширины окна браузера

Конечно, столбцов может быть много - любое количество, которое пожелаете. В этом случае нужно просто добавить больше значений, разделенных запятой (и больше элементов frame для соответствия). Более того, никто не запрещает комбинировать значения столбцов. Рассмотрим пример 6.5, всего в котором создаются четыре столбца, как показано на рисунке 6.3.

Пример 6.5. Страница с фреймами, состоящая из четырех столбцов

<frameset cols="25%, *, 100, 25%"> <frame src="lightgray.html" /> <frame src="darkgray.html" /> <frame src="lightgray.html" /> <frame src="darkgray.html" /> </frameset>

70