CSS Текст
С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег FONT, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.
Свойства шрифта
| Свойство | Значение | 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>style> H1 { font-family: Arial, Helvetica, Verdana, sans-serif; font-size:150%; font-weight: light } /style> 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 |
Свойства текста
Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Значения свойств приведены в таблице.
| Свойство | Значение | 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.
Ниже, в Примере 3 приведены некоторые параметры текста и результат их применения.
Пример 3. Результат использования различных параметров текста
| Пример: и это все о нем | Пример: текст по центру | Пример: Это не ссылка, а просто текст | Пример: отступ первой строки | Пример: полуторный межстрочный интервал |
| text-transform: capitalize | text-align:center | text-decoration: underline | text-indent: 20px | line-height: 1.5 |
Источник: http://sitestroy.ru
© 2010