Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 4:

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

< Лекция 3 || Лекция 4: 123 || Лекция 5 >
Аннотация: Описываются механизмы представления текстовой информации: оформление, выравнивание, отступы и др.

Параметры текста 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

Примеры

  1. Этот пример показывает, как задать цвет текста.
    <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>
  2. Этот пример показывает, как задать фоновый цвет части текста.
    <html>
    <head>
    <style type="text/css">
    span.back
    {
    background-color: gray
    }
    </style>
    </head>
    
    <body>
    <p>
    Данный текст содержит определение, фон которого выделен. <span class="back">Это 
      определение.</span> 
    </p>
    </body>
    </html>
  3. Данный пример показывает, как увеличить или уменьшить интервал между символами.
    <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>
  4. Данный пример показывает, как выравнивать текст.
    <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>
  5. Этот пример показывает, как можно оформить текст.
    <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>
  6. Этот пример показывает, как сделать отступ для первой строки параграфа.
    <html>
    <head>
    </head>
    
    <body>
    <p>
    параграф<br>
    <p style="text-indent: 2cm;">
    параграф<br>
    <p style="text-indent: 4cm;">
    параграф<br>
    </p>
    </body>
    
    </html>
  7. Данный пример показывает, как управлять регистром символов в тексте.
    <html>
    <head>
    </head>
    
    <body>
    <pre style="text-transform: uppercase;">Верхний регистр</pre>
    
    <p style="text-transform: lowercase;">Нижний регистр</p>
    
    <pre style="text-transform: capitalize;">первые буквы в словах заглавные</pre>
    </body>
    
    </html>
< Лекция 3 || Лекция 4: 123 || Лекция 5 >
Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Елена Елаева
Елена Елаева
Россия
Владимир Лагодный
Владимир Лагодный
Россия