HTML, XHTML Рё CSS РЅР° 100%

Квинт Игорь

Глава 8

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

 

 

8.1. Выделение текста цветом

8.2. Шрифты

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

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

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

Чтобы понять всю мощь CSS по работе с текстом и в то же время освоить основные приемы создания таблиц стилей, создадим простую HTML-страницу, которая и будет служить примером (листинг 8.1, рис. 8.1).

Листинг 8.1. Тестовая HTML-страница

Глава 8. Форматирование текста средствами CSS

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

Намек: добивается успеха только тот, кто старается.

Предисловие

В CSS нет ничего сложного, к концу данной главы вы научитесь изменять

цвет текста, шрифт, размер. Научитесь управлять его положением на

странице и выучите еще много других приемов форматирования,

которые сделают вас настоящим профессионалом веб-дизайна.

Вам будет под силу отформатировать любой текст. И вы сделаете это

так же просто, как в обычном текстовом редакторе.

Вы сможете заставить читать посетителя по буквам.

К примеру, задать "жирность" в 600 для данного абзаца

средствами HTML просто невозможно.

Так же, как и выделить данный текст.

Если из примера вам все понятно, то вы можете сразу перепрыгнуть

далее к главе 9.

Рис. 8.1. Тестовая HTML-страница

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

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

CSS-код можно добавлять в HTML-страницы двумя путями. Первый – вписать код таблицы стилей непосредственно в саму HTML-страницу. Второй, который мы и будем использовать в примере, – вынести содержание CSS во внешний файл таблицы стилей, а в HTML-странице оставить ссылку на него. В нашем примере файл таблицы стилей располагается во внешнем файле с именем my_style.css в той же папке, что и наша страница.

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

p {

color: red;

text-align: right;

}

Данный прием был подробно рассмотрен в подразд. «Группировка» разд. 7.3.

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

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

Итак, приступим к изучению форматирования текста и начнем с рассмотрения работы с цветами.

 

8.1. Выделение текста цветом

 

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

Надо отметить, что все свойства CSS по работе с цветами наследуемы. Для понимания, что это такое, приведу следующий пример. Представьте, что мы задали красный цвет текста для элемента BODY. Как это сделать, мы разберем дальше, сейчас сконцентрируйтесь только на «наследовании». Представьте, что весь текст на странице стал красным. Если теперь мы зададим синий цвет для таблиц с именем класса blue_text, то весь текст во всех таблицах с классом blue_text будет синим. Если же мы зададим красный цвет для элементов P, а синий – для BODY, то цвет текста в таблицах останется синим, так как в таблицах мы редко используем элемент абзаца P. Если же внутри какой-то ячейки мы используем элемент P, то цвет текста в этой ячейке, то есть внутри элемента P, будет красным. Если из этого текстового примера вам еще что-то непонятно, не расстраивайтесь, по ходу главы мы разберем все подробнее.

 

Цвет текста

Для изменения цвета текста используется свойство color, в качестве параметра которого задается значение или название цвета. Сделаем для примера все заголовки первого уровня тестовой страницы красными. Заголовки первого уровня в HTML обозначаются элементом H1, поэтому добавим в файл my_style.css такой код:

h1 {

color: red;

}

Значение цвета можно задать тремя способами.

1. Вы можете использовать название цвета, как в примере выше. Например, если вы захотите изменить цвет заголовков в примере на синий. Тогда вместо указанного названия цвета red используйте blue.

2. Цвет может быть задан и с помощью шестнадцатеричного значения, например #ff0000. Вы можете поменять в нашем примере red на #ff0000, но вид страницы от этого не изменится.

3. Допускается задание цвета с помощью RGB-значения: rgb(255, 0, 0). Оно также задаст тексту красный цвет.

Свойство color тоже полезно использовать для задания цвета ссылкам в документе. Если ваша страница представляет, например, некую статью и вы решили оставить цвет текста черным, то ссылки можно сделать синими или серыми, тогда они не будут сильно бросаться в глаза и в то же время будут выделяться в основном тексте. Задание свойств для ссылок ничем не отличается от задания свойств для основного текста, только надо знать, что в CSS выделяют четыре типа ссылок:

• link – все ссылки на странице, которые пользователь еще не посетил;

• visited – все ссылки на странице, которые пользователь посетил;

• active – все активные ссылки;

• hover – ссылка, над которой находится указатель мыши.

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

a:hover {

color: grey;

}

Добавим данный код в нашу таблицу стилей. Результат всех изменений, сделанных в этом разделе, изображен на рис. 8.2.

Рис. 8.2. Задание цвета

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

 

Цвет фона

Цвет фона задается с помощью свойства background-color. Его можно использовать, чтобы сделать в документе текст, похожий на выделенный маркером. Значение цвета задается, как и в предыдущей главе, одним из трех способов: названием цвета, шестнадцатеричным значением или RGB-значением.

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

h1 {

background-color: blue;

}

Следует отметить, что если задать один и тот же цвет фона и текста, то текст просто-напросто сольется с фоном и не будет виден. Результат работы примера можно увидеть на рис. 8.3.

Рис. 8.3. Выделение заголовка фоновым цветом

Наверное, вы уже обратили внимание, что на рис. 8.3 цветом выделена вся строка. Это потому, что браузер отводит место под элемент H1 до конца строки. То же самое будет и с элементом P. Если вы хотите, чтобы был выделен только текст без пустого пространства справа, надо внутрь H1 вложить элемент SPAN и записать таблицу стилей следующим образом:

h1 span {

background-color: blue;

}

В этом случае стиль будет применяться только к последовательности элементов hi span.

В элемент H1 включаем элемент SPAN:

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

В результате синим цветом будет выделена только строка заголовка.

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

 

8.2. Шрифты

 

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

 

Семейство шрифта

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

Семейство – это группа шрифтов, созданных с использованием сходных принципов дизайна и внешнего вида. В CSS есть пять основных групп: serif, sans-serif, monospace, fantasy, cursive.

Примечание

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

Для примера зададим шрифт текста абзацев Trebuchet MS и группу, к которой относится данный шрифт, sans-serif (рис. 8.4):

p {

font-family: "Trebuchet MS", sans-serif;

}

В примере, изображенном на рис. 8.4, показано окно браузера в системе, где установлен шрифт Trebuchet MS.

Рис. 8.4. Установка шрифта

Внимание!

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

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

• serif – Times New Roman, Garamond, Georgia;

• sans-serif – Trebuchet, Arial, Verdana;

• monospace – Courier, Courier New, Andale Mono.

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

 

Стиль шрифта

Стиль шрифта задается свойством font-style, которое может принимать одно из трех значений: normal, oblique или italic. Эти значения имеют следующий смысл.

• normal – определяет шрифт, который классифицируется как Normal. При отображении на экране он выглядит как обычный текст.

• oblique – задает шрифт, который классифицируется как Oblique. К нему, как правило, относятся шрифты со словами Oblique, Slanted или Incline в названиях. Такой текст может в действительности генерироваться электронным наклоном нормального шрифта.

• italic – определяет шрифт, который классифицируется как Italic и, если это недоступно, шрифт, помеченный как Oblique. К Italic, как правило, относятся шрифты со словами Italic, Cursive или Kursiv в названиях.

Для примера изменим стиль элементов P класса namek в нашем примере на курсив:

p.namek {

font-style: italic;

}

На рис. 8.5. видно что текст Намек: добивается успеха только тот, кто старается теперь записан курсивом.

Рис. 8.5. Стиль шрифта

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

body {

font-style: oblique;

}

 

Вид шрифта

Свойство font-variant может принимать одно из двух значений: normal или small-caps. Если задано значение small-caps, то текст будет выведен шрифтом из малых прописных букв. Если задано значение normal, то текст отображается, как обычно.

Лучше всего это понятно на примере. Применим свойство small-caps для наших заголовков второго уровня:

h2 {

font-variant: small-caps;

}

Результат просмотра страницы браузером Internet Explorer 6 показан на рис. 8.6.

Рис. 8.6. Вариант шрифта

Примечание

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

 

Ширина шрифта

Свойство font-weight определяет ширину шрифта. Значение может быть задано числом от 100 до 900 (в сотнях), где каждый номер обозначает шрифт, который темнее своего предшественника. В других случаях значение может быть следующим.

• normal – текст будет отображен обычным шрифтом. В числовом выражении соответствует значению 4 0 0.

• bold – текст будет отображен более широким шрифтом, чем обычно. Численно оно равно значению 7 0 0.

• bolder – определяет более темный вес шрифта, чем наследуемый. Если наследуемое значение равно 9 0 0, то результат будет также 9 0 0.

• lighter – задает вес шрифта, который светлее, чем наследуемый. Если наследуемое значение равно 10 0, то результат будет также 10 0.

Для примера установим значение свойства font-weight для класса w_600 элемента P, равное 600.

p.w_600 {

font-weight: 600;

}

Результат приведен на рис. 8.7.

Рис. 8.7. Вес шрифта

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

 

Размер шрифта

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

Абсолютные единицы:

• in – дюйм, примерно равен 2,5 см;

• mm – миллиметр;

• cm – сантиметр;

• pt – пункт, примерно равен 1/7 дюйма;

• pc – пика (равна 12 пунктам).

Относительные единицы:

• em – высота шрифта элемента;

• ex – высота буквы x;

• px – пиксел;

• % – процентное соотношение.

Группу относительных единиц удобно использовать, чтобы сохранить первозданный вид документа на любом устройстве (на экране, при печати).

Для нашего примера сделаем размер шрифта текста, равный 14 пунктам:

p {

font-size: 14pt;

}

Результат можно увидеть на рис. 8.8.

Рис. 8.8. Размер шрифта 14 pt

Мы рассмотрели основные возможности CSS по работе со шрифтами. Теперь приступим к изучению форматирования текста.

 

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

 

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

 

Отступы

Представьте, что вы форматируете несколько HTML-страниц размером с небольшую книгу. Язык HTML не предоставляет специальных средств для задания отступа абзаца, и отступ приходится делать с помощью пробелов. Согласитесь, не очень-то удобно в начале каждого абзаца набирать пробелы, да еще и следить, чтобы их было одинаковое количество в начале всех абзацев. Еще хуже, если, выполнив часть или всю работу, вы обнаружите, что отступы недостаточны или слишком большие. CSS предоставляет замечательное свойство text-indent для решения данной проблемы. Размер отступа может задаваться как абсолютными, так и относительными единицами. В том числе и процентами. В качестве 100 % считается ширина всей страницы.

Зададим в нашем примере отступ 25 пикселов (рис. 8.9):

p {

text-indent: 25px;

}

Рис. 8.9. Задание отступа 25 пикселов

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

 

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

Выравнивание текста задается с помощью свойства text-align, значения которого такие же, как и значения свойства align у элемента P. Следующие значения указывают, что текст будет выровнен:

• left – по левому краю;

• right – по правому краю;

• center – по центру;

• justify – по формату.

Для примера зададим для заголовков выравнивание по центру, а для вступительного намека – по правой стороне (рис. 8.10):

h1 {

text-align: center;

}

p.namek {

text-align: right;

}

Рис. 8.10. Выравнивание текста

 

Декоративное оформление

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

• none – не производит декоративное оформление;

• underline – каждая строка текста будет подчеркнута;

• overline – над каждой строкой текста будет отображена линия;

• line-through – каждая строка текста будет зачеркнута;

• blink – текст будет мигать.

Примечание

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

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

Применим новые знания на практике. Для примера обычным ссылкам установим значение text-decoration, равное none, а для ссылок типа hover – underline (рис. 8.11).

a {

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

Рис. 8.11. Декоративное оформление

На рис. 8.11 видно, что ссылка главе 9 больше не подчеркнута.

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

 

Расстояние между буквами

Расстояние между буквами можно задать свойством letter-spacing. В качестве значения указываются необходимая величина и абсолютная единица измерения.

Для нашего примера зададим расстояние между буквами в заголовке шириной 6 пикселов:

h1 {

letter-spacing: 6px;

}

Результат можно увидеть на рис. 8.12.

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

Вы можете попробовать применить это свойство к другим элементам страницы.

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

 

Расстояние между словами

Можно задать расстояние как между буквами, так и между словами, используя свойство word-spacing. В качестве значения вы можете указать желаемое значение либо normal, чтобы использовать значение браузера по умолчанию.

Это свойство не представляет сложностей, поэтому приведу лишь CSS-код:

h1 { word-spacing: 1em }

В данном примере расстояние между всеми словами в элементах H1 увеличивается на 1 em.

 

Трансформация текста

Свойство text-transform управляет регистром символов. Существует три значения для данного свойства:

• capitalize – пишет все слова с большой буквы;

• uppercase – переводит все символы в верхний регистр;

• lowercase – переводит все символы в нижний регистр.

Сделаем заглавие первого уровня как в английском языке: все слова запишем с прописной буквы (рис. 8.13):

h1 {

text-transform: capitalize;

}

Рис. 8.13. Изменение регистра букв

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

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

 

Пустое место

CSS также позволяет задавать способ обработки браузером пустого пространства. Для этого нужно использовать свойство white-space. Рассмотрим значения, которые может принимать это свойство, и их описание:

• normal – браузер будет сжимать последовательно пустое пространство и разбивать строки для вмещения линейных блоков;

• pre – браузер не может изменять последовательность символов пустого пространства, строки разбиваются только в местах начала новой строки, обозначенных в исходном тексте;

• nowrap – работает, как значение normal в смысле сокращения пустого пространства, но запрещает образовывать разрывы строк в тексте, за исключением разрывов, определенных с помощью элемента BR.

Рассмотрим такой пример:

body { white-space: pre }

Браузер отобразит HTML-документ так, как он отображается в исходном виде, например в программе Блокнот.

 

Направление вывода текста

Направлением вывода текста можно управлять, используя CSS-свойство direction. Оно может принимать следующие значения:

• ltr – направление слева направо;

• rtl – направление справа налево.

 

Резюме

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

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