Оформление текста с помощью CSS 


Оформление текста с помощью CSS

Опубликовано

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

Список свойств необходимых для форматирования текста:

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

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

<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>

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

Рис 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. Текст после изменения цвета.