HighStar


Свойства текста

На прошлом уроке я долго и нудно рассказывала о шрифтах. Сегодня я также долго и нудно буду рассказывать о свойствах текста.

Напишем следующий код:

Листинг 16.

<HTML>
  <HEAD>
    <TITLE>Реклама сайта</TITLE>
    <STYLE TYPE="text/css">
     p{
        letter-spacing:2px;
        text-decoration:underline;
        word-spacing:5mm;
        text-indent:3cm;
        text-align:center;
        vertical-align:baseline;
        line-height:5
      }
    </STYLE>
  </HEAD>
  <BODY>
    <p>Дикая Правда на www.dikarka.ru</p>
  </BODY>
</HTML>

И вот как это все выглядет в окне браузера:


Изменяем свойства текста

Ну, а теперь для непосвященных в свойства текста начинаю популярно объяснять каждую буковку и загогулинку. И только попробуйте все это не запомнить!

Сводная таблица свойств текста

НАЗВАНИЕПРИМЕРЧТО ПОЛУЧИЛОСЬ

без изменений

-

ДИКАЯ ПРАВДА

letter-spacing

Устанавливает расстояние (дополнительные промежутки) между буквами. Можно указывать расстояние в любых абсолютных единицах (in, cm, mm, pt, pc, px). Может задавать и отрицательные значения. Только смотрите, чтобы буквы не слиплись, и вместо одного слова не получилось бы одна буква.

letter-spacing:10pt

ДИКАЯ ПРАВДА

letter-spacing:"-5pt"

ДИКАЯ ПРАВДА

word-spacing

А это просто расстояние между словами. Указывается также в любых размерностях

word-spacing:2pt

ДИКАЯ ПРАВДА

word-spacing:5mm

ДИКАЯ ПРАВДА

text-decoration

Очень хорошая штука. Например, может использоваться для убирания (none) подчеркивания ссылок или, наоборот, для подчеркивания текста (underline), перечеркивания (line-through) или надчеркивания (overline) текста. А еще для вывода мерцающего текста (blink).

text-decoration:overline

ДИКАЯ ПРАВДА

text-decoration:line-through

ДИКАЯ ПРАВДА

text-indent

С его помощью можно установить "красную строку" (отступ). Указывается как в абсолютных единицах, так и в процентах от абзаца. Если дать отрицательное значение - получится выступ (висячая строка).

text-indent:"-5mm"

ДИКАЯ ПРАВДА

text-align

Здесь нам знакомые left, center и right, то есть выравнивание текста по левому, правому краю, либо по центру. Есть еще justify, которое выравнивает текст по ширине.

text-align:right

ДИКАЯ ПРАВДА

vertical-align

Устанавливает расположение текста по базовой линии (по умолчанию), либо по верхнему (super), либо по нижнему (sub) индексу относительно родительского элемента. Незаменим, например при формулах.

SPAN style="vertical-align:super"

(для "ДИКАЯ" - без изменений)

ДИКАЯПРАВДА

line-height

Определяет расстояние между строчками. Задается как в абсолютных единицах, так и в относительных. А можно и просто указывать число строк, не обязательно в целых числах.

line-height:0,5

дикая правда на www.dikarka.ru дикая правда на www.dikarka.ru дикая правда на www.dikarka.ru дикая правда на www.dikarka.ru