Параметры текста CSS позволяют управлять внешним видом текста. Можно изменять цвет текста, увеличивать или уменьшать интервал между символами, выравнивать текст, оформлять текст, делать отступ для первой строки текста и т.д.
Поддержка браузеров: Internet Explorer, Firefox, Netscape.
| Параметр |
Описание |
Значения |
IE |
F |
N |
W3C |
| color |
Задает цвет текста |
Color |
3 |
1 |
4 |
1 |
| direction |
Задает направление текста |
ltr |
6 |
1 |
6 |
2 |
| rtl |
| letter-spacing |
Увеличивает или уменьшает интервал между символами |
normal |
4 |
1 |
6 |
1 |
| length |
| text-align |
Выравнивает текст в элементе |
Left |
4 |
1 |
4 |
1 |
| right |
| center |
| justify |
| text-decoration |
Дополнительное оформление текста |
none |
4 |
1 |
4 |
1 |
| underline |
| overline |
| line-through |
| blink |
| text-indent |
Делает отступ для первой строки текста элемента |
length |
4 |
1 |
4 |
1 |
| % |
| text-shadow |
|
none |
|
|
|
|
| color |
| length |
| text-transform |
Управляет символами элемента |
none |
4 |
1 |
4 |
1 |
| capitalize |
| uppercase |
| lowercase |
| unicode-bidi |
|
unicode-bidi |
5 |
|
|
2 |
| normal |
| embed |
| bidi-override |
| white-space |
Задает способ обращения с пробелами внутри элемента |
normal |
5 |
1 |
4 |
1 |
| pre |
| nowrap |
| word-spacing |
Увеличивает или уменьшает пробел между словами |
normal |
6 |
1 |
6 |
1 |
| length |
Примеры
- Этот пример показывает, как задать цвет текста.
<html>
<head>
<style type="text/css">
p {color: green}
ul {color: #dda0dd}
ol {color: rgb(0,0,255)}
</style>
</head>
<body>
<ul>
<li>список ul</li>
</ul>
<ol>
<li>список ol</li>
</ol>
<p>это параграф</p>
</body>
</html>
- Этот пример показывает, как задать фоновый цвет части текста.
<html>
<head>
<style type="text/css">
span.back
{
background-color: gray
}
</style>
</head>
<body>
<p>
Данный текст содержит определение, фон которого выделен. <span class="back">Это
определение.</span>
</p>
</body>
</html>
- Данный пример показывает, как увеличить или уменьшить интервал между символами.
<html>
<head>
<style type="text/css">
p {letter-spacing: 1cm}
li {letter-spacing: 5px}
</style>
</head>
<body>
<p>параграф</p>
<ol>
<li>элемент списка</li>
</ol>
</body>
</html>
- Данный пример показывает, как выравнивать текст.
<html>
<head>
<style type="text/css">
ol {text-align: center}
ul {text-align: left}
dl {text-align: right}
</style>
</head>
<body>
<ol>
<li>список ol</li>
<li> список ol</li>
<li> список ol</li>
</ol>
<ul>
<li> список ul</li>
<li> список ul</li>
<li> список ul</li>
</ul>
<dl>
<dt> список <dd>dl dl dl</dd></dt>
<dt> список <dd>dl dl dl</dd></dt>
<dt> список <dd>dl dl dl</dd></dt>
</dl>
</body>
</html>
- Этот пример показывает, как можно оформить текст.
<html>
<head>
<style type="text/css">
a {text-decoration: underline}
ul {text-decoration: overline}
ol {text-decoration: line-through}
</style>
</head>
<body>
<ol>
<li>первое</li>
<li>второе</li>
<li>третье</li>
</ol>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<p><a style="color:#666666;" href="/external/?popup=0&url=http%3A%2F%2Fwww.intuit.ru%2F" onMouseOver="menuSetHelpText('intuit');return false;" onMouseOut="menuClearHelpText()" title="ссылка на INTUIT.ru">www.intuit.ru</a></p>
</body>
</html>
- Этот пример показывает, как сделать отступ для первой строки параграфа.
<html>
<head>
</head>
<body>
<p>
параграф<br>
<p style="text-indent: 2cm;">
параграф<br>
<p style="text-indent: 4cm;">
параграф<br>
</p>
</body>
</html>
- Данный пример показывает, как управлять регистром символов в тексте.
<html>
<head>
</head>
<body>
<pre style="text-transform: uppercase;">Верхний регистр</pre>
<p style="text-transform: lowercase;">Нижний регистр</p>
<pre style="text-transform: capitalize;">первые буквы в словах заглавные</pre>
</body>
</html>
Параметры текста в CSS: подробное рассмотрение
Параметр 'color'
Этот параметр задает цвет текста.
Наследование: да.
Может принимать следующие значения:
| Значение |
Описание |
| color |
Значением color может быть название цвета (red), значение rgb (rgb(255,0,0)) или шестнадцатеричное значение (#ff0000). |
Пример:
h1
{
color: green
}
Параметр 'direction'
Параметр задает направление текста.
Наследование: да.
Может принимать следующие значения:
| Значение |
Описание |
| ltr |
Направление текста слева направо |
| rtl |
Направление текста справа налево |
Пример:
p
{
direction: rtl
}
Параметр 'letter-spacing'
Данный параметр увеличивает или уменьшает интервал между символами.
Наследование: да.
Примечание: допускаются отрицательные значения.
Может принимать следующие значения:
| Значение |
Описание |
| normal |
Определяет обычный пробел между символами |
| Length |
Определяет фиксированный пробел между символами |
Примеры:
pre
{
letter-spacing: -2px
}
pre
{
letter-spacing: 20px
}
Параметр 'text-align'
Этот параметр задает выравнивaние текста в элементе.
Наследование: да.
Может принимать следующие значения:
| Значение |
Описание |
| left |
Выравнивает текст слева |
| right |
Выравнивает текст справа |
| center |
Центрирует текст |
| justify |
|
Пример:
h1
{
text-align: right
}
Параметр 'text-decoration'
Данный параметр задает дополнительное оформление текста.
Наследование: нет.
Примечание: цвет оформления должен быть задан свойством "color".
Может принимать следующие значения:
| Значение |
Описание |
| None |
Определяет обычный текст |
| Underline |
Определяет линию под текстом |
| Overline |
Определяет линию над текстом |
| line-through |
Определяет линию через текст |
| Blink |
Определяет мигающий текст |
Пример:
h1
{
text-decoration: overline
}
Параметр 'text-indent'
Данный параметр создает отступ для первой строки текста элемента.
Наследование: да.
Примечание: допускаются отрицательные значения, для которых первая строка будет сдвинута влево.
Может принимать следующие значения:
| Значение |
Описание |
| Length |
Определяет фиксированный отступ |
| % |
Определяет отступ в % от ширины родительского элемента |
Примеры:
pre
{
text-indent: -10px
}
p
{
text-indent: 10px
}
Параметр 'text-transform'
Этот параметр управляет регистром символов в элементе.
Наследование: да.
Может принимать следующие значения:
| Значение |
Описание |
| None |
Определяет обычный текст с символами нижнего регистра и заглавными буквами |
| Capitalize |
Каждое слово в тексте начинается с заглавной буквы |
| Uppercase |
Определяет только заглавные буквы |
| Lowercase |
Определяет только символы нижнего регистра
|
Примеры:
h1
{
text-transform: capitalize
}
pre
{
text-transform: lowercase
}
Параметр 'white-space'
Параметр задает способ обработки пробелов внутри элемента.
Наследование: да.
Может принимать следующие значения:
| Значение |
Описание |
| normal |
Браузер игнорирует пробел |
| pre |
Браузер сохраняет пробел. Действует как тег <pre> в HTML |
| nowrap |
Текст не будет переноситься на другую строку, пока не встретится тег <br>
|
Пример:
pre
{
white-space: pre
}
Параметр 'word-spacing'
Данный параметр увеличивает или уменьшает пробел между словами.
Наследование: да.
Примечание: допускаются отрицательные значения.
Может принимать следующие значения:
| Значение |
Описание |
| normal |
Определяет обычный пробел между словами |
| length |
Определяет фиксированный пробел между словами |
Примеры:
pre
{
word-spacing: -10px
}
h1
{
word-spacing: 35px
}
|
Посмотреть
порно видео в онлайне »