Уроки CSS для новичков - Свойства текста

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

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

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

Листинг 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