Текст в CSS

Свойства CSS текста

Урок 3. CSS текст, примеры форматирывания текста

CSS текст и примеры его форматирования

Атрибут со значениемПолученный результат
font-family:Tahoma, sans-serif CSS текст – форматирование
font-size:15px CSS текст – форматирование
font-style:italic CSS текст – форматирование
font-variant:small-caps CSS текст – форматирование
font-weight:bold CSS текст – форматирование
letter-spacing:2px CSS текст – форматирование
word-spacing:7px CSS текст – форматирование
color:#cc0033 CSS текст – форматирование
text-indent:40px
CSS текст – форматирование
text-decoration:underline
CSS текст – форматирование
text-decoration:overline
CSS текст – форматирование
text-decoration:line-through
CSS текст – форматирование
text-transform:capitalize
CSS текст – форматирование
text-transform:lowercase
CSS текст – форматирование
text-transform:uppercase
CSS текст – форматирование
vertical-align:super CSS текст – форматирование text
vertical-align:sub CSS текст – форматирование text

Атрибуты и значения

Пример по форматированию текста:

<title>Пример форматирования текста</title>
<style type="text/css">
body {
color:#000066
}
.primer {
text-decoration:underline;
text-align:right;
letter-spacing:5px
}
#example {
text-indent:50px;
word-spacing:20px;
color:Green
}
</style>
</head>
<body>
<div class="primer">Подчеркнутый текст, с расстоянием между символами в пять пикселей, выровнен по правому краю, темно-синий</div>
<div>Текст темно-синего цвета</div>
<p id="example">Отступ строки слева, дополнительное расстояние между словами в 20 пикселей, текст зеленый</p>
</body>

Результат: форматируем текст при помощи CSS

Селектору body задан color:#000066
– это значит, что весь текст страницы будет темно-синий, за исключением параграфа с идентификатором id="example", где цвет определен как зеленый. Атрибут со значением text-decoration:underline выводит подчеркнутый текст. letter-spacing:5px устанавливает пространство между символами в 5 пикселей. text-indent:50px определяет отступ строки слева величиной в 50 пикселей. Атрибут word-spacing:20px определяет дополнительное расстояние между словами.

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 2. CSS шрифт и его свойства   CSS текст   Урок 4. Подробно о тексте

    Сохранить в сервисы и закладки