Оформление текста и другие базовые возможности

---

Изменение высоты строки (межстрочного интервала) в тексте

Если межстрочный интервал по умолчанию оказывается слишком маленьким, его можно изменить с помощью свойства line-height:

p {
  font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
  line-height: 2.0;
}

Результат показан на рис. 1.

Рис. 1. Изменение межстрочного интервала с помощью свойства line-height

Выравнивание текста по ширине

Абзац можно выровнять по ширине с помощью свойства text-align, например:

p {
  text-align: justify;
  font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
  line-height: 2.0;
}

На рис. 2 изображен результат присваивания значения justify свойству text-align.

Рис. 2. Выравнивание текста с помощью text-align

Изменение стиля горизонтальной линии

С помощью CSS можно изменить цвет, высоту и ширину горизонтальной линии. Однако это следует делать с осторожностью, поскольку один и тот же эффект может по-разному выглядеть в различных броузерах.

hr {
  border: none;
  background-color: #256579;
  color: #256579;
  height: 2px;
  width: 80%;
}

Результат можно увидеть на рис. 3.

Рис. 3. Изменение цвета, высоты и ширины горизонтальной линии

Вывод текста с отступом

Для добавления отступа от элемента до края контейнера последнему нужно задать свойство padding-left, как в следующем примере:

indent.html

<h1>Цвет идет, дорогу цвету</h1>
<p class="indent">При добавлении цветного ...</p>

indent.css

.indent {
  padding-left: 1.5em;
}

Получившийся абзац с отступом можно увидеть на рис. 4.

Рис. 4. Добавление отступа с помощью CSS

Совет С красной строки. Можно создать отступ и только для первой строки каждого абзаца. Для этого к нему – или классу абзацев – нужно применить свойство text-indent: p {   text-indent: 1.5em; }

Центрирование текста

Центрировать текст или любой другой элемент можно с помощью свойства text-align со значением center:

center.html

<h1>Цвет идет, дорогу цвету</h1>
<p class="centered">При добавлении цветного ...</p>

center.css

.centered {
  text-align: center;
}

Результат использования данного правила отражен на рис. 5.

Рис. 5. Центрирование текста с помощью свойства text-align

Вывод текста заглавными буквами с помощью CSS

Для изменения всех букв на заглавные и других трансформаций текста используется свойство text-transform:

transform.html

<h1>Цвет идет, дорогу цвету</h1>
<p class="transform">При добавлении цветного ...</p>

transform.css

.transform {
  text-transform: uppercase;
}

Обратите внимание на текст на рис. 6.

Рис. 6. Использование свойства text-transform для вывода текста заглавными буквами

Свойство text-transform может принимать и другие полезные значения. При использовании значения capitalize каждое слово будет начинаться с заглавной буквы, как видно на рис. 7.

capitalize.css

.transform {
  text-transform: capitalize;
}

Данному свойству также можно присваивать следующие значения:
• lowercase (для отображения текста строчными буквами)
• none (отсутствие трансформаций, значение по умолчанию)

Рис. 7. Использование свойства text-transform для вывода каждого слова с большой буквы

Изменение стиля маркеров списка или удаление маркеров

Стиль маркеров ненумерованного списка можно изменить с помощью свойства list-style-type. Прежде всего рассмотрим следующую разметку списка:

listtype.html

<ul>
  <li>list item one</li>
  <li>list item two</li>
  <li>list item three</li>
</ul>

Для отображения маркеров в виде квадратиков, как на рис. 8, следует присвоить свойству list-style-type значение square:

listtype.css

ul {
  list-type-style: square;
}

Рис. 8. Маркеры списка в виде квадратиков

Если присвоить свойству list-style-type значение none, то маркеры в списке отображаться не будут.

listtype.css

ul {
  list-type-style: none;
}

Рис. 9. Список без маркеров

Использование изображения вместо маркера списка

Чтобы вместо маркеров списка отобразить заказное изображение, нужно использовать свойство list-style-image вместо list-style-type. Его значением может быть URL-адрес пути к файлу изображения:

listimage.css

ul {
  list-style-image: url(bullet.gif);
}

На рис. 10 видно, как можно оформить список с помощью описанного приема:

Рис. 10. Использование изображения в качестве маркера списка

Совет Добавление маркеров к отдельным пунктам списка. Свойство list-styleimage применяется по отношению к пунктам списка (элементам li). Если применить его по отношению к списку в целом (элементу ul или ol), оно будет унаследовано каждым отдельным пунктом. Тем не менее вы можете задать значение данного свойства отдельно для каждого пункта списка, добавив ему атрибут class или id. Это позволяет использовать разные маркеры для разных пунктов списка.

Удаление у пунктов списка отступа слева

Если вы задали свойству list-style-type значение none, то, возможно, вам также хотелось бы уменьшить или вовсе убрать возникающие при этом отступы слева.

Можно убрать отступы и выровнять пункты списка по левому краю, так что по вертикали они будут отображаться на одном уровне с предшествующим абзацем, как показано на рис. 11. Для этого нужно создать такое правило:

ul {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

Рис. 11. Список без маркеров и без отступов

При желании можно изменить величину отступов для пунктов списка. Например, чтобы отодвинуть список на несколько пикселов, можно использовать следующий код:

ul {
  list-style-type: none;
  padding-left: 5px;
  margin-left: 0;
}

Размещение пунктов списка по горизонтали

Для горизонтального размещения пунктов списка нужно присвоить свойству display для элемента li значение inline, например:

listinline.html

<ul class="horiz">
  <li><a href="#">Big Widgets</a></li>
  <li><a href="#">Small Widgets</a></li>
  <li><a href="#">Short Widgets</a></li>
  <li><a href="#">Tall Widgets</a></li>
</ul>

listinline.css

ul.horiz li {
  display: inline;
}

Результат применения данного правила стиля изображен на рис. 12.

Рис. 12. Горизонтальное расположение пунктов списка

Удаление отступов от края страницы

Для удаления всех отступов вокруг контента страницы используется следующее правило стиля, определенное для элемента body:

body {
  margin: 0;
  padding: 0;
}

Результат показан на рис. 13.

Рис. 13. Удаление отступов по умолчанию для тела документа

Удаление отступов по умолчанию для всех элементов страницы

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

Эту проблему можно решить, убрав все отступы для всех элементов страницы перед созданием своих стилей. Следующее правило задает нулевое значение отступов для всех элементов. В результате все абзацы, списки, заголовки и т. д. будут расположены вплотную к соседним элементам, как на рис. 14.

* {
  margin: 0;
  padding: 0;
}

Рис. 14. Удаление отступов для всех элементов страницы

---

Выравнивание текста по ширине

Изменение стиля горизонтальной линии

Вывод текста с отступом

Центрирование текста

Вывод текста заглавными буквами с помощью CSS

Изменение стиля маркеров списка или удаление маркеров

Использование изображения вместо маркера списка

Удаление у пунктов списка отступа слева

Размещение пунктов списка по горизонтали

Удаление отступов от края страницы

Удаление отступов по умолчанию для всех элементов страницы