Оформление текста

Чтобы выполнить выравнивание текста примените свойство text-align. Оно может принимать следующие значения:

left - выравнивание по левому краю
right - выравнивание по правому краю
center - выравнивание по центру
justify - выравнивание по ширине

Если надо выровнять по правому краю не весь текст, а только несколько абзацев, то лучше будет создать определенное правило. Это правило можно будет присвоить необходимым абзацам. Подробнее о создании правил.
Cоздаём правило, в котором указываем свойство text-align: right;


p.text {

  text-align: right;

  }

и присвоим необходимым абзацам атрибут class="text"


<html>

<head>

<title>Пример CSS</title>

</head>

<body>

<p>Здесь первое предложение.</p>

<p class="text">Здесь второе предложение.</p>

<p>Здесь третье предложение.</p>

<body>

</html>

После того как мы применили ко второму абзацу правило "p.text", текст стал выглядеть так:
Здесь первое предложение.

Здесь второе предложение.

Здесь третье предложение.

Для "красной строки" применяется свойство text-indent.
Присвоим первому абзацу "красную строку" 30 пикселей. Для этого создадим правило "p.ab" со свойством text-indent: 30px


p.ab {

  text-indent: 30px;

  }

и присвоим его первому абзацу


<html>

<head>

<title>Пример CSS</title>

</head>

<body>

<p class="ab">Здесь первое предложение.</p>

<p class="text">Здесь второе предложение.</p>

<p>Здесь третье предложение.</p>

<body>

</html>

После того как мы применили к первому абзацу правило "p.ab", текст будет выглядеть так:

Здесь первое предложение.

Здесь второе предложение.

Здесь третье предложение.

Если нужно зачеркнуть какое-либо слово или последовательность слов в предложении, то удобно использовать тэг <span>, который сам по себе никакой нагрузки не несет.


<html>

<head>

<title>Пример CSS</title>

</head>

<body>

<p class="ab">Здесь первое предложение.</p>

<p class="text">Здесь второе предложение.</p>

<p>Здесь <span>третье</span> предложение.</p>

<body>

</html>

Получим результат:
Здесь первое предложение.

Здесь второе предложение.

Здесь третье предложение.
Как видно из примера, выделенное тэгами <span></span> слово "третье" не изменилось.
Сделаем зачеркнутым слово "третье" в третьем предложении. Для этого создадим правило ".cherta" со свойством text-decoration: line-through;


.cherta {

  text-decoration: line-through;

  }

и применим его к тэгу <span>


<html>

<head>

<title>Пример CSS</title>

</head>

<body>

<p class="ab">Здесь первое предложение.</p>

<p class="text">Здесь второе предложение.</p>

<p>Здесь <span class="cherta">третье</span> предложение.</p>

<body>

</html>

После того как мы применили к слову "третье" правило ".cherta", текст стал выглядеть так:

Здесь первое предложение.

Здесь второе предложение.

Здесь третье предложение.

Для придания буквам различной величины, используется свойство text-transform. Оно принимает значения:

capitalize - делает первую букву каждого слова прописной
uppercase - делает все буквы прописными
lowercase - делает все буквы строчными

Теперь сделаем прописными первые буквы всех слов в абзаце.
Cоздадим правило "p.tr" со свойством text-transform: capitalize;


p.tr {

  text-transform: capitalize;

  }

и присвоим его третьему абзацу


<html>

<head>

<title>Пример CSS</title>

</head>

<body>

<p class="ab">Здесь первое предложение.</p>

<p class="text">Здесь второе предложение.</p>

<p class="tr">Здесь <span class="cherta">третье</span> предложение.</p>

<body>

</html>

После того как мы применили к третьему абзацу правило "p.tr", текст стал выглядеть так:

Здесь первое предложение.

Здесь второе предложение.

Здесь третье предложение.

Свойство word-spacing указывает расстояние между словами.
Зададим расстояние 10 пикселей между словами. Добавим свойство word-spacing со значением 10px в правило "p.ab"


p.ab {

  text-indent: 30px;

  word-spacing: 10px;

  }

Расстояние между словами первого абзаца стало 10 пикселей:

Здесь первое предложение.

Здесь второе предложение.

Здесь третье предложение.

Если Вы хотите увеличить расстояние между буквами, то используйте свойство letter-spacing


p.ab {

  text-indent: 30px;

  word-spacing: 10px;

  letter-spacing: 5px;

  }

Расстояние между буквами первого абзаца стало 5 пикселей:

Здесь первое предложение.

Здесь второе предложение.

Здесь третье предложение.

Если Вы хотите увеличить расстояние между строками, то используйте свойство line-height.
Полный список свойств для работы с текстом можно посмотреть в справочнике.