• 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. Вы познакомились с приемами изменения внешнего вида текста, заданием его шрифта, цвета, размера, научились изменять его внешний вид и располагать на странице.
Теперь вам под силу отформатировать текст любой сложности и любых размеров. Немного практики – и вы станете настоящим профессионалом веб-дизайна.
Глава 9 Оформление HTML-документа средствами CSS
9.1. Фон
9.2. Генерируемое содержимое
9.3. Автоматическая нумерация и списки
9.4. Таблицы
9.5. Интерфейс пользователя
9.6. Поля и отступы
9.7. Границы
9.8. Работа с блоками
В этой главе мы рассмотрим все возможности CSS по оформлению документа. Изучив этот материал, вы с легкостью сможете придать вашим страницам эксклюзивный вид. Начнем изучение с изменения фона страницы.
9.1. Фон
В качестве фона любого элемента страницы вы можете задать либо цвет, либо изображение. Свойства фона не наследуются, но фон родительского блока всегда будет виден, так как в качестве начального значения свойства background-color выступает значение transparent, то есть прозрачность.
Следует отметить, что некоторые браузеры будут отображать фон HTML-документов, заданный для элемента HTML. Хотя рекомендуется устанавливать фон для элемента BODY, а не для элемента HTML.
Рассмотрим пример, приведенный в листинге 9.1.
Листинг 9.1. Фон страницы<html>
<head>
<title>Глава 9. Установка фона области представления</title>
<style type="text/css">
body { background: url("http://style.com/marble.png") }
</style>
</head>
<body>
<p>Я использую мраморный фон из файла картинки.
</body>
</html>
Фон документа, представленного в листинге 9.1, будет задан картинкой, размноженной на все окно браузера и находящейся в файле marble.png.
Список всех возможных свойств фона таков: background-color, background-image, background-repeat, background-attachment, background-position и background.
Теперь рассмотрим каждое из них подробнее.
Итак, первое свойство – background-color. Оно устанавливает цвет фона элемента, равный либо шестнадцатеричному значению цвета, либо названию цвета, либо RGB-значению цвета, либо ключевому слову transparent. Ключевое свойство transparent просто-напросто делает фон элемента прозрачным.
Пример:
body { background-color: #FF0000 }
Приведенный код устанавливает красный цвет фона страницы.
Второе свойство – background-image. Оно задает графический объект, то есть картинку из файла, в качестве фона элемента. При определении фонового изображения рекомендуется также указывать цвет фона, который будет использоваться, если изображение недоступно. Если изображение доступно, то оно отображается поверх фонового цвета, который все же будет виден сквозь прозрачные фрагменты изображения. В качестве значения этого свойства выступает адрес картинки. Вы также можете задать в качестве значения ключевое слово none, чтобы не использовать фоновое изображение, например, пока не известен адрес файла фоновой картинки. Рассмотрим такой фрагмент таблицы стилей:
body { background-image: url(«some_bgimage.gif») }
p { background-image: none }
В данном примере в качестве фона страницы будет использоваться изображение из файла some_bgimage.gif. Однако содержимое страницы внутри элемента P будет находиться на белом либо на таком фоне, который задан в браузере по умолчанию (как правило, белый).
Если вы задали фоновое изображение, то можете также использовать свойство background-repeat, которое определяет, будет ли изображение дублироваться, и если да, то каким образом. Данное свойство может принимать следующие значения:
• repeat – дублируется как по вертикали, так и по горизонтали;
• repeat-x – дублируется только по горизонтали;
• repeat-y – дублируется только по вертикали;
• no-repeat – не дублируется: выводится только одна копия изображения.
Рассмотрим такой пример:
body {
background: white url("pendant.gif");