HTML, XHTML и CSS на 100% - Игорь Квинт

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

Так же, как и <span class="bg_test">выделить</span> данный текст.</p>

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

далее к <a href="#">главе 9.</a></p>

</body>

</html>

Рис. 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:

<h1><span>Форматирование текста средствами CSS</span></h1>

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

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

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. Установка шрифта