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

- Размер
- Тип
- Стиль
- Ширина
- Капитель шрифта
- Отступы
- Выравнивание
- Оформление
- Расстояние между словами и буквами
- Цвет

Применять вышеуказанные свойства будем на следующем обрывке:

<h1>Советы Дейла Карнеги</h1>
<p>
Известный американский психолог <span>Дейл Карнеги</span> в третий части своей книги  «Как завоевывать друзей и оказывать влияние на людей», которая называется «12 правил, соблюдение которых позволяет склонить людей к вашей точке зрения», предлагает очень интересные суждения, выводы и правила по поводу спорных ситуаций.
</p>
<blockquote>Записки о Д. Карнеги</blockquote>

Рис1. Так выглядит текст без оформления

Далее поэтапно будем применять к данному тексту различные свойства.

Размер шрифта

Размер шрифта задается с помощью свойства font-size, который может принимать значения в различных измерительных единицах:
px – пиксель
cm – сантиметр
mm – миллиметр
pt – пункт
pc – пика
% - в процентах

<style type="text/css">
  h1{font-size:16px;}
  p{font-size:12px;}
  blockquote{font-size:12px;}
</style>

Рис 2. Текст после указания размера шрифта

Тип шрифта

Тип или семейство шрифта задается с помощью свойства font-family, в котором нужно указать один или несколько шрифтов перечисляя их через запятую (font-family:"serif","sans-serif"). Если указано несколько шрифтов, то браузер будет перебирать их слева направо. Используйте общепринятые шрифты, которые наверняка есть на ПК клиента, в случае их отсутствия браузер отобразит шрифт по умолчанию.
Список популярных шрифтов:
serif
sans-serif
Tahoma
Georgia
monospace
cursive
fantasy

<style type="text/css">
  h1{font-family:"Tahoma";}
  p{font-family:"Tahoma";}
  blockquote{font-family:"Tahoma";}
</style>

Рис 3. Текст после указания семейства шрифта

Стиль шрифта

Стиль задается с помощью свойства font-style. Принимает следующие значения
normal
italic – Курсивное начертание, имитирует рукописный шрифт
oblique – Наклонное начертание, образуется путем наклона букв вправо

<style type="text/css">
  blockquote{font- style: italic;}
</style>

Рис 4. Применение стиля к подписи

Ширина шрифта

Задается с помощью свойства font-weight, значение можно задать в виде числа от 100 до 900, либо специальными ключевыми словами: lighter(100),normal (400), bold(700), bolder(900).

<style type="text/css">
  h1{font-weight: bold;}
</style>

Капитель шрифта

Капитель – тип начертания, в котором строчные знаки выглядят, как уменьшенные прописные, они имеют большую высоту, и расширенные пропорции, чем строчные знаки. Задать капитель можно с помощью свойства font-variant. Его значения:
normal;
small-caps;

<style type="text/css">
  h1{font-variant:small-caps;}
</style>

Рис 5. Заголовок после применения свойства капитель

Примечание

Существует универсальное свойство font, в котором одновременно можно задать все выше приведенные свойства, его синтаксис:

font: [font-weight или font-variant или font-style] font-size font-family

На практике это будет выглядеть следующим образом:

<style type="text/css">
  h1{font: small-caps 16px "Tahoma";}
  p{font: 12px "Tahoma";}
  blockquote{font: italic 12px "Tahoma";}
</style>

Отступы

С помощью свойства text-indent, можно задать отступ от левого края в px.

<style type="text/css">
p{text-indent:15px;}
</style>

Рис 6. Текст после задание отступа в 15px

Выравнивание текста

Горизонтальное выравнивание можно задать с помощью свойства text-align, которое принимает следующие значения:
Center
Justify
Left
Right

<style type="text/css">
  h1{text-align: center;}
  p{text-align: jutify;}
  blockquote{text-align: justify;}
</style>

Рис 7. Текст после выравнивания

Декоративное оформление текста.

Оформить текст можно с помощью свойства text-decoration. Далее приведены его значения:
None – без оформления;
Underline – линия под строкой
Overline – линия над строкой
line-through – зачеркнутая строка

<style type="text/css">
  span{text-decoration:underline;}
</style>

Рис 8. Текст после оформления.

Расстояние между словами и буквами

Расстояние между словами задается свойством word-spacing, между буквами letter-spacing, в обоих случаях значение задается в px.

<style type="text/css">
  h1{letter-spacing:5px;}
</style>

Рис 9. Расстояние между буквами в заголовке 5px

Цвет

Для изменения цвета текста нужно использовать свойство color, для изменения фона вокруг текста background-color. Значения в обоих свойствах задается тремя способами: название цвета (white, blue, black, yellow и др.), шестнадцатеричное значение (белый - #FFFFFF, черный - #000000, красный - FF0000), либо с помощью RGB;

<style type="text/css">
  h1{color:#001B99;}
  span{background-color:#2200CC; color:white;}
</style>

Рис 10. Текст после изменения цвета.

Добавлено: 21 Февраля 2015 20:18:19 Добавил: Андрей Ковальчук Нравится 0

Добавить