Свойства текста в CSS - Мои статьи - Каталог статей - Персональный сайт преподавателя

Свойства шрифта

Изменение начертания шрифта и его размера происходит через свойства 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//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Шрифт</title>
 <style type="text/css"> 
 H1 { 
 font-family: Arial, Helvetica, Verdana, sans-serif; /* Гарнитура шрифта */ 
 font-size: 150%; /* Размер текста */ 
 font-weight: lighter; /* Светлое начертание */ 
 }
 </style>
 </head>
 <body>
 <H1>Заголовок</H1>
 <p>Обычный текст</p>
 </body> 
</html>

Ниже приведен результат данного примера (рис. 1).

Вид текста после применения стилей

Рис. 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 для управления видом текста
Свойство	Значение	Описание	Пример
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 приведены некоторые параметры текста и результат их применения.

Табл. 4. Результат использования различных параметров текста
Пример: И Это Все О Нем	Пример: текст по центру	Пример: Это не ссылка, а просто текст	Пример: отступ первой строки	Пример: полуторный межстрочный интервал
text-transform: capitalize	text-align:center	text-decoration: underline	text-indent: 20px	line-height: 1.5

текст