форматирование текста
Этот текст стилизован с некоторыми свойствами форматирования текста. Заголовок использует свойства text-align, text-transform и color. Абзац с отступом, выровнен, и указано пространство между символами. Подчеркивание удалено из ссылки "Попробуй сам".
Цвет текста
Свойство color используется для установки цвета текста. Цвет может быть указан с помощью:
- имя - имя цвета, как "red"
- RGB - значение RGB, как "rgb(255,0,0)"
- шестнадцатеричное значение - как "#ff0000"
Цвет по умолчанию для страницы, определяется в селекторе body.
Пример 1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { color:red; }
h1 { color:#00ff00; }
p.ex { color:rgb(0,0,255); }
</style>
</head>
<body>
<h1>Это заголовок 1</h1>
<p>Это обычный параграф. Обратите внимание, что этот текст красный. Цвет текста по умолчанию для страницы определяется в селекторе body.</p>
<p class="ex">Этот параграф с class="ex". Этот текст голубой.</p>
</body>
</html>
Для W3C совместимости CSS: Если вы определяете свойство цвета (color), необходимо также определить свойство цвета фона (background-color).
Выравнивание текста
Свойство text-align используется для установки горизонтального выравнивания текста.
Текст может быть отцентрован, или выравнен влево или вправо, или по обеим сторонам.
Когда выравнивание текста установлено "по обеим сторонам", каждая линия растягивается так, что она имеет одинаковую ширину, и левое и правое поля являются прямыми (например, как в журналах и газетах).
Пример 2
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
h1 { text-align:center; }
p.date { text-align:right; }
p.main { text-align:justify; }
</style>
</head>
<body>
<h1>Пример выравнивания текста CSS</h1>
<p class="date">Январь, 2011</p>
<p class="main">Наконец на Нерку надели новый щеголеватый ошейник с
перьями, напоминающий запястье египетской царицы Клеопатры, и Катерина Александровна, взяв с собою 3 рубля, повела благоухающую невесту к медалисту-жениху, принадлежащему секретарю уисполкома.</p>
<p><b>Примечание:</b> Попробуйте изменить размер окна браузера, чтобы увидеть, как работает justify.</p>
</body>
</html>
Оформление текста
Свойство text-decoration используется для установки или удаления украшений из текста.
Свойство text-decoration используется главным образом для удаления подчеркивания из ссылки:
Пример 3
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a { text-decoration:none; }
</style>
</head>
<body>
<p>Линк на: <a href="http://xhtml.co.il/ru/">Xhtml.co.il</a></p>
</body>
</html>
Оно также может быть использовано для того, чтобы украсить текст:
Пример 4
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
h1 { text-decoration:overline; }
h2 { text-decoration:line-through; }
h3 { text-decoration:underline; }
h4 { text-decoration:blink; }
</style>
</head>
<body>
<h1>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
<h3>Это заголовок 3</h3>
<h4>Это заголовок 4</h4>
<p><b>Примечание:</b> Значение "blink" не поддерживается в IE, Chrome, и Safari.</p>
</body>
</html>
Не рекомендуется подчеркивать текст, который не является ссылкой, так как это часто смущает пользователей.
Преобразование текста
Свойство text-transform используется для указания прописных и строчных букв в тексте.
Оно может быть использовано, чтобы показать все в верхнем или нижнем регистре, или сделать первую букву каждого слова в верхнем регистре.
Пример 5
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p.uppercase { text-transform:uppercase; }
p.lowercase { text-transform:lowercase; }
p.capitalize { text-transform:capitalize; }
</style>
</head>
<body>
<p class="uppercase">Это некоторый текст.</p>
<p class="lowercase">Это некоторый текст.</p>
<p class="capitalize">Это некоторый текст.</p>
</body>
</html>
Отступы в тексте
Свойство text-indent используется для задания отступа первой строки текста.
Пример 6
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p { text-indent:50px; }
</style>
</head>
<body>
<p>В комнате студента Иванопуло в день посещения Остапом Эллочки Щукиной появилась мебель. Это был стул, обмененный на чайное ситечко, -- третий по счету трофей экспедиции. Давно уже прошло то время, когда охота за бриллиантами вызывала в компаньонах мощные эмоции, когда они рвали стулья когтями и грызли их пружины.</p>
</body>
</html>
Еще примеры
Пример 7
Этот пример демонстрирует, как для увеличить или уменьшить расстояние между символами.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
h1 { letter-spacing:2px; }
h2 { letter-spacing:-3px; }
</style>
</head>
<body>
<h1>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
</body>
</html>
Пример 8
Этот пример демонстрирует, как указать расстояние между строками в абзаце.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p.small { line-height:90%;}
p.big { line-height:200%; }
</style>
</head>
<body>
<p>
Это параграф со стандартной высоты линии.
Высота линии по-умолчанию в большинстве браузеров составляет около 110% до 120%.
Это параграф со стандартной высоты линии.
</p>
<p class="small">
Это параграф с меньшей высоты линии.
Это параграф с меньшей высоты линии.
Это параграф с меньшей высоты линии.
</p>
<p class="big">
Это параграф с большей высоты линии.
Это параграф с большей высоты линии.
Это параграф с большей высоты линии.
</p>
</body>
</html>
Пример 9
Этот пример демонстрирует, как изменить направление текста элемента.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div.ex1 { direction:rtl; }
</style>
</head>
<body>
<div>Некоторый текст. Направление по умолчанию.</div>
<div class="ex1">Некоторый текст. Направление справа налево.</div>
</body>
</html>
Пример 10
Этот пример демонстрирует, как увеличить пробелы между словами в параграфе.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p { word-spacing:30px; }
</style>
</head>
<body>
<p>Это некоторый текст. Это некоторый текст.</p>
</body>
</html>
Пример 11
Этот пример демонстрирует, как отключить перенос текста внутри элемента.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p { white-space:nowrap; }
</style>
</head>
<body>
<p>
Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст.
Это некоторый текст. Это некоторый текст.
</p>
</body>
</html>
Пример 12
В этом примере показано, как задать вертикальное выравнивание изображения в тексте.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
img.top { vertical-align:text-top; }
img.bottom { vertical-align:text-bottom; }
</style>
</head>
<body>
<p>Изображение <img src="/img/ru/xhtml_logo.png" alt="Xhtml_schools"> с обычным выравниванием.</p>
<p>Изображение <img class="top" src="/img/ru/xhtml_logo.png" alt="Xhtml_schools"> с выравниванием текста вверх.</p>
<p>Изображение <img class="bottom" src="/img/ru/xhtml_logo.png" alt="Xhtml_schools"> с выравниванием текста вниз.</p>
</body>
</html>
Все свойства текста CSS
Номер в колонке "CSS" указывает, в какой версии CSS свойство определено (CSS1 или CSS2).
| Свойство | Описание | Значения | CSS |
|---|---|---|---|
| color | Устанавливает цвет текста | color | 1 |
| direction | Устанавливает направление текста | ltr rtl |
2 |
| line-height | Устанавливает расстояние между строками | normal number length % |
1 |
| letter-spacing | Увеличивает или уменьшает пространство между символами | normal length |
1 |
| text-align | Выравнивает текст в элементе | left right center justify |
1 |
| text-decoration | Добавляет украшения в текст | none underline overline line-through blink |
1 |
| text-indent | Отступы первой строки текста в элементе | length % |
1 |
| text-shadow | none color length |
||
| text-transform | Управление буквами в элементе | none capitalize uppercase lowercase |
1 |
| unicode-bidi | normal embed bidi-override |
2 | |
| vertical-align | Устанавливает вертикальное выравнивание элемента | baseline sub super top text-top middle bottom text-bottom length % |
1 |
| white-space | Устанавливает, как обрабатываются пробелы внутри элемента | normal pre nowrap |
1 |
| word-spacing | Увеличивает или уменьшает пространство между словами | normal length |
1 |
Была ли эта информация полезной?
