|
Текст
С помощью CSS можно определять стиль и вид текста. Аналогично тому, что
используется тег <FONT>,
задающий свойства шрифта, но стили обладают большими возможностями и позволяют
сократить код HTML.
Свойства шрифта
Изменение начертания шрифта и его размера происходит через свойства CSS,
которые описаны в табл. 1.
Табл. 1. Атрибуты CSS для управления шрифтами |
|
| Свойство |
|
Значение |
|
Описание |
|
Пример |
|
| |
|
|
|
|
|
|
|
|
| font-family |
имя шрифта |
|
Задает список шрифтов |
|
P {font-family: Arial, serif} |
|
|
|
|
|
|
|
|
|
|
|
|
|
| font-style |
|
normal
italic
oblique |
|
Нормальный шрифт
Курсив
Наклонный шрифт |
|
P {font-style: italic} |
|
|
|
|
|
|
|
|
|
| font-variant |
|
normal
small-caps |
|
Капитель
(особые прописные буквы) |
|
P {font-variant: small-caps} |
|
|
|
|
|
|
|
|
|
| font-weight |
|
normal
lighter
bold
bolder
100-900 |
|
Нормальная жирность
Светлое
начертание
Полужирный
Жирный
100-светлый шрифт,
900-самый
жирный |
|
P {font-weight: bold} |
|
|
|
|
|
|
|
|
|
| font-size |
|
normal
pt
px
% |
|
нормальный размер
пункты
пикселы
проценты |
|
font-size: normal
font-size: 12pt
font-size: 12px
font-size:
120% |
|
| Примечание |
| Когда размер шрифта задается абсолютными значениями, т.е.
указывается конкретное значение шрифта в пунктах или пикселах, то изменить эту
величину с помощью опции браузера Вид | Размер шрифта невозможно. Если шрифт установлен слишком мелким, то исправить этот недостаток
читателю простыми средствами не представляется возможным. |
В примере 1 показано использование параметров при работе со шрифтами.
Пример 1. Задание свойств шрифта с помощью CSS |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<style
type="text/css">
H1 { font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 150%; font-weight: light
}
</style>
</head>
<body>
<H1>Заголовок</H1>
<p>Обычный
текст</p>
</body>
</html> |
Ниже приведен результат данного примера.
В табл. 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 для управления видом текста |
| Свойство |
|
Значение |
|
Описание |
|
Пример |
|
|
|
|
|
|
|
| line-height |
|
normal
множитель
точно
% |
|
Интерлиньяж (межстрочный интервал) |
|
line-height: normal
line-height: 1.5
line-height:
12px
line-height: 120% |
|
|
|
|
|
|
|
| text-decoration |
|
none
underline
overline
line-through
blink |
|
Убрать все оформление
Подчеркивание
Линия над
текстом
Перечеркивание
Мигание текста |
|
text-decoration: none |
|
|
|
|
|
|
|
| text-transform |
|
none
capitalize
uppercase
lowercase |
|
Убрать все эффекты
Начинать С Прописных
ВСЕ
ПРОПИСНЫЕ
все строчные |
|
text-transform: capitalize |
|
|
|
|
|
|
|
| text-align |
|
left
right
center
justify |
|
Выравнивание текста |
|
text-align: justify
выравнивание по ширине |
|
|
|
|
|
|
|
| text-indent |
|
точно
% |
|
Отступ первой строки |
|
text-indent:15px;
text-indent:10% |
Ниже, в табл. 4 приведены некоторые параметры текста и результат их
применения.
| |
| Пример: и это все о нем |
|
Пример: текст по центру |
|
Пример: Это не ссылка, а просто
текст |
|
Пример: отступ первой строки |
|
Пример: полуторный
межстрочный интервал |
|
|
|
|
|
|
|
|
|
| text-transform: capitalize |
|
text-align:center |
|
text-decoration: underline |
|
text-indent: 20px |
|
line-height: 1.5 |
|
|
|
