Основы работы с CSS

Параметры текста в CSS

Разбить на страницы
Показывать лекцию целиком

Параметры текста 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 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;">первые буквы в словах заглавные</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
}
    Страницы:

    Параметры текста 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 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;">первые буквы в словах заглавные</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
}
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^