
	Главная > CSS > Основы CSS > Текст

МЕНЮ

H T M L

C S S

С к р и п т ы

JAVA скрипты

Раскрутка Сайта

Готовые шаблоны сайтов

П р о г р а м м ы

Поситите наш проект про мобильные телефоны http://samsu.narod.ru

Текст

С помощью 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%

Ниже, в примере 3 приведены некоторые параметры текста и результат их применения.

Пример 3. Результат использования различных параметров текста

Пример: и это все о нем Пример: текст по центру Пример: Это не ссылка, а просто текст Пример: отступ первой строки Пример: полуторный межстрочный интервал

text-transform: capitalize text-align:center text-decoration: underline text-indent: 20px line-height: 1.5

DimoN ©