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

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

С помощью 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 больше не подчеркнута.

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