|
Основы CSS - Текст
Влад Мержевич
С помощью CSS можно определять стиль и вид текста. Аналогично тому, что
используется тег FONT, задающий свойства шрифта, но стили
обладают большими возможностями и позволяют сократить код HTML.
Свойства шрифта
Изменение начертания шрифта и его размера происходит через свойства CSS,
которые описаны в таблице 1.
Таблица 1. Атрибуты CSS для управления шрифтами
| Свойство |
Значение |
NC |
IE |
Описание |
Пример |
| font-family |
имя шрифта |
4+ |
4+ |
Задает список шрифтов |
p {font-family: Arial, serif} |
| font-style |
normal
italic
oblique |
4+
4+
|
4+
4+
4+ |
Нормальный шрифт
Курсив
Наклонный шрифт |
p {font-style: italic} |
| font-variant |
normal
small-caps |
|
4+
4+ |
Капитель
(особые прописные буквы) |
p {font-variant: small-caps} |
| font-weight |
normal
lighter
bold
bolder
100-900 |
4+
4W
4+
4W
4+ |
4+
4+
4+
4+
4+ |
Нормальная жирность
Светлое
начертание
Полужирный
Жирный
100-светлый шрифт,
900-самый
жирный
|
p {font-weight: bold} |
| font-size |
Размер шрифта
normal
pt
px
% |
4+
4+
4+
4+
|
4+
4+
4+
4+
|
нормальный размер
пункты
пикселы
проценты
|
font-size: normal
font-size: 12pt
font-size:
12px
font-size: 120% |
NC — Netscape Communicator, IE — Microsoft Internet
Explorer; 4+ означает, что свойство поддерживается в браузере 4 версии и
выше. 4W — работает только под Windows.
Замечание
Когда размер шрифта задается абсолютными значениями, т.е.
указывается конкретное значение шрифта в пунктах или пикселах, то изменить эту
величину с помощью опции браузера Вид | Размер шрифта
невозможно. Если шрифт установлен слишком мелким, то исправить этот недостаток
читателю простыми средствами не представляется возможным. Поэтому лучше задавать
размер шрифта в процентах (пример 1). Пример 1. Задание свойств шрифта с
помощью CSS
<html>
<head>
<style>
H1 { font-family: Arial, Helvetica, Verdana, sans-serif; font-size:
150%; font-weight: light
}
</style>
</head>
<body>
<H1>Заголовок</H1>
Обычный
текст
</body>
</html>
Ниже приведен результат примера 1.
В таблице 2 даны некоторые параметры и результат их применения.
Таблица 2. Результат использования различных параметров шрифтов
| Пример |
Пример |
Пример |
Пример |
Пример |
| font-family: Verdana, sans-serif; font-size: 120%; font-weight:
light |
font-size: large; font-weight: bold |
font-family: Arial, sans-serif; font-size: x-small; font-weight:
bold |
font-variant: small-caps |
font-style: italic; font-weight: bold |
Свойства текста
Кроме изменения параметров шрифтов, можно управлять и свойствами всего
текста. Значения свойств приведены в таблице 3.
Таблица 3. Свойства CSS для управления видом текста
| Свойство |
Значение |
NC |
IE |
Описание |
Пример |
| line-height |
normal
множитель
точно
% |
4W
4+
4+
4+ |
4+
4+
4+
4+ |
Интерлиньяж (межстрочный интервал) |
line-height: normal
line-height: 1.5
line-height:
12px
line-height: 120% |
text-decoration
|
none
underline
overline
line-through
blink |
4+
4+
4+
4+ |
4+
4+
4W
4+
|
Убрать все оформление
Подчеркивание
Линия над
текстом
Перечеркивание
Мигание текста |
text-decoration: none |
text-transform
|
none
capitalize
uppercase
lowercase
|
4+
4+
4+
4+ |
4W
4W
4W
4W |
Убрать все эффекты
Начинать С Прописных
ВСЕ
ПРОПИСНЫЕ
все строчные |
text-transform: capitalize |
| text-align |
left
right
center
justify |
4+
4+
4+
4+ |
4+
4+
4+
4W |
Выравнивание текста |
text-align: justify
выравнивание по ширине |
| text-indent |
точно
% |
4+
4+ |
4+
4+ |
Отступ первой строки |
text-indent:15px;
text-indent:10% |
NC — Netscape Communicator, IE — Microsoft
Internet Explorer; 4+ означает, что свойство поддерживается в браузере 4
версии и выше. 4W — работает только под Windows.
Ниже, в таблице 4 приведены некоторые параметры текста и результат их
применения.
Пример 4. Результат использования различных параметров текста
| Пример: и это все о нем |
Пример: текст по центру |
Пример: Это не ссылка, а просто
текст |
Пример: отступ первой строки |
Пример: полуторный межстрочный интервал |
| text-transform: capitalize |
text-align:center |
text-decoration: underline |
text-indent: 20px |
line-height: 1.5 |
|
