Параметр '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 }
Этот пример показывает, как задать
- Этот пример показывает, как задать цвет текста.
<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 href="http://www.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;">первые буквы в словах заглавные</p> </body>
</html>
